CODEWITHSUNDEEP
javascriptjquerycsstoggleoverflow
user1469270
user1469270

Reputation:

Toggle CSS with jQuery

$('.work').click(function(e){
    $('.information-overlay').fadeOut();
    $('.work-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

$('.information').click(function(e){
    $('.work-overlay').fadeOut();
    $('.information-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

I've got the following code that toggles an overlay, when .information is clicked and also toggles between overflow:hidden with toggleClass.

However, if I click .work and THEN .information, it breaks the toggleClass.

Upvotes: 2

Views: 6717

Answers (6)

Seano666
Seano666

Reputation: 2238

$("body").css("overflow", "hidden");

JQUERY CSS

Or to toggle

CSS:

.hidden {
   overflow: hidden;
}

JQUERY:

$("body").toggleClass("hidden");

Upvotes: 5

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

use this

$("body").css("overflow", "hidden");

to add toggle functionality use http://api.jquery.com/toggleClass/

css

.b_overflow { overflow:hidden; }'

js

$('body').toggleClass('b_overflow');

updated after OP's comment

$('.work').click(function(e){
    $('.information-overlay').fadeOut();
    $('.work-overlay').fadeToggle();
    if($(this).css('display') =='block'){
        $(this).css('overflow','scroll');
    }else{
        $(this).css('overflow','hidden');
    }
    e.preventDefault();
});

Upvotes: 1

saad arshad
saad arshad

Reputation: 259

this will world

#("body,html").css("overflow", "hidden");

the above solutions are perfect but toggling away body overflow bar will create a little lag on the website since page width will have difference.

Upvotes: 0

Reeno
Reeno

Reputation: 5705

Use $('body').toggleClass('overflow-hidden') to toggle a CSS class with the corresponding CSS styles

Upvotes: -1

CodePuppet
CodePuppet

Reputation: 191

jQuery code:

$("body").toggleClass("hidden");

And then create a class in your css:

.hidden {
  overflow: hidden;
}

Upvotes: 0

Dawid
Dawid

Reputation: 774

You can use toggleClass for this.

Upvotes: 3

Related Questions