Community X.

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

Nov 20

Make a coded hover link clickable after it has been clicked.

Hello,


I have the following code for a menu that controls the source of an iframe and records the last clicked for a fullscreen feature. There are many pages that use the same type of code for different buildings. A couple of the pages only have one button. The user can move around in the iframe, but they cannot click the button in the menu to return to the beginning once it has already been clicked. I need to give the button the ability to be clicked again after it was already clicked to do the same action as originally.


The P2 and P3 font class is to show the button hover effect and changes the color of the font.


I can't seem to figure out a way to ensure the button remains active even after activated. Please help!


Thank you for your time,


import {local} from 'wix-storage';

let lastClicked;

$w.onReady(function () {
    $w("#html2").src = 'https://XXXXX';
    local.setItem('lightBoxSrc', 'https://XXXXX');
});

export function boxmenu1_click(event) {
    srollHTML(event.target.id);
    lastClicked = event.target.id;
}


export function switchImages(id){

 if(id === "boxmenu1"){
        console.log(id);
        $w("#html2").src = "https://XXXXX";
        local.setItem('lightBoxSrc', 'https://XXXX');
        $w("#imagemenu1").src = "https://XXXX.png"; 
        $w("#textmenu1").html =  `<p class="p2"> ${$w("#textmenu1").text}</p>`;     
    }

 
}

export async function srollHTML(id){
 await switchImages(id);
 if($w("#html2").rendered){
         $w("#html2").scrollTo();
    }else{
        srollHTML(id);
    }
 
}


export function onMouseIn(id){

}

export function boxmenu1_mouseIn(event) {
    console.log(event);
    $w('#textmenu1').html = '<a target=""><p class="p2">'+ $w("#textmenu1").text +'</p></a>'
    $w('#imagemenu1').src = 'https://XXXXX.png'
}


export function boxmenu1_mouseOut(event) {
 if (event.target.id !== lastClicked){
        $w('#textmenu1').html = `<p class="p3"> ${$w("#textmenu1").text}</p>` 
        $w('#imagemenu1').src = 'https://XXXXX.png'
    }

}




Editor X

Design your boldest creations.