Hidden Elements on Mobile

Ask the community
,
10

let me explain a bit more.

the following piece of code is an event handler.

export function Header_onViewportLeave(event){
    $w("#LoveIcon").show("FadeIn");
}

for the purposes of this explanation, an event handler should always be a “top level” function in your page code.

now, sometimes you want your code to behave differently depending on some condition, in your case the form factor.

so here’s what you do:

//import statements always go to the top of the file 
import wixWindow from 'wix-window'; 

//event handler is a top-level function
export function Header_onViewportLeave(event){  
    //get the form factor
    let formFactor = wixWindow.formFactor;
    
    //in desktop. do animation
    if (formFactor === "Desktop")
    {
        $w("#LoveIcon").show("FadeIn"); 
    }
    else
    {
        //in mobile, do nothing
    }
}

See what we did here?
we moved the condition into the event handler and kept the event handler as a top-level function.

hope this helps…

p.s. the “else” part does nothing and can be removed,
I left it in for completeness.