kevin seda kevin seda - 5 months ago 9
Javascript Question

Adding extra css to an existing class

I want to make the body height 100% when I perform a certain action and overflow:hidden as well, but only when i perform this action.

This is what i've tried:

$(window).load(function() {

$('.menuBtn').click(function(e) {
e.preventDefault();
(this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
$('nav').slideToggle();

$('.headerBarm').toggleClass('fixed-position');
$('nav').toggleClass('fixed-position');
$('.headerBar').toggleClass('fixed-position');
$('body').css("height:100%; overflow:hidden;");
});

});


-

$('body').css("height:100%; overflow:hidden;");


I also couldn't figure out how to make it work like toggle. when i click on it again it has to go back to normal.

What i am doing wrong.

Thanks in advance,

Kevin

Jai Jai
Answer

This isn't correct way to use .css() method, you should use this way:

$('body').css({height:"100%", overflow:"hidden"});

Also it can be more simplified as:

$('.menuBtn').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('is-active');
    $('nav').slideToggle();
    $('.headerBarm, nav, .headerBar').toggleClass('fixed-position');
    $('body').css({height:function(){
                     return $('body').height() !== $(window).height() ? "100%" : "auto";
                  }, 
                  overflow:"hidden"
    });
});