CODEWITHSUNDEEP
javascriptjquerycss
Dionoh
Dionoh

Reputation: 406

Jquery, Remove class when width screen is 1050px

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.

Upvotes: 7

Views: 44696

Answers (5)

Slevin
Slevin

Reputation: 4222

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.

Upvotes: 4

Olaf Dietsche
Olaf Dietsche

Reputation: 74028

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

Upvotes: 16

roo2
roo2

Reputation: 6071

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

Upvotes: 3

SushiiBalboha
SushiiBalboha

Reputation: 226

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

Upvotes: 0

n1kkou
n1kkou

Reputation: 3142

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/

Upvotes: 0

Related Questions