I found the tutorial, 'Displaying Elements in Mobile only' and entered the following code:
import wixWindow from 'wix-window';
$w.onReady(function () {
if(wixWindow.formFactor === "Mobile"){
$w("#text122").show();
}
});However, I got a message, "TypeError: $w(...).show is not a function" The tutorial uses a button element in its example, so Im wondering if text needs to be treated differently? Any suggestions?
Hey thanks everyone for the help. I did a rewrite of the PC page and got rid of some columns that were impacting on the mobile version. New code was not needed and the mobile is working now.
Also make sure your button isn't already hidden on mobile through the mobile editor's hide on mobile feature. Click on the eye icon and make sure it's not already on there.
I have just tested this and it works fine with a button element and a text element.
Make sure that you are testing it on a live site and not through preview only,
In this tutorial here about the same thing it uses text elements and it all works as stated.
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
Plus, you will note that on the above link it does actually tell you to test on a live published site too.
Testing
If you want to test how your code works on mobile devices, you'll need to publish your site and view the published version on a mobile device or in a mobile device emulator.
Warning:
If you preview your site, it will always behave as if it is being viewed on a desktop device, even if you preview from the mobile editor.
To test your site on a desktop machine as if it is being viewed on a mobile device:
Publish your site.
View the published site.
Open your browser's developer tools.
Use your browser's developer tools to emulate a mobile device. (This is usually called something like Toggle device toolbar or Responsive Design Mode and turned on using an icon.
Refresh the page so your site now loads as if it were on a mobile device.
So make sure that you are following the tutorial correctly and have the elements on the desktop editor set to be hidden on load etc.
Using this code below I had no issues with it, even in the preview mode only.
import wixWindow from 'wix-window'; $w.onReady(function () { if(wixWindow.formFactor === "Mobile"){ $w("#button1").show(); $w("#text1").show(); } });Wix Desktop Editor
Wix Mobile Editor
Testing Preview.
Desktop Preview Empty
Testing Preview.
Mobile Preview Showing
As Shan says, check your elements id name as it states in the example itself.
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
... In line 2 above, there is a reference to "#button8", and the code sets that element to be hidden. The element you want to display is probably not named button8, so you'll need to modify this code to make it work on your page.
To make this code work with your element, replace button8 with the ID for your element that you noted in step 3...
I have used it myself and it all works fine.
import wixWindow from 'wix-window'; $w.onReady(function () { if(wixWindow.formFactor === "Mobile"){ $w("#mobilelogo").show(); $w("#mobilelogo1").show(); $w("#menuheaderstrip").show(); } });Probably the element id is wrong. Check the correct id in the properties panel. Take a look on how to work with the code panel