So I am currently trying to develop for my website a way to detect if the user has shrunk screen-sizes (desktop only), is there a way for wix code to detect if they screen size has shrunk and automatically update certain objects to become collapsed or hidden if the screen is shrunk at all?
Currently this is what I am trying to do.
if (wixWindow <= 948) { if (('#anchorMenu1').collapsed() !== false) { $w('#anchorMenu1').collapse(); //Expand Page elements... } } else if (wixWindow <= 1280) { if (('#anchorMenu1').collapsed() !== false) { $w('#anchorMenu1').collapse(); //Expand Page elements... } } else if (wixWindow > 1280) { if (('#anchorMenu1').collapsed()) { $w('#anchorMenu1').expand(); //Expand Page elements... } }
Essentially collapsing the anchorMenu so it doesn't collide with other objects on screen? Anyone have a work around for this?
Hi Cameron:
I think the answer for you is to use the wixWindow.getBoundingRect() function. This will get you the current window's size, the document's size, and the current scroll position.
Per the documentation example:
import wixWindow from 'wix-window'; // ... wixWindow.getBoundingRect() .then( (windowSizeInfo) => { let windowHeight = windowSizeInfo.window.height; // 565 let windowWidth = windowSizeInfo.window.width; // 1269 let documentHeight = windowSizeInfo.document.height; // 780 let documentWidth = windowSizeInfo.document.width; // 1269 let scrollX = windowSizeInfo.scroll.x; // 0 let scrollY = windowSizeInfo.scroll.y; // 120 } );
Cheers
Steve