Multiple scripts for responsive layout with (window).resize

Question

So I am currently working on a one page site with a responsive layout. On smaller screens I am using an animated scroll plugin to navigate between the content divs, but on larger screens I am using a plugin to simply toggle the visibility of these divs.

The issue that I am having is that I need the script to change if the window is resized after the page has been loaded. I thought that $(window).resize would do the trick but it doesn't seem to be working and continues to use the script that was initially loaded rather than executing the proper script. .anchorAnimate and .anchorTog are the plugins that I am using but I do not think that they are the problem here. I can post if necessary.

Code:

$(document).ready(function() {

    var w = $(window).width();

    if(w <= 767) {
        $('a.anchorLink').anchorAnimate();
    }
    if(w >= 768) {
        $('a.anchorLink').anchorTog();
    }

    $(window).resize(function(){
        if(w <= 767) {
            $('a.anchorLink').anchorAnimate();
        }
        if(w >= 768) {
            $('a.anchorLink').anchorTog();
        }
    });
});

you might need to un-initialize the plugins on window resize before re-initializing, or similar. — user400654
– user400654, Commented Sep 25, 2013 at 16:17
I would put window.resize into it's own scope outside document on ready, as that initialises jQuery anyway, then define w & h from there, above & before any other code — MackieeE
– MackieeE, Commented Sep 25, 2013 at 16:28

Tim Lim · Accepted Answer · 2013-09-25 17:31:32Z

1

in your code, the variable "w" is out of scope for the resize function. "w" will only ever be the window width when the document has reached it's ready state. To fix this, you can redeclare the variable in your resize function so that every time we get a resize, we check the width:

$(window).resize(function(){
    var w = $(window).width();
    if(w <= 767) {
        $('a.anchorLink').anchorAnimate();
    }
    if(w >= 768) {
        $('a.anchorLink').anchorTog();
    }
});

answered Sep 25, 2013 at 17:31

Tim Lim

1181 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Over a year ago

Worked like a charm. I can't believe it was this easy after wracking my brain on it for so long.

Halcyon · Accepted Answer · 2013-09-25 16:20:39Z

0

Responsive design usually implies CSS, not JavaScript.

In CSS3 you can define the dimensions of the screen-size you want to support using @media.

If you use CSS you can have hardware accelerated animations, which are much smoother than anything you could do in JavaScript.

Google for "responsive design css3" and you'll get many examples.

answered Sep 25, 2013 at 16:20

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

2 Comments

Robert Over a year ago

The site itself is responsive using css media queries. This script needs to change along with the css media queries and do different things based on screen width.

Halcyon Over a year ago

I don't really understand your code. It seems like you're trying to do more animations.

Collectives™ on Stack Overflow

Multiple scripts for responsive layout with (window).resize

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related