Code for showing elements on mobile only doesnt work

Ask the community
,
1

Hey,
The following code is not functioning at the moment;

import wixWindow from ‘wix-window’;
$w.onReady(function () {
if(wixWindow.formFactor === “Mobile”){
$w(“#button45”).show();
}
});

I’m following the instructions shown on this page;

I’d like to make a different menu for desktops and mobiles without using the mobile view. So I want to hide the buttons I use for my menus for desktop view and show wix mene for the mobile viewers. But when I use the code provided (with hidden on load checked) it hides the elements and does not show for the mobile.

The reason for choosing to display different menus is because on mobile or touchscreens there is no mouseout event going on there. Simply touching the button opens the element but you have to try and touch all over the place to find a spot that closes it and also opened element does not close after new page load because its coded into the site not the specific page due to its being a menu element.

No coding knowledge on my end whatsoever so Im strictly following the instructions. Little help would be much appreciated!

Thank you.

1 Like
2

Same issue here. please help

3

Does it work on your mobile editor but doesn’t work on your actual site? Or it doesn’t work at all?

4

Hi Tal,

I have the same issue, I set all contents images etc. they do not shown on the mobile EDITOR when I want to preview and the second problem is some of the elements moved by itself after save it but NOT ALL PAGE ELEMENTS :confused: it is too strange . There is something worng but I could not find the problem

5

Hey,
Please send me the site URL and a screenshot of the issue so that we can check it on our end. Moreover, please follow the instructions here and send us the information requested at the end of the article so that we can try recreating the issue on our end.

Thanks,
Tal.

6

914×818 34.1 KB

Here is the link www.turkeytravelconsultant.com

When you check the mobile editor you will some items is already moved by itself for exmanle repeater on home page. I did not publish it because of the issue.

554×814 299 KB

As you see on two pages after I set them where I want and save it than they becomes like on the screenshoots

Thank you so in advance!

7

Hi Tal,

I haven’t heard from you for a while. Is there any news ?

8

Hi,
I’m truly sorry for the late response.

Note that you should have only one onReady function for each page. I saw that you’ve written two onReady functions- one for the mobile view and another one for the desktop view, which is incorrect.

954×434 38.8 KB

714×426 30.4 KB

Instead of using the properties panel to hide elements, use the formFactor function to check if it’s a mobile / desktop device and than show / hide the relevant elements.

$w.onReady(()=>{
   if(wixWindow.formFactor==="Mobile"){
      //show mobile elements
      //hide desktop elements
   }
   else{
      // show desktop elements
      // hide mobile elements
   }
});

I hope it’s clear.

Best,
Tal.

9

Hi,

I’m using this code :

import wixWindow from ‘wix-window’;
$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”) {
$w(“#albumgallery”).show();
}
});

and i did tick the Hidden on load option.
In Edit Mobile, it is there. But when Previewing it, it’s doesn’t appear.
The site is not live yet though.

Please help.

10

Hi Diyana,
Can you please post your question on a new thread and share with us some screenshots of the issue?

Thanks,
Tal.

11

I am having the same trouble here, having something display on mobile only. It hides on desktop but does not show on mobile. How can I get some help?

12

it does not work just on preview, it needs to be tested on a fully published site.