Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

As the title states I want to create a button which enables/disables overflow:hidden in the page. and the default stance should be that the overflow:hidden is active and the page cant be scrolled.

I looked around for something similiar, didnt find anything.

EDIT:

Ok heres what I did with your help, having trouble linking the function to a button. I might be miss understading something cause my skills in html and Jquery are limited.

After some research i got it to work by making the selector select an id and i gave the button and id.

    $(function (){
   $("#buttoni").on('click', function(e){
      e.preventDefault();
      $('body').toggleClass('no-scroll');
   });
});

and the button:

<button id="buttoni"> toggle scroll</button>

And that way i got it to work, im not sure what i missunderstood in the original to not get it to work but THANKS

share|improve this question
welcome to stackoverflow... please post your related code with the questions...please go through the link stackoverflow.com/faq.. your question is more likely to get closed.. if you don't provide some codes or things you have done – bipen Apr 26 at 9:40
Upvoted because his question was decent enough for me to understand and form a solution in my head with one read, he edited well and is obviously very new to web programming in general, not just stackoverflow. This doesn't deserve to be down-voted to -3. Ask us more questions! And code is very welcome, familiarise yourself with jsfiddle and codepad. – Ambrosia Apr 26 at 12:10
Do remember to accept an answer if you are happy with it. – Ambrosia Apr 26 at 12:15
Thanks for the heads up ambrosia, I accepted the answer i was given and thanks for the positive feedback. Yes i am very new to web programming in general and especially the etiquette in stackoverflow. i made this post in a hurry because im finalizing a schoolwork and i needed help quick. appreciate the positive feedback and attidude! and thanks for a quick answer Gaby! – Fruktoosi Apr 26 at 13:44

1 Answer

up vote 0 down vote accepted

how about 

.no-scroll{
   overflow:hidden;
}

and apply it to body

<body class="no-scroll">

and with jquery toggle it

$(function(){
   $('buttonid').on('click', function(e){
      e.preventDefault();
      $('body').toggleClass('no-scroll');
   });
});
share|improve this answer
Where could I post the whole index code i have, its quite long. Are there site where it can be saved and linked here or so on? – Fruktoosi Apr 26 at 10:25
@Fruktoosi, you can use jsfiddle.net to create a live version of your code – Gaby aka G. Petrioli Apr 27 at 9:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.