73

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
    });
}
1
  • 2
    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 Mar 15, 2012 at 13:06

4 Answers 4

160

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);
});
6
  • 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, 2012 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, 2012 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, 2012 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? Nov 30, 2013 at 7: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, 2013 at 9:01
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
      });
  }
});
1
  • such a simple, yet not obvious fix for this issue, thanks.
    – Lizardx
    Feb 16, 2017 at 23:21
1

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);
});
0

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%");
       }
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.