Hello,
I’m trying to create a menu for an iframe showing a Matterport. The idea is that the user can select different views of the Matterport by clicking on the menu. I need the menu buttons to have a hover effect, and remain highlighted when selected to show the user which view is currently being shown. The goal is to have one page and just reload the iframe with a new source URL and scroll to the iFrame when loaded. I’ve figured out how to change the source of the iframe and create the hover effects, but I’m having trouble with the button remaining highlighted when selected. To make the button feel like a clickable object(mouse feedback), I added a link to the text in the editor to scroll to an anchor on the iFrame.
Here’s a mockup of the menu that we are trying to create. You’ll notice there’s a text line and icon image that is highlighted when hovered, and also a line of text under that isn’t highlighted by the hover:
Hey there, the reason that your menu item does not remain highlighted, is because of the mouseOut function. it does it’s thing when you hover off the button even if the button was clicked. so maybe a good idea is to update a variable that identifies the current highlighted menu item in the onClick, and add an if statement in the mouseOut that only runs the code if the box is not the currently hovered one.
Hi Ido,
I think I understand what you mean, but could you please send me an example of how to execute this exception? I’ve tried so many different variations and nothing seems to be working correctly…
try to see if this works:
basically i added a clickedBox variable and at the end of the onClick function I update it with the id of the box that was clicked.
then in the mouseOut I use an if statement to see if the box that i’m hovering off is not the currently clicked box.
if it works you need to add it to all your onClick and mouseOut functions.
the let clickedBox you declare once outside the functions as shown here.
and the line: clickedBox = event.target.id you add at the end of all your onClick functions, and in the onMouseOut functions you wrap the code with an if statement:
if [(event.target.id]((event.target.id) != clickedBox){
//run code
}
let clickedBox;
export function box5_click(event) {
$w('#html2').src = 'https://my.matterport.com/show/?m=bFR4VkaX4Sc&sr=-2.81,-.66&ss=2&play=1&lang=fr&wh=0&vr=0'
$w('#imageX3').src = 'https://static.wixstatic.com/media/ab3098_dcf68efc1ed54b25af14b2e3ea13d8e9~mv2.png'
$w('#imageX4').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
$w('#imageX5').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
$w('#imageX6').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
$w('#text12').html = '<a target="/résidence-médard-collette-1#Matterport" "_self"><p class="p2"><span style="color: #0584FF">Laboratoire de neuropsychologie</span></p></a>'
clickedBox = event.target.id;
}
export function box5_mouseIn(event) {
$w('#text12').html = '<p class="p2"><span style="color: #0584FF">Laboratoire de neuropsychologie</span></p>'
$w('#imageX3').src = 'https://static.wixstatic.com/media/ab3098_dcf68efc1ed54b25af14b2e3ea13d8e9~mv2.png'
}
export function box5_mouseOut(event) {
if (event.target.id != clickedBox){
$w('#text12').html = '<p class="p3"><span style="color: #4A4A4A">Laboratoire de neuropsychologie</span></p>'
$w('#imageX3').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
}
}
