Wix Code for hiding element on desktop & showing on mobile not working??

Ask the community
,
1

Hey guys, I am NOT a coder of any sort but followed the wix instructions for the code to make this happen. This is what the code looks like below. It totally works in the sense that in the editing mode the button shows up, though is a lighter colour (and it doesn’t on desktop version) but as soon as I hit Preview on mobile the element disappears, even though I’ve followed the code to the dot to make it visible on mobile (or so I thought). Perhaps it’s also why it’s a lighter colour?

So on the desktop site I’ve clicked ‘hide on load’ in developer tools, then entered this code:

import wixWindow from ‘wix-window’;

$w.onReady( function () {
if (wixWindow.formFactor === “Mobile” &&
wixWindow.rendering.renderCycle === 1) {
$w(“#button9”).show();
$w(“#button13”).show();
$w(“#button14”).show();
$w(“#button15”).show();
$w(“#button16”).show();
$w(“#button17”).show();
$w(“#button18”).show();
$w(“#button19”).show();
}
} );

What do I do?? What am I missing?? Thanks team! Oh - I also tried it without the render cycle as per the original recommendation and just got the same thing, this was the ‘optimised’ version of the code but no difference.

2

Please post the editor URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

3

Sorry! It’s www.wordprescription.com

Since posting this I’ve read that code may only be applied to the LIVE version and hence not be visible in the preview mode - could this be what’s going on?

4

@ninalansdowne It could well be that, you should try to publish your changes and then load your site on a mobile device.

5

@ninalansdowne The renderCycle appears to be causing the problem. I got it working when I deleted the check for the renderCycle:

if (wixWindow.formFactor === "Mobile") {
    $w("#button9").show();
    $w("#button13").show();
    $w("#button14").show();
    $w("#button15").show();
    $w("#button16").show();
    $w("#button17").show();
    $w("#button18").show();
    $w("#button19").show();
  }

Try this and see if it works for you.

I’m reporting this issue to QA to see if there are any known issues regarding renderCycle and mobile.

6

@rodney Is it true that the preview mode doesn’t work with wix code changes like this? I really don’t want to test this out for the first time in production. I think this functionality is great and I want to use it in a number of places as I’m building, but if I can’t see what it’s going to look like before I push it live, I will have to go back to the drawing board.

7

@bob89260 Hi Bob, if you are referring to the mobile version preview then yes, or at least for me. Maybe mine is just an isolated case, but I could only see my changes on the published version. I’m not sure why, but it seems that the preview mode is not being recognized as a mobile device by the code, even if it is supposed to do that because you are accessing through the mobile editor. Again, I might be doing something wrong and this happens only to me, or few of us.