Thursday, 19 September 2013

jQuery media query that works on both resize AND load?

jQuery media query that works on both resize AND load?

I have a responsive site, and I am trying to run certain jQuery functions
only when the screen is at or below 480px wide. I can only get it to
partially work. If you load the page with your browser < 480px wide, it
works. But if you load the page > 480px wide, and then resize it to <480,
it doesn't work. I need it to work in both circumstances, turning off and
on as you resize accordingly. What am I doing wrong? Here is what I have
that works only if you load the page at <=480.
jQuery(document).ready(function($){
if ( $("div#wrapper").css("overflow") === "visible") {
// mobile js goes here
}
});
I have also tried it this way, but once I resize it starts looping
everything I put in the "mobile js goes here" part and crashes the
browser???
$(window).resize(function(){
if ( $("div#wrapper").css("overflow") === "visible") {
// mobile js goes here
}
});

No comments:

Post a Comment