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  gt  440        if the window is greater than 440px wide then turn on jScrollPane           pane1   jScrollPane          scrollbarWidth 15          scrollbarMargin 52

User · Answer

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  gt  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

User · Answer

Put your if condition inside resize function   var windowsize     window  width       window  resize function       windowsize     window  width      if  windowsize  gt  440          if the window is greater than 440px wide then turn on jScrollPane             pane1   jScrollPane            scrollbarWidth 15            scrollbarMargin 52

User · Answer

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 lt  768           if     column-d0f6e77c699556473e4ff2967e9c0251   length gt 0                                    column-d0f6e77c699556473e4ff2967e9c0251   css  display   none                    else          if     column-d0f6e77c699556473e4ff2967e9c0251   length gt 0                                    column-d0f6e77c699556473e4ff2967e9c0251   removeAttr   style                      changething   function screensize           if screensize lt  768               if     column-d0f6e77c699556473e4ff2967e9c0251   length gt 0                                    column-d0f6e77c699556473e4ff2967e9c0251   css  display   none                                    else          if     column-d0f6e77c699556473e4ff2967e9c0251   length gt 0                                    column-d0f6e77c699556473e4ff2967e9c0251   removeAttr   style                                   window   resize function      var screensize     window   width      changething screensize

User · Answer

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  gt  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

[javascript] jQuery: How to detect window width on the fly?

Examples related to javascript

Examples related to jquery

Examples related to responsive-design