jQuery width change detection

Question

Now Solved, thanks

I have see a lot of near answers to my problem with resize(), here is my code:

'larger()' is a layout function that I want to call when screen width regardless of device orientation is >= 501, 'smaller()' is a function that i want to call when the screen width is < 501.

My problem I have is that I don't want these functions to be called when the window.height changes. Note that in my page I am using an accordion in mobile view and if I expand an accordion panel, it adds height to the page, even though the browser window hasn't been re-sized. jQuery sees this as a window.resize.

$(window).resize(function(e) {
    var winWidth = $(window).width();
    if (winWidth >= 501){
       larger();
    }
    if (winWidth < 501){
       smaller();
    }
});

any answers appreciated, and let me know if I need to clarify anything.

I am using jquery-1.11.0.min.js with jquery-ui-1.10.3.custom.min.js

Thanks

gimg1 · Accepted Answer · 2014-02-18 16:19:25Z

3

How about storing a reference to the previous width and if the width has changed on resize then call your functions - otherwise skip it. Like So:

// If you don't want it to change the first time
// then set this value on document load to get initial window width
var prevWinWidth = 0;

$(window).resize(function(e) {
    var winWidth = $(window).width();

    if(winWidth != prevWinWidth) {
        if (winWidth >= 501){
            larger();
        }
        if (winWidth < 501){
            smaller();
        }
        prevWinWidth = winWidth;
    }
});

answered Feb 18, 2014 at 16:19

gimg1

1,18711 silver badges26 bronze badges

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

2 Comments

Chris D'Arcy Bean Over a year ago

hi the problem is that I don't want the nested functions to get called on height change, when page height changes. I guess what I need is a way to detect the physical browser re-size, not the window

gimg1 Over a year ago

But they won't get called if there is a height change without a width change. If you never want the functions to be called if the height has changed then use a variable to track also the height change and only call your functions when the width has changed but the height hasn't

pmandell · Accepted Answer · 2014-02-18 16:23:39Z

0

Create a global variable that keeps track of the last known width of the window. Only if the width is changing, evaluate the width to call the appropriate function.

var lastWidth = 0;
$(window).resize(function (e) {
    var winWidth = $(window).width();
    if (lastWidth !== winWidth) {
        winWidth >= 501 ? larger() : smaller();
        lastWidth = winWidth;
    }
});

answered Feb 18, 2014 at 16:23

pmandell

4,31820 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery width change detection

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related