Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Oct 19
Edited: Oct 19

iFrame Menu

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:
















Here's what my code currently looks like for one button:

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>'
}

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) {
$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'
}

I'd really appreciate any help I can get! Thank you.


1
Oct 19Edited: Oct 19

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 != 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'
    }
 
}

Hope this solves it

Oct 19Edited: Oct 19

I was able to resolve my last few questions, so I deleted them. Below is my final code so others can learn from it. Thank you very much Ido!


If anyone sees an easier or cleaner way to do this same effect, please let me know!




I made custom Font themes to make it easier to go back and forth between black and colored text (P2 & P3).


Added an empty <a> tag to give the user mouse feedback. <a target="">


Replace everything with *** with your own URLs.


Start with:

let clickedBox;

Repeat this string of code for each button:

export function box5_click(event) {
    $w('#html2').src = '***NEW-URL***'
    $w('#imageX3').src = '***NEW-IMAGE-URL***'
    $w('#imageX4').src = '***OLD-IMAGE-URL***'
    $w('#imageX5').src = '***OLD-IMAGE-URL***'
    $w('#imageX6').src = '***OLD-IMAGE-URL***'
    $w('#imageX7').src = '***OLD-IMAGE-URL***'
    $w('#imageX8').src = '***OLD-IMAGE-URL***'
    $w('#imageX9').src = '***OLD-IMAGE-URL***'
    $w('#text12').html = '<p class="p2">'+ $w("#text12").text +'</p>'
    $w('#text30').html = '<p class="p3">'+ $w("#text30").text +'</p>'
    $w('#text32').html = '<p class="p3">'+ $w("#text32").text +'</p>'
    $w('#text34').html = '<p class="p3">'+ $w("#text34").text +'</p>'
    $w('#text37').html = '<p class="p3">'+ $w("#text37").text +'</p>'
    $w('#text38').html = '<p class="p3">'+ $w("#text38").text +'</p>'
    $w('#text39').html = '<p class="p3">'+ $w("#text39").text +'</p>'
    $w("#html2").scrollTo();
    clickedBox = event.target.id;
}

export function box5_mouseIn(event) {
    $w('#text12').html = '<a target=""><p class="p2">'+ $w("#text12").text +'</p></a>'
    $w('#imageX3').src = '***NEW-IMAGE-URL***'
}

export function box5_mouseOut(event) {
 if (event.target.id !== clickedBox){
        $w('#text12').html = '<p class="p3">'+ $w("#text12").text +'</p>'
        $w('#imageX3').src = '***OLD-IMAGE-URL***'
    }
 
}
1

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. Hope I made myself clear.

Oct 19

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...


Thank you for your time!

Editor X

Design your boldest creations.