jQuery: How to detect window width on the fly?

Question

I have a scrolling element on my page (with the jScrollPane jQuery plugin). What I want to accomplish is a way to turn off the scrolling window by detecting the width of the browser window. I am doing a responsive layout and I want this scrolling feature to be turned off when the browser is below a certain width. I am able to make it work when I refresh the page, but when I resize the browser window the width value does not update on the fly.

Right now if I start out with a window that is 1000px wide then resize to 350px the scroll feature remains. I want the scroll feature to shut off as soon as the browser width hits 440px.

Here's the code I have so far..

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

$(window).resize(function() {
  var windowsize = $(window).width();
});

if (windowsize > 440) {
  //if the window is greater than 440px wide then turn on jScrollPane..
    $('#pane1').jScrollPane({
       scrollbarWidth:15, 
       scrollbarMargin:52
    });
}

move your code inside the callback of the `resize`, just advice of caution, you want to throttle the execution for `resize` to avoid over calling it — Kris Ivanov, Mar 15 '12 at 13:06

score 161 · Accepted Answer · answered Mar 15 '12 at 13:06

161

Changing a variable doesn't magically execute code within the if-block. Place the common code in a function, then bind the event, and call the function:

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $pane = $('#pane1');

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $pane.jScrollPane({
               scrollbarWidth:15, 
               scrollbarMargin:52
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

answered Mar 15 '12 at 13:06

Rob W

341,306
83
791
678

Thanks! This is almost working for me. But here's a weird issue.. when I make the browser window less than 440px, refresh the page, the scrolling feature is not there (good!). When I resize the window to greater than 440 the scrolling feature is there (also good!). But when I resize the window back down to less than 440 the scrolling feature does not go away (bad). – Dustin Mar 15 '12 at 13:23
1

@DustinMcGrew That's defined by your logic: When the window's width is smaller than 440, nothing happens (not even a reset). You should be able to fix this. If not, share more details about the application of this code. – Rob W Mar 15 '12 at 13:26
3

Ahhh you're right!! Just needed to add an else statement and call the jScrollPaneRemove() function. Working perfectly now :) – Dustin Mar 15 '12 at 13:31
Does storing the references outside the function optimize efficiency because js is not having to create/find the new reference every time the function is called? – LazerSharks Nov 30 '13 at 07:58
1

@Gnuey The `resize` event is called *very* often during a resize. The construction of a jQuery object is quite expensive, hence it is indeed more optimal to store the references outside the function. Note that this only works for objects/elements that do not change. The `window` object never changes any more, and the element identified by `#panel` is expected to be unique (IDs are unique) so it's safe to assume that the jQuery object that wraps this element will also remain valid. – Rob W Nov 30 '13 at 09:01
Well in vanilla JS it does "magically execute code within the if-block" tho, it's confusing why jQuery only execute the code once and if the first is checked it never checks the rest – maiakd Dec 08 '22 at 14:22

score 20 · Answer 2 · answered Mar 15 '12 at 13:05

20

Put your if condition inside resize function:

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

$(window).resize(function() {
  windowsize = $(window).width();
  if (windowsize > 440) {
    //if the window is greater than 440px wide then turn on jScrollPane..
      $('#pane1').jScrollPane({
         scrollbarWidth:15, 
         scrollbarMargin:52
      });
  }
});

answered Mar 15 '12 at 13:05

antyrat

27,479
9
75
76

such a simple, yet not obvious fix for this issue, thanks. – Lizardx Feb 16 '17 at 23:21

score 1 · Answer 3 · answered Apr 13 '17 at 14:28

Below is what i did to hide some Id element when screen size is below 768px, and show up when is above 768px. It works great.

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

if(screensize<=768){
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
}
else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

}
changething = function(screensize){
        if(screensize<=768){
            if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
        }
        else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

        }
}
$( window ).resize(function() {
 var screensize= $( window ).width();
  changething(screensize);
});

score 0 · Answer 4 · answered Feb 14 '16 at 14:37

I dont know if this useful for you when you resize your page:

$(window).resize(function() {
       if(screen.width == window.innerWidth){
           alert("you are on normal page with 100% zoom");
       } else if(screen.width > window.innerWidth){
           alert("you have zoomed in the page i.e more than 100%");
       } else {
           alert("you have zoomed out i.e less than 100%");
       }
    });

jQuery: How to detect window width on the fly?

4 Answers4

Linked