Responsive Site Code Help

Ask the community
,
1

Can someone help me figure out why every time the function runs, it scrolls me back to the top of the page. I would like it to stay were I am on the page, I don’t care if it scrolls when the resolution changes but while on the current page I’d like it to not scroll back up to the top every time it runs. I think it might be because the wixLocation !== “/home1” isn’t working so it keeps refreshing the page and scrolling me back up but still don’t know why it’s not working…

Here’s my code:

import wixWindow from 'wix-window';

import wixLocation from 'wix-location';

$w.onReady(function() {
setInterval(function() {makeResponsive()}, 400);
} );

function makeResponsive() {
wixWindow.getBoundingRect()
.then((windowSizeInfo)=>{
let windowWidth = windowSizeInfo.window.width;

if (((windowWidth <= 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home2")) {
//show & hide or change style properties for 720p or below
wixLocation.to("/newsite/home2");
}

else if (((windowWidth > 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home1")) {
//show & hide or change style properties for 1080p
wixLocation.to("/newsite/home1");
}
}
)}
2

First you should explain what the purpose of these lines in your code (I don’t see where you use them):

let scrollX = windowSizeInfo.scroll.x;
let scrollY = windowSizeInfo.scroll.y;
3

There isn’t really a purpose for those other than I added them when I was trying to figure out way around the issue using scroll.to in reality it didn’t really help anything kinda just made a jittery scroll up to the top I was thinking that maybe if I added code to pull you back down to the right spot that it would just stay there but in all reality it didn’t help just hadn’t taken those bits of code out yet.

4

I removed them as their not really relevant.

5

@alecraymccutcheon If I understand your code, you’re trying to move to another page based on the window size (if need).
So first of all, make sure you don’t have page transition animation.
Second, you can do the following:

  1. Re-write:
let scrollY = windowSizeInfo.scroll.y;
  1. in the beginning of your code:
$w.onReady(function() {
let p = wixLocation.query.p;
if (p){wixWindow.scroll.to(0,Number(p), {scrollAnimation: false});};
//etc...
  1. in the wixLocation.to():

wixLocation.to("/newsite/home2?p=" +  scrollY);
//....
wixLocation.to("/newsite/home1?p=" +  scrollY);

(FIXED)

6

Okay sweet definitely on the right track now :slight_smile: but its not switching anymore i probably didn’t implement it correctly or something

Here’s the new code:

import wixWindow from 'wix-window';
 
import wixLocation from 'wix-location';

$w.onReady(function() {
let p = wixLocation.query.p;
if (p){wixWindow.scroll.to(0,p, {scrollAnimation: false})}

setInterval(function() {makeResponsive()}, 400);
} );

function makeResponsive() {
wixWindow.getBoundingRect()
.then((windowSizeInfo)=>{
let windowWidth = windowSizeInfo.window.width;
let scrollY = windowSizeInfo.scroll.y;

if (((windowWidth <= 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home2")) {
//show & hide or change style properties for 720p or below
wixLocation.to("/newsite/home2#p=" + scrollY);

}
else if (((windowWidth > 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home1")) {
//show & hide or change style properties for 1080p
wixLocation.to("/newsite/home1#p=" + scrollY);

}
else {}
}
)}
7

Change it to be:

if (p){wixWindow.scroll.to(0, Number(p), {scrollAnimation: false});}

And instead of:
“/newsite/home1#p=”
use:

"/newsite/home1?p="
8

Okay now it’s still not switching and it’s doing the scroll thing again.

Code:

import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function() {
let p = wixLocation.query.p;
if (p){wixWindow.scroll.to(0, Number(p), {scrollAnimation: false})}
setInterval(function() {makeResponsive()}, 400);
} );
function makeResponsive() {
wixWindow.getBoundingRect()
.then((windowSizeInfo)=>{
let windowWidth = windowSizeInfo.window.width;
let scrollY = windowSizeInfo.scroll.y;
if (((windowWidth <= 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home2")) {
//show & hide or change style properties for 720p or below
wixLocation.to("/newsite/home2?p=" + scrollY);

}
else if (((windowWidth > 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home1")) {
//show & hide or change style properties for 1080p
wixLocation.to("/newsite/home1?p=" + scrollY);

}
else {}
}
)}
9

I can see in the URL that after the ?p= is accompanied by my current scroll position that changes in real time.

10

Oddly enough the scrolling thing doesn’t happen when I’m on home2

11

using the same code on both pages

12

Did you remember to use ? instead of # for the other wixLocation.to() (the one that redirects to home2)?

13

@jonatandor35 yes i copied the code to that page

14

@alecraymccutcheon I don’t know. But now that I’m looking at your code I see another problem. This line (and the similar line for the other page) is wrong:
wixLocation !== “/home2” —This is wrong —
You need to use one of the followings (it depends your site path, so test each of them):
wixLocation.path[0] !== “/home2”
OR
wixLocation.path[1] !== “/home2”

15

is the .path different for each page or will they all be the same

16

You created 2 pages. You set the path of one of them to be “home1” and the other to be “home2” right?

17

@jonatandor35 yes

18

@alecraymccutcheon So you know the answer to your question.

19

@jonatandor35 ???

wixLocation.path[1] !== “/home2”

wixLocation.path[0] !== “/home1”

Huh? lol

20

so confused now lol, even if i remove the wixlocation !== check. the site still won’t switch when i check the browser size now.