Showing elements in mobile only

So I found this tutorial Velo Tutorial: Displaying Elements in Mobile Only | Help Center | Wix.com

I typed in the code and I couldn’t get my element to appear in mobile preview so I straight up copied and pasted the code (changed the element ID of course) from the tutorial and still no luck. Any help?

2 Likes

Do you have a page url you can share?

The website isnt live yet


Here is a screenshot of what is going on

Try $w(‘#mobileButton’).show();

Steve can you help out here. everything works with the hidden elements on browser view and shows on mobile besides couple of pages. when i click on a dynamic page the elements go hidden. most links work on my site but when its a dynamic page or a lightbox link the elements disappear.

@info5 @konnermoshier Not sure if you are the same person or working on the same site :-). Can you provide more specific information and the link(s) to pages you are experiencing problems with? As a Wix Moderator and employee I have managed to find and look at your site but the landing page doesn’t seem to have the buttons identified in the screenshot above. Without more specific info it is impossible to help.

Cheers
Steve

@stevendc due to it not working I ditched the idea on the website

@konnermoshier OK. The main problem I saw in your original post was that you had not named the element correctly. The string inside the $w() call needs to include the # character for element names. You initially used $w(‘mobileButton’) which is why my suggestion was to use $w(‘#mobileButton’). It should work fine if you also make sure that the element is set to be hidden on load in the Editor.

Hi Steve please go to mosaichome.com with mobile view. click on the navigation box and chose beds. the header and footer elements are hidden. once you refresh it shows up. it only happens to the dynamic pages and lightbox. the minute you refresh it shows up but not from the begining.

@info5 I think one of your problems (if not the problem) is created by having two onReady() function calls. The $w.onReady() function registers a handler that executes when the page finishes loading. It potentially runs twice depending on the rendering cycle. I recommend that you put ALL of your onReady code in a single handler and remove the second onReady() function call.

Start with this and see how you go.

Steve

@stevendc i had thought about that and had taken out 2nd code so all i had was below which i have again but it still doesnt work. please let me know. and every other day anything layout i change on mobile it goes back to how it was layout position wise. i dont know why

import wixWindow from ‘wix-window’;

$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”){
$w(“#text33”).show();
$w(“#text34”).show();
$w(“#box1”).show();
}
} );

@info5 It is a bit strange. I’ll see if it’s a known big. In the meantime - the show() function returns a promise. Try adding a then and catch to see if you can get any errors or force the show().

e.g.

$w(‘#text33’).show()
.then(() => { console.log(‘completed - show’);})
.catch((error) => {
console.log(error.message);});

Steve

Hi Steve i put this code. i replaced your comma with quotes or else it was giving me errors but it still has a error. is my code correct?

import wixWindow from ‘wix-window’;

$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”){
$w(“#text33”).show()
.then(() => { console.log(“completed - show”);})
. catch ((error) => {
console.log(error.message);});

[@info5] Your if statement is not terminated. You need another }.

Your last line should end in }});

If you use indentation in your code these are easier to find

$w.onReady(() => {
if ( ) {
$w(…).show()
.then(() => {

    }); 
} 

});

Cheers
Steve

ok i put this code it didnt show any errors in the code …but again with mobile once i go to menu and chose dining chairs the hidden stuff doesnt show till i refresh the page

import wixWindow from ‘wix-window’;

$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”){
$w(“#text33”).show()
$w(“#text34”).show()
$w(“#box1”).show()
.then(() => { console.log(“completed - show”);})
. catch ((error) => {
console.log(error.message);});
}
}
);

Hi Steve i just found a way but i dont know if its the correct way. i put my original code in the site section and not the page section …and it worked. i wonder if that will be ok

[@info5] Hi there. Yes and actually that makes sense. Wix websites are single page sites. What this means is that once the main page is loaded all subsequent pages are loaded an managed in javascript. The main page is not reloaded unless you perform a browser reload. By adding the code to the site code you force it to run on every new page you navigate to. So good thinking there :wink:

thnaks