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.

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.

• javascript
• jquery
• css

• 8 It seems simpler to use a media query – p.s.w.g Commented Dec 9, 2013 at 11:46
• well the person that i'm building the site for doesn't want media queries at all. i already said that it is easier, but he just wants a very clean not extra's simple css. PS sorry for my English i'm Dutch and i'm trying. – Dionoh Commented Dec 9, 2013 at 11:50
• So he's comfortable trading simple, easy to understand CSS for overly complex and unnecessary JavaScript to avoid using one relatively new feature? I don't see the benefit there, but maybe that's just me. – p.s.w.g Commented Dec 9, 2013 at 11:53
• this is where you should push back and telling him that CSS media queries are cleaner than using javascript – roo2 Commented Dec 9, 2013 at 11:54
• What's wrong with the answers at stackoverflow.com/a/11047637/1741542 ? – Olaf Dietsche Commented Dec 9, 2013 at 11:55

5 Answers 5

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

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.

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');
       }
    });
}

When you load a website on a screen bigger than your breakpoint, the script wont work, because you need to re-calculate the screen size(refresh the page in this case). You need to get the width of the screen on resize. Use resize() method, and inside it place your test condition, and assign the class to your element. Reference to help you: http://api.jquery.com/resize/

If you want to change the class of a div in JS, you can do something like that:

document.getElementById("#YourId").className = "YourNewClass"

It will just change your class attribute :-)

Like that, you can also check which class is used and do what you want to do with that.

Edit thanks to Olaf Dietsche: this must be a duplicated post, here can be your answer: jquery, add/remove class when window width changes