Show/hide elements based on Screen size

Discussion Ask a question
,
1

Hello guys,

I’ve really looked everywhere for this and I can’t find any concrete examples of how to do this.

I want to hide certain elements based on the users screen size. For example I’d like to hide a navigation menu and show a button that opens a lightbox instead if the users screen is say smaller than 1500px in width. Is this possible?

I’ve tried doing it with wixWindow but I can’t seem to get the code to work or I’m completely doing it wrong… I’m no expert in code so I’d really be happy for any help I can get.

Many thanks!
Regards,
Joe

2

Use wixWindow.getBoundingRect() to get the window size
https://www.wix.com/corvid/reference/wix-window.html#getBoundingRect
Then use $w(“#elementId”).hide() if it’s in a certain size

3

Thanks for your answer!

How should I write that in code?

I’ll import the wixWindow, then I do something like this?:
if wixWindow.getBoundingRect() === 1500px; {
$w(“#elementId”).show
};

if I use that I get "unexpected token wixWindow.

Any idea what I’m doing wrong?

Very much appreciated!

4 
import wixWindow from 'wix-window';//at top of the code page
$w.onReady(() => {
wixWindow.getBoundingRect()
  .then(winInfo => {
    let winHeight = winInfo.window.height; 
    let winWidth = winInfo.window.width; 
    if (winWidth < 1500){
      //code
    } else {
      //code
  }
  } );
});
5

Many many thanks! This worked great!

Final question: Is there a way for the code to fetch the browsers screen size in real time? As in if they resize their screen the code will detect it and execute the code again?

Also, how did you know what to put in the code? I tried finding the set up online but really couldn’t. Is there any specific sites that explain how to set up the code and in what order everything should be?

Many thanks again!

6

@josef ,
Currently you can’t use Corvid to set an event listener that detects screen size change.
However you can check size change every x millisecond using setInterval (I don’t know if it has any effect on the general performance, you’ll have to test it:

 import wixWindow from 'wix-window';//at top of the code page
$w.onReady(() => {
 setInterval(() => {detectScreenSizeChange();},100);
});
function detectScreenSizeChange(){
 wixWindow.getBoundingRect()
 .then(winInfo => {
  let winWidth = winInfo.window.width;
   if (winWidth < 1500){
    //code
  } else {
    //code
  }
 });
}
  1. As for how to understand how to use Corvid - there’s the full API documentation:
    Velo API Reference - Wix.com
    and you can search the forum as well (+ experience)
1 Like
7

@jonatandor35

Hey…

I am trying to set up a code which will HIDE my site HEADER - in MOBILE view - when the orientation is HORIZONTAL …

Found your code example above and tried to modify it for my purpose, as follows -

// Hide Header 1 if Mobile-View is HORIZONTAL

  $w.onReady(() => {

wixWindow.getBoundingRect()
  .then(winInfo => {
 let winHeight = winInfo.window.height; 
 let winWidth = winInfo.window.width; 
 let headerStrip1IsCollapsed = $w('#columnStrip14').collapsed;
 
 /// '#columnStrip14' is the primary container on my header - I am referencing that since when I try to reference "#header1" an ERROR message says "collapsed is not available on #header1" ///
 
 let headerStrip1IsExpanded = $w('#columnStrip14').expanded;

 if (winWidth > winHeight){
      headerStrip1IsCollapsed
    } else {
      headerStrip1IsExpanded
  }
  } );
});
//

But this is NOT making it happen! (Even though the code panel is NOT showing any Errors)

Where am I going wrong?
Can it actually be achieved, to begin with?

(I am a noob - who’s basically groping in the dark!)

Thanks for any suggestion/ help…

Aaditto
(For “bablifarm”)

8

First all, you should know that it won’t work if you change the orientation after the page got loaded (and I’m not sure it’ll work at all on some of cell-phones).

Second, you have some syntax errors:

import wixWindow from 'wix-window';
$w.onReady() => {getWindow();})
async function getWindow() {
const windowInfo = await wixWindow.getBoundingRect();
if(windowInfo.window.height >= 1000px){
$w("#elementId").show();
}
}