CODEWITHSUNDEEP
jquerycssmedia-queries
CaribouCode
CaribouCode

Reputation: 14398

jQuery and CSS media queries not in sync

I've been trying to understanding the way window width is determined and I was wondering if it's different for CSS and jQuery.

If for example I have the CSS media query:

@media (max-width: 979px) {
  /*my css here*/
}

and also some jQuery:

if ($(window).width() < 979) {
  //my jQuery here
}

I would expect the following: - When the browser is resized & refreshed at 980px, both of the above will be ignored - When the browser is resized & refreshed at 978px, both of the above will activate.

However what I'm finding is that - The jQuery and CSS don't kick in until about 964px and below. - Sometimes (if I have window.resize enabled) the jQuery and CSS kick in at seperate widths (a few pixels apart).

Can anyone shed any light on what's going on here?

By the way I'm basing the window width on Firebug's layout viewer.

Upvotes: 8

Views: 3739

Answers (4)

TorranceScott
TorranceScott

Reputation: 1527

A bit off topic, but I assume you're trying to mimic when the javascript fires because you want to do something at the same time as the css breakpoint switches. If you want to have javascript do something when the media query fires, I've found it is easiest to poll for a change created by the css, rather than trying to mimic the way media queries fire (which is inconsistent in browsers due to reporting of scrollbar widths). For instance if at your breakpoint, element-x goes from position: relative to position: fixed, you can ensure your javascript is in line with your css by testing

if(elementX.css('position')== 'fixed'){
//code
}

rather than polling the document width.

Upvotes: 1

guari
guari

Reputation: 3820

The problem is related to the scrollbar width: window.innerWidth will return the right value that is read by CSS media queries. Note that $(window).innerWidth() will return the wrong value.

For a cross-browser solution can be used a function like this:

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

var value = viewport().width;

Upvotes: 8

Lost Left Stack
Lost Left Stack

Reputation: 1952

Media queries use the viewport width. I find that getting the html width is much more accurate when trying to match with CSS media queries. Using resize:

$(window).resize(function() {
  if ($('html').width() <= 979) {
    // Do something
  }
});

Upvotes: 0

keeg
keeg

Reputation: 3978

Think you might want to use $(document).width() instead

$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

http://api.jquery.com/width/

Upvotes: 0

Related Questions