How to hide and collapse item on desktop view but show it on mobile view

Ask the community
,
1

I am a novice, and thanks heaps for your reply and advice

I have used the below code and it did the hide on desktop and showed it on mobile, but on the desktop it showed the blank space (page) which was behind the hidden item. I have tried clicking the “hide” and “collapse” buttons, but made no difference, i am also getting 2 error messages when in preview.

Code used

import wixWindow from ‘wix-window’ ; $w . onReady (()=>{ let formFactor = wixWindow . formFactor ; console . log ( formFactor ); if ( formFactor === “Mobile” ) { $w ( “#slideshow2” ). show ();} else { $w ( “#slideshow2” ). hide ();}}); I have tried option
else { $w ( “#slideshow2” ).collapse();}

2 error messages:

  • Loading the code for the Home page. To debug this code, open mainPage.js in Developer Tools.
    Desktop line 4

when i click on line 4 it takes me back to the code and it puts the blinking courser between console and the full stop

  • Improve loading time by turning on caching for the Home page. Lear n more

i have also tried a different code with checking the hide and collapse checkboxes

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

with this code i only get the below error and it still does not collapse the space behind the hidden item

  • Loading the code for the Home page. To debug this code, open mainPage.js in Developer Tools.

thanks heaps in advance

2

I was almost sure, that i already have answered to a very very similar post.
Where is the collapse-command in your code?

import wixWindow from'wix-window';

$w.onReady(()=>{console.log("Page is ready!!!")
    let formFactor = wixWindow.formFactor; console.log(formFactor);
    //first you have to expand then to show the element......
    if(formFactor==="Mobile") {$w("#slideshow2").expand(); $w("#slideshow2").show('fade');}
    // here --> first hide and than collapse....
    else{$w("#slideshow2").hide(); $w("#slideshow2").collapse();}
});

Please also use code-blocks next time to show your code in a nice format, with a good readability.

If you get errors while running your code —> than your code will stop and will not continue until end.
Therefore you have to navigate to the CONSOLE —> where you can inspect what is happening at the issued checkpoint.

You can for example open the CONSOLE in google-chrome, by a click onto F-12 and than navigating to → CONSOLE.

Or you can use the Wix-Editor, where you will find the CONSOLE on the very bottom of your Editor.

Also if someone would now say —> this is not a promise and you don’t have to use async-await —> just do it and you will see the difference.

import wixWindow from'wix-window';

$w.onReady(async()=>{console.log("Page is ready!!!")
    let formFactor = wixWindow.formFactor; console.log(formFactor);
    //first you have to expand then to show the element......
    if(formFactor==="Mobile") {$w("#slideshow2").expand(); $w("#slideshow2").show('fade');}
    // here --> first hide and than collapse....
    else{await $w("#slideshow2").hide('fade'); $w("#slideshow2").collapse();}
});

Found your original post…

3

@russian-dima thanks fro your answer. it still does not work. how much woudl you charge to have a look at it online, if i hire you? and how can i hire you?

4

You can find my email in my profile.

5

The simplest answer is to drag the element over another element Right click hover over arrange and click on send to back on the desktop