Collapse on desktop and uncollapse on mobile

Discussion Ask a question
,
1

Hi,
I created 2 repeaters that I would like to hide on desktop and show on mobile.
I used the “Hidden on load” function and added the coed for showing on mobile.

" import wixWindow from ‘wix-window’;

if (wixWindow.formFactor === “Mobile” &&
wixWindow.rendering.renderCycle === 1) {
$w(“#foundersmobilerepeater”).show();
$w(“#cisomobilerepeater”).show();
}"

The problem was that they load on desktop with all white space on the content and create a white space in the middle of the page.

I tried to solve it by mark the “Collapse on load” function - That work well for the desktop but how I uncollapsed them on mobile?

The site is:
https://we-are-hello.wixsite.com/cyberstars

Any thoughts?

Best,

Ohad

2

You should note that renderCycle has been deprecated and does not work as expected.

You can use rendering.env instead. Something like this:

if (wixWindow.rendering.env === "browser") {

I’ve changed all of my own code to use this in place of renderCycle and it works fine.

3

Regarding your problem with the white space… This is not necessarily a coding issue. It’s most likely related to page rendering/layout. For questions that are not related to code you can contact the Wix support team . You’ll get better help for your problem there.

4

Hi, This is a code issue. the “Hidden on load” just hide the element but showing up the space that the element require. I need to uncollapse on mobile. Do you have an option for that?

5

When I run your site in mobile mode in the Editor, I get the following errors:

775×186 11.3 KB

Element selectors cannot be used before the page is ready. You need to put your code inside an onReady().
In addition, you are still using renderCycle (which is deprecated and does not work).

Your code should look something like this:

$w.onReady(function () {
 if(wixWindow.formFactor === "Mobile" && (wixWindow.rendering.env === 'browser' ||         wixWindow.viewMode === 'Preview')) {
      $w("#foundersmobilerepeater").show();
      $w("#cisomobilerepeater").show();         
  }
});
1 Like
6

It might be worthwhile getting the Wix tutorials rewritten to include that now as they still talk about using the rendercycle instead of now using env.

if they weren’t updated when rendercycle and warmupdata were depreciated, then users are still going to use it as it is listed in the tutorial and they might not look at the API reference for it to see the new way to work it instead.

https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/wix-code-about-the-page-rendering-process

7

@givemeawhisky I know. I ran into this perusing the docs. Even though renderCycle says that it is deprecated, it’s still being used elsewhere in the docs.

8

@ohad-shalev

I use that on my own website to replace the hamburger on my mobile menu and it all works fine for me.

Also, note that if you use hidden on load, it isn’t shown on the page however it is still taking up room on the page, hence why you may have white gaps around things on your mobile display.

If you want to solve this, then adjust your mobile editor layout and as you said, you can use collapsed on load and expand instead of show and hide.
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html
https://www.wix.com/corvid/reference/$w.HiddenMixin.html

Finally, note that this code needs to go in your site code tab and this only works properly when viewed on a fully published website, it won’t show correctly on just the preview use only.

import wixWindow from 'wix-window';

$w.onReady(function () {
if(wixWindow.formFactor === "Mobile"){
$w("#mobilelogo").show();
$w("#mobilemenuopen").show();
$w("#mobilemenuclose").show();
}
$w("#mobilemenuopen").onClick( () => {
$w("#myMenuContainer").open();
} )
$w("#mobilemenuclose").onClick( () => {
$w("#myMenuContainer").close();
} )
} );
1 Like
9

@yisrael-wix

Silly that really, you would think that the Wix tutorials would get updated along the API info all at the same time, so that it all corresponds and relates to each other and isn’t telling users to do an old way.

10

@givemeawhisky I think that the title of this thread “collapse on desktop” sums it up perfectly.

1 Like
11

@yisrael-wix

Somebody needs a drinks break to freshen up…

1 Like
12

I know this problem has been resolved, but for anyone who still needs help for hiding content on desktop and showing on mobile without extra white space, try this:
Kindly Check the box: Collapsed on Load
Enter this Code:
import wixWindow from ‘wix-window’;
$w.onReady(function () {
if(wixWindow.formFactor === “Mobile”){
$w(" # your_first_element 's_ID “).expand();
$w(” # your_second_element 's_ID ").expand();
}
});

THIS CODE WILL COLLAPSE THE DESIRED ELEMENT ON DESKTOP AND EXPAND ON MOBILE!

1 Like
13

This is an old thread and being closed as solution has been provided by Yisrael and links for mobile only code with full example given too.

You can see Wix Corvid pages about mobile only code here.
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices