jQuery check an element css property if the window resize

Question

How can I add a window resize function to this?

jQuery(document).ready(function($){         
    var $MyDiv1 = $('#mydiv1');
        if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
           console.log ( '#mydiv1 is fixed' );      
        } else {    
           console.log ( '#mydiv1 is not fixed' );      
        }       
 });

This work if I refresh the page after the resizing. I want to check the MyDiv1 position is fixed or not when the window is resizing. Thanks for any help.

this may be a duplicate question. see: http://stackoverflow.com/questions/2758651/how-to-change-height-div-on-window-resize — Vincent Panugaling, Jun 07 '14 at 08:14
I would not recommend to do it every time browser window changes size. It's gonna be executed to many times. Do you really have to check this? Why are you checking elements's position property? Maybe we would be able to give you some better suited solution. — Łukasz Jagodziński, Jun 07 '14 at 08:17
Jagi, this is for my wordpress theme sticky menu. If the wp admin bar is present, the script is add the wpadminbar height to the top spacing. The wp admin bar position is fixed by defult, but the position is absolute on mobile devices. In this case I need 0 topspacing for the sticky menu, otherwise I have a gap in the top. — j_monroe, Jun 07 '14 at 12:47

score 3 · Accepted Answer · edited May 23 '17 at 11:59

$(document).ready(myfunction);
$(window).on('resize',myfunction);

function myfunction() {
    var $MyDiv1 = $('#mydiv1');
    if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
      console.log ( '#mydiv1 is fixed' );      
    } else {    
      console.log ( '#mydiv1 is not fixed' );      
    }   
}

Another technique is to .trigger() one event inside the other:

$(window).on('resize',function() {
    var $MyDiv1 = $('#mydiv1');
    if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
      console.log ( '#mydiv1 is fixed' );      
    } else {    
      console.log ( '#mydiv1 is not fixed' );      
    }  
});
$(document).ready(function() {
    $(window).trigger('resize');
});

If you put your code at the bottom of the page to avoid needing $(document).ready, it gets even simpler:

$(window).on('resize',function() {
    var $MyDiv1 = $('#mydiv1');
    if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
      console.log ( '#mydiv1 is fixed' );      
    } else {    
      console.log ( '#mydiv1 is not fixed' );      
    }  
}).trigger('resize');

Reference : jQuery combine .ready and .resize

score 0 · Answer 2 · answered Jun 07 '14 at 08:13

You can use:

$(window).on('resize', function(){
 //code here
});

using javascript:

window.onresize = function() {
 //code here
}

COMPLETE CODE:

function divreset(){ var $MyDiv1 = $('#mydiv1');
    if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
       console.log ( '#mydiv1 is fixed' );      
    } else {    
       console.log ( '#mydiv1 is not fixed' );      
    }
}
jQuery(document).ready(function($){         
  divreset();
});
window.onresize = function() {
  divreset();
}

jQuery check an element css property if the window resize

2 Answers2