jQuery on window resize

Question

I have the following JQuery code     document  ready function          var  containerHeight     window  height        if   containerHeight  lt   818                footer   css               position   static               bottom   auto               left   auto                        if   containerHeight  gt  819                footer   css               position   absolute               bottom   3px               left   0px                          The only problem is that this only works when the browser first loads  I want containerHeight to also be checked when they are resizing the window   Any ideas

User · Accepted Answer

Here s an example using jQuery  javascript and css to handle resize events   css if your best bet if you re just stylizing things on resize  media queries   http   jsfiddle net CoryDanielson LAF4G  css  footer           default styles applied first        media screen and  min-height  820px     height  gt   820 px           footer           position  absolute          bottom  3px          left  0px             more styles             javascript window onresize   function         if  window innerHeight  gt   820                    if  window innerWidth  lt   1280                    jQuery   window  on  resize   function        var win     this     this   window     if  win height    gt   820                    if  win width    gt   1280                     How do I stop my resize code from executing so often   This is the first problem you ll notice when binding to resize  The resize code gets called a LOT when the user is resizing the browser manually  and can feel pretty janky  To limit how often your resize code is called  you can use the debounce or throttle methods from the underscore  amp  lowdash libraries   debounce will only execute your resize code X number of milliseconds after the LAST resize event  This is ideal when you only want to call your resize code once  after the user is done resizing the browser  It s good for updating graphs  charts and layouts that may be expensive to update every single resize event  throttle will only execute your resize code every X number of milliseconds  It  quot throttles quot  how often the code is called  This isn t used as often with resize events  but it s worth being aware of   If you don t have underscore or lowdash  you can implement a similar solution yourself  JavaScript JQuery    window  resize how to fire AFTER the resize is completed

User · Answer

Try this solution  Only fires once the page loads and then during window resize at predefined resizeDelay     document  ready function           var resizeDelay   200     var doResize   true     var resizer   function            if  doResize               your code that needs to be executed goes here          doResize   false                     var resizerInterval   setInterval resizer  resizeDelay       resizer           window  resize function           doResize   true

User · Answer

Move your javascript into a function and then bind that function to window resize     document  ready function          updateContainer          window  resize function             updateContainer                function updateContainer         var  containerHeight     window  height        if   containerHeight  lt   818                footer   css               position   static               bottom   auto               left   auto                        if   containerHeight  gt  819                footer   css               position   absolute               bottom   3px               left   0px

User · Answer

Give your anonymous function a name  then     window  on  resize   doResize     http   api jquery com category events

User · Answer

can use it too            function getWindowSize                                 var fontSize   parseInt    body   css  fontSize    10                   var h      window  height     fontSize  toFixed 4                   var w      window  width     fontSize  toFixed 4                                 var size                            height   h                        width   w                                    return size                        function startResizeObserver                                   ---------------------                 var colFunc                           f10    function    alert 10                           f50    function    alert 50                           f100    function    alert 100                           f500    function    alert 500                           f1000    function    alert 1000                                         ---------------------                   window  resize function                         var sz   getWindowSize                        if sz width  gt  10  colFunc  f10                           if sz width  gt  50  colFunc  f50                           if sz width  gt  100  colFunc  f100                           if sz width  gt  500  colFunc  f500                           if sz width  gt  1000  colFunc  f1000                                                   document  ready function                                  startResizeObserver

User · Answer

You can bind resize using  resize   and run your code when the browser is resized  You need to also add an else condition to your if statement so that your css values toggle the old and the new  rather than just setting the new

User · Answer

jQuery has a resize event handler which you can attach to the window   resize    So  if you put   window  resize function      YOUR CODE HERE      then your code will be run every time the window is resized   So  what you want is to run the code after the first page load and whenever the window is resized  Therefore you should pull the code into its own function and run that function in both instances      This function positions the footer based on window size function positionFooter        var  containerHeight     window  height        if   containerHeight  lt   818                footer   css               position   static               bottom   auto               left   auto                        else               footer   css               position   absolute               bottom   3px               left   0px                          document  ready function          positionFooter     run when page first loads        window  resize function          positionFooter     run on every window resize       See  Cross-browser window resize event - JavaScript   jQuery

User · Answer

function myResizeFunction                function         window  resize myResizeFunction  trigger  resize          This will cause your resize handler to trigger on window resize and on document ready  Of course  you can attach your resize handler outside of the document ready handler if you want  trigger  resize   to run on page load instead   UPDATE  Here s another option if you don t want to make use of any other third-party libraries   This technique adds a specific class to your target element so you have the advantage of controlling the styling through CSS only  and avoiding inline styling    It also ensures that the class is only added or removed when the actual threshold point is triggered and not on each and every resize  It will fire at one threshold point only  when the height changes from  lt   818 to   819 or vice versa and not multiple times within each region  It s not concerned with any change in width   function myResizeFunction       var  window     this         height   Math ceil  window height           previousHeight    window data  previousHeight       if  height     previousHeight        if  height  lt  819        previousHeight  gt   819  amp  amp      footer   removeClass  hgte819        else if   previousHeight    previousHeight  lt  819            footer   addClass  hgte819          window data  previousHeight   height            function         window  on  resize optionalNamespace   myResizeFunction  triggerHandler  resize optionalNamespace          As an example  you might have the following as some of your CSS rules    footer     bottom  auto    left  auto    position  static      footer hgte819     bottom  3px    left  0    position  absolute

User · Answer

Use this   window onresize   function event

[jquery] jQuery on window resize

css

javascript

jQuery

How do I stop my resize code from executing so often!?

Examples related to jquery

Examples related to html

Examples related to css