need to remove mouseIn event from mobile mode

Ask the community
,
1

I have several elements on my page with mouseIn/Out events that I cannot have in mobile mode for obvious reasons, but no matter how hard I try, the mobile view still shows mouse over events. I have tried using wixWindow to show the hidden boxes in mobile mode to no avail. I have also tried using wixWindow to hide the mouse over boxes in desktop mode (rather than using the priorities box) and only allow mouse over code in desktop mode. This hasn’t worked either. I am relatively new to code, and I just can’t see where I’ve got it wrong. I’ve read through post after post on WixCode and tried what seems like everything, but nothing seems to help. I have posted my code below. Will someone please read it and tell me what a doofus I am?

import wixWindow from ‘wix-window’;

$w.onReady( function () {

let formFactor = wixWindow.formFactor;

if (formFactor === “Desktop” &&
wixWindow.rendering.renderCycle === 1) {
$w(“#SativaText”).hide();
$w(“#SativaExplain”).hide();
$w(“#IndicaText”).hide();
$w(“#IndicaExplain”).hide();
$w(“#HybridText”).hide();
$w(“#HybridExplain”).hide();

   $w("#SativaBox").onMouseIn( (event, $w) => { 
         $w("#SativaText").show(); 
         } ); 

    $w("#SativaBox").onMouseOut( (event,$w) => { 
        $w("#SativaText").hide(); 
    } ); 


    $w("#SativaLabel").onMouseIn( (event, $w) => { 
        $w("#SativaExplain").show(); 
        $w("#SativaText").hide(); 
        } ); 

    $w("#SativaLabel").onMouseOut( (event, $w) => { 
        $w("#SativaExplain").hide(); 
        $w("#SativaText").show(); 
        } ); 



    $w("#IndicaBox").onMouseIn( (event, $w) => { 
        $w("#IndicaText").show(); 
    } ); 

    $w("#IndicaBox").onMouseOut( (event, $w) => { 
        $w("#IndicaText").hide(); 
    } ); 


    $w("#IndicaLabel").onMouseIn( (event, $w) => { 
        $w("#IndicaExplain").show(); 
        $w("#IndicaText").hide(); 
        } ); 

    $w("#IndicaLabel").onMouseOut( (event, $w) => { 
        $w("#IndicaExplain").hide(); 
        $w("#IndicaText").show(); 
    } ); 



    $w("#HybridBox").onMouseIn( (event, $w) => { 
        $w("#HybridText").show(); 
        } ); 

    $w("#HybridBox").onMouseOut( (event, $w) => { 
        $w("#HybridText").hide(); 
    } ); 


    $w("#HybridLabel").onMouseIn( (event, $w) => { 
        $w("#HybridExplain").show(); 
        $w("#HybridText").hide(); 
        } ); 

    $w("#HybridLabel").onMouseOut( (event, $w) => { 
        $w("#HybridExplain").hide(); 
        $w("#HybridText").show(); 
        } ); 
}

else
{
$w(“#SativaText”).show();
$w(“#SativaExplain”).show();
$w(“#IndicaText”).show();
$w(“#IndicaExplain”).show();
$w(“#HybridText”).show();
$w(“#HybridExplain”).show();
}

2

On each event you should check the formFacto and perform the action only if it’s on desktop:

 $w("#SativaLabel").onMouseOut( (event, $w) => {
      if(formFactor === "Desktop") {
              $w("#SativaExplain").hide();
              $w("#SativaText").show();
      }
} );
3

I appreciate you getting back to me. Thank you so much. I did as you suggested, but this has somehow disabled all of my mouse overs including on desktop, and my text boxes are completely hidden, now. What do you think could be causing that? Would you like to see my code again?

4

Hi,
Have you tried simply hiding the elements on the mobile editor ? These elements should be hidden on your mobile site only. If it doesn’t help, I would check the IDs of the elements to make sure that you hide the correct elements.

Best,
Tal.

5

Thanks, Tal, but I want these elements to show, not hide, in mobile mode. I know the ID’s are correct because my mouse over code works. However, I want it to only work in desktop mode, but my form factor code doesn’t seem to be working. Do you have any advice to that end?

6

Can you please send me the site URL so that I can have a look? Moreover, please specify the name of the page you were referring.

Thanks.

7

I would really appreciate you having a look.
(link temporarily removed)

I have not yet published this site as I want to get everything running smoothly first. The specific page in question is called “Our Strains”. Everything functions as designed when in desktop mode, but in mobile mode, the boxes that should be shown are hidden and also show a mouse over event. I have tried several variations of the code you will find to no avail which leads me to wonder if the form factor is coded wrong or if the mobile emulator just doesn’t recognize the code. Please help in any way you can. Thanks, Tal!

8

Am I so far beyond help? Does anyone else have any advice? Please help me resolve this!

9

Hey,
I’m truly sorry for the delay. I saw that you’ve removed the link.
You can send me the link of the editor in case you don’t want to publish the site. This way, I will be able to view your code without others being able to view your site.

Tal.

10

I’ve checked your code and saw that you wrote the if statement outside of the onMouseIn event:

818×1010 112 KB

Try to do it inside the onMouseIn / onMouseOut event as explained by Ohad above.

Thanks,
Tal.

11

Thank you so much for your promptness. I tried Ohad’s suggestion when I was first advised, but was unsuccessful. I have since been manipulating the code to see what will work. I will try it again to see if I did it wrong the first time. Do I need to specify the form factor for each mouseIn event? That is what I did last time.

12

I have applied the form factor code to each MouseIn/MouseOut event and had the same result. All of these boxes are now hidden and inaccessible in preview mode. I tried using the hidden on load check box in the properties box instead of coding them to hide, but that made no difference. It’s like all of my events are inert. Can I bother to look again to see what I’ve done wrong please?