Media query on javascript?

Question

I have the following snippet which I want to disable on tablets and mobiles.

if ( !! $('#sidebar').offset()) {    
        var stickyTop = $('#sidebar').offset().top;            
        $(window).scroll(function() {    
            var windowTop = $(window).scrollTop();    
            if (stickyTop < windowTop) {
                $('#sidebar').css({ position: 'fixed', top: "120px" ,  right: "5%" });    
            }
            else {
                $('#sidebar').css('position', 'static');
            }

        });

    }

And I was thinking to wrap in inside a media query or something, like this:

if(@media (min-width:500px)){
if ( !! $('#sidebar').offset()) {

        var stickyTop = $('#sidebar').offset().top;


        $(window).scroll(function() {

            var windowTop = $(window).scrollTop();

            if (stickyTop < windowTop) {
                $('#sidebar').css({ position: 'fixed', top: "120px" ,  right: "5%" });

            }
            else {
                $('#sidebar').css('position', 'static');
            }

        });

    }
}

But I'm sure that this wont work, so how would I stop this code from working on mobiles?

Answer 1

The best solution might be is to style some element differently (even if it's margin:1px) for each media and then detect the computed style. This way, you can use any CSS media rule equally easily and you get full compatibility: CSS:

#widget{display:none}

@media screen{
  #widget{display:block}
}

JS:

if($("#widget").css("display")!="none){
   ...
}

Note that you should not query the media, but rather browser capabilities because the users of wide tablets (some even have keyboards) might still want to use your sidebar: if(document.width>600){...

Answer 2

You could use the matchMedia() function like this:

if ( window.matchMedia('(min-width:500px)') ) {
  // your code
}

Be cautious, however, as this function is not supported by all browsers!

Edit

A polyfill by Paul Irish can be found here.

Answer 3

if( $(window).width() > 499 ) {
   // Code here
}

Answer 4

Idk if this is the best way, but:

<style type="text/css" media="screen">
body:after 
{
    content:url("javascript:(function(){document.getElementsByTagName('p')[0].innerHTML=' ';})()");
}
</style>

That is - using pseudoelements to add you particular javscript after body tag.

Another way is to assign different style to body tag or some special hidden field for different media and then detect this style from jQuery or ordinary javascript.

Checking window width is not the preferred method! The borders between ordinary screen devices and handhelds are gradually dimnishing.

Answer 5

Window width detection is a bit flaky at best: tablets are mobile devices more often than not feature big screens > 500px. I suggest you try userAgent sniffing , or the scripts at detectmobilebrowsers.com/. Another option is to use modernizr to check for touch-enabled devices

Answer 6

You could use matchMedia as @Sirko very well pointed out and in order to have compatibility with older browsers you could use this matchMedia polyfill like so:

if (matchMedia('(min-width:500px)').matches) {
    // do your stuff
}