Responsive Site Code Help

okay so i fixed the switching by using /home1?p= instead of /newsite/home1?p=

still trying to figure out the wixLocation.path[1] !== thing

actually the switching only works one way I can switch to home2 but not back to home1 and as you know home 2 don’t have the scroll issue either, almost like its not running on that page or something

my url appears as …wixsite.com/newsite/home1?p=0 or …wixsite.com/newsite/home2?p=0 the dots are in place of the rest of the link. does the 0 or 1 in the wixLocation.path[ ] refer to order they appear in the url, like if their was a page that was /newsite/home/page then would it be wixLocation.path[1] ?

Idk here’s my last code iteration for the day… scrolling issue is still happening on home1 then when i make the browser smaller it switches to home 2 and scrolling works but it don’t switch back then the browser gets bigger. same code on both pages.

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;
let path = wixLocation.path;

if (((windowWidth <= 1280) && (wixWindow.formFactor === "Desktop")) && (path[0] !== "home2")) {

//show & hide or change style properties for 720p or below
wixLocation.to("/home2?p=" + scrollY);

}
else if (((windowWidth > 1280) && (wixWindow.formFactor === "Desktop")) && (path[0] !== "home1")) {

//show & hide or change style properties for 1080p
wixLocation.to("/home1?p=" + scrollY);

}
else {}
}
)}


I have tried path[0] !== “home1” and path[0] !== “/home1” and also path[1] !== “home1” and path[1] !== “/home1”

@alecraymccutcheon You need wixLocation. path[0]

I’ve also tried that to but will switch it back, I let path = wixLocation.path; so i don’t see why that wound’t work.

@jonatandor35 After switching the path out for the wixlocation.path[0] still getting the same results as before.

David - SKmedia said “You shouldn’t redirect in an interval, that will just be obnoxious for your users. And the reason it’s scrolling up is that if you call a redirect from the page you’re redirecting to, it will just scroll up to the top of the page instead.” that was a comment on the code that I had originally posted not after we had made changes so don’t know if this still applies or if I should try to get rid of the interval don’t know how it’s going to run when it needs if it’s not on an interval. But thought I would add his 2 cents in.

I Finally Got It Working XD Even with an interval


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

$w.onReady(function() {

let p = wixLocation.query.p;
if (p){wixWindow.scrollTo(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.path.length != "1")){
//show & hide or change style properties for 720p or below
wixLocation.to("/home2?p=" + scrollY);

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

}
else {}
}
)}

One of the problems was that wix doesn’t like != in place of !== but != is the only one that works and doesn’t create any errors lol so by ignoring the “expected !== but got !=” was about to get it working lol.

The problem was that you tried to compare a number to a string .
Instead of:

wixLocation.path.length !== "1"//WRONG

You should have written:

 wixLocation.path.length !== 1

and the same for the zero.
Now, when you use “!=”, it doesn’t care if it’s a string or a number, but it’s a better practice to use strict mode (!==).

Okay well that makes sense I changed it and it’s still working lol, Just don’t know the in and outs of javascript so little things I don’t catch

I’d still recommend that if you keep the interval that you disable it on tablets and mobile devices using wixWindow.formFactor so as not to hurt performance.

Hi i need help badly on how to make a site responsive. :persevere:As i am not sure of the coding above because i am new to Wix and i really hope to be able to make a site responsive. Please get back to me soon, Thank you so much​:smile:

Is there any correct layout of coding so that i can copy and edit on my site please?

@David - SKmedia @J. D. @Alec McCutcheon Please get back to me soon, thank you​:grin::tired_face::disappointed_relieved:

This is as far as i got, But after adding a domain to the site it started causing issues, I would just recommend keep elements besides strips within the middle borders of the site and that should fix most of the issues, if you have any boxs or elements outside of the borders they will cause issues, replace boxs outside the border with strips


import wixWindow from 'wix-window';

import wixLocation from 'wix-location';

$w.onReady(function() {
        let p = wixLocation.query.p;
if (p){wixWindow.scrollTo(0, Number(p), {scrollAnimation: false})}
    setInterval(function() {makeResponsive()}, 1500);
} );

function makeResponsive() {
    wixWindow.getBoundingRect()
    .then((windowSizeInfo)=>{

        let windowWidth = windowSizeInfo.window.width;
        let scrollY = windowSizeInfo.scroll.y; 

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

        }

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

    )}


I Would recommend optimizing your site like I was suggesting before trying to find a solution using code as it’s a real pain in the butt.

@alecraymccutcheon Hi Thank you so much but may i know what is this for? Do i replace it with all my website pages or just the my site address? wixLocation . to ( “/home1?p=” + scrollY )