Jquery, Remove class when width screen is 1050px

Question

This is the JS code i'm using:

$("document").ready(function($){
var nav = $('#menu2');

$(window).scroll(function () {
    if ($(this).scrollTop() > 90) {
        nav.addClass("f-nav");
    } else {
        nav.removeClass("f-nav");
    }
});

But i can't seem to get this into my code.

function checkWidth(init){
/*If browser resized, check width again */
if ($(window).width() < 514) {
    $('html').addClass('mobile');
}
else {
    if (!init) {
        $('html').removeClass('mobile');
    }}}$(document).ready(function() {
checkWidth(true);

$(window).resize(function() {
    checkWidth(false);
});

And what i want is that when .f-nav is added to #menu2, when the screen is <1050 the classshould be removed.

Answer 1

To change html to #menu2, just replace one with the other. jQuery is pretty simple in this respect

if ($(window).width() < 514) {
    $('#menu2').addClass('f-nav');
} else {
    $('#menu2').removeClass('f-nav');
}

JSFiddle

Answer 2

this is best achieved with a media query

@media screen and (max-width:1050px){
  .mobile{
     /* will only apply on devices narrower than 1050px */
  }
}

EDIT: also possible to use media queries with javascript in modern browsers

if (matchMedia) {  // check if browser supports media queries from JavaScript
    var mq = window.matchMedia("(max-width: 1050px)");
    WidthChange(mq);
    // every time width changes, check the media query
    mq.addListener(function WidthChange(mq){
       if(mq.matches){
           //we are in a mobile size browser
           $('#menu2').addClass('mobile');
           $('#menu2').removeClass('f-nav');
       } else{
           // desktop browser
           $('#menu2').addClass('f-nav');
           $('#menu2').removeClass('mobile');
       }
    });
}

Answer 3

There are a few ways to do that:

Javascript only

See it in action: Fiddle

$(window).resize(function() {
    if ($(window).width() < 1050) {
        $selector.removeClass('my-class');
    } else {
        $selector.addClass('my-class');
    }
}).resize(); // trigger resize event initially

And don't forget: You don't have to place $(window).resize inside $(document).ready.

Mixed Javascript & CSS

See it in action: Fiddle

This technique is explained here: http://www.senaeh.de/media-query-variablen-javascript-auslesen/

Basic principle: set a variable with a CSS pseudo element and get it with javascript.

This workaround is good if you have to use Javascript even if media queries are used, because you don't have to declare the breakpoint twice.

CSS

@media screen and (max-width: 1050px) {
    body:after {
        content: 'tablet';
        display: none;
    }
}

Javascript

var mode = window.getComputedStyle(document.body,':after').getPropertyValue('content');

Be aware: IE < 9 doesn't support getComputedStyle. You have to use a polyfill like this one.