Use Javascript to change body CSS upon clicking a label

Question

I am working on a website for a friend. I use an off-screen CSS menu. The button that invokes the menu is not an HTML button, its listed as a Input and Label.

When using the menu you can still scroll on the main body of the pag. I would like to disable that. The only way I can see how that's possible is to change the body CSS upon clicking the menu label, but i've been at it for a few hours and had no luck. I was planning on adding the following to the body class upon opening the menu:

overflow: hidden;
position: static;

Here's the javascript I have landed on most recently, to no avail. I've tried a boatload, but the HTML "onclick" and then running a script that toggles the body class was my best theory.

HTML

<input data-function='swipe' id='swipe' type='checkbox' value="button"/>
<label data-function='swipe' for='swipe' onclick='noScroll()' value="button">&#xf0c9;</label>


<div class='sidebar'>
    <nav class='menu'>
        <li><a href='#'>Home</a></li>
        <li class='active'><a href='#'>About</a></li>
        <li><a href='#'>Imprint</a></li>
        <li><a href='#'>Imprint</a></li>
    </nav>

</div>

Javascript

noScroll({
    $('#swipe').toggleClass('body bodynoscroll');
    })

CSS

.body {
    font: 12px/1 'Open Sans', sans-serif;
    color: $c;
    background: $c;
    overflow-x: hidden;
}

.bodynoscroll {
    font: 12px/1 'Open Sans', sans-serif;
    color: $c;
    background: $c;
    overflow-x: hidden;
    overflow: hidden!important;
    position: static!important;
}

Website

https://www.brotherhoodgaming.net

Any help is appreciated! I am terrible with javascript, so I'm learning.

noScroll is a function, why do you have noScroll({ }) like this — brk, Apr 17 '16 at 05:56
Sorry, I am relatively new to javascript. I've usually just worked on HTML/CSS things on a small scale. I was trying to perform an "onclick" and call that javascript function, but I didnt know what the name of the function was. So I tried to make my own function and that was my end result, sadly... — David Washburn, Apr 17 '16 at 05:58
make change in our noScroll function . It will be like this function noScroll(){ $('#swipe').toggleClass('body bodynoscroll'); } — brk, Apr 17 '16 at 06:00

score 0 · Answer 1 · edited Apr 17 '16 at 09:19

0

This code should work:

$(document).ready(function(){
    $("#{your label id}").toggle(
        function(){$("body").css({"overflow": "hidden"});},
        function(){$("body").css({"overflow": "auto"});}

    );
});

edited Apr 17 '16 at 09:19

Ikhlak S.

8,578
10
57
77

answered Apr 17 '16 at 05:56

Renjith Kathirolil

81
11

Hi! This is awesome, I appreciate the help. I have one final dumb question, do I need to use an OnClick in the HTML to do this? If so (secondary foolish question) what is the name of the function I use? For example: onclick='function()' ? – David Washburn Apr 17 '16 at 06:01
1

Renjith Kathirolil, there is an error in the code u wrote i think. I would change to $(document).ready(function(){ $("#{your label id}").toggle( function(){$("body").css({"overflow": "hidden"});}, function(){$("body").css({"overflow": "auto"});} ); }); – satwik Apr 17 '16 at 06:17
No, you don't need that. onclick='function()' is the DHTML way to do it. – Jack Pilowsky Apr 17 '16 at 06:17
I feel like I'm almost there but I can't quite get it to work. I have removed the OnClick from the HTML, and I have given the Label an ID of "menubuttonlabel". I have pushed over my changes to the live website now as well, so they can be viewed. – David Washburn Apr 17 '16 at 06:24
@user3284463 approved – Renjith Kathirolil Apr 17 '16 at 09:24
@DavidWashburn put this id "menubuttonlabel" in your js file, i can see you are not changed the element id – Renjith Kathirolil Apr 17 '16 at 09:34

Rhega · Answer 2 · 2016-04-17T07:17:40.413

No need to change your body css, just enable disable your mouse wheel, if that exactly what you want? Try this... copy paste from my old project.

<script>
function stopWheel(e){
    if(!e){ e = window.event; }
    if(e.preventDefault) { e.preventDefault(); }
    e.returnValue = false;
}

function mousewhellStat(stat){
    if (stat) {
        document.onmousewheel = null;
        if(document.addEventListener){
            document.removeEventListener('DOMMouseScroll', stopWheel, false);
        }   
    } else {
        document.onmousewheel = function(){ stopWheel(); }
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll', stopWheel, false);
        }   
    }
}

$("#menubuttonlabel").click(function(){
     mousewhellStat(false);
})
$(".sidebar .menu li").click(function(){
    mousewhellStat(true);
    $(".sidebar").slideUp(300);
})
</script>

Just copy paste to your page. and see if working well :)

Ah! So this partially works! I just need a way for it to be reactivated once I close the hamburger menu. Currently when I click it disables the mouse scroll but the scroll doesn't come back when I close the menu (by clicking the same button). It's a good start though! — David Washburn, Apr 17 '16 at 06:33
You just need to give it false value to disable your mouse scroll and back it to true to enable again your mouse scroll. playing with body css sometime give you head ache if your web is responsive. — Rhega, Apr 17 '16 at 06:39

score 0 · Accepted Answer · answered Apr 17 '16 at 06:25

0

Give your label an ID to bind a event to it. Something like this:

<label id="menubuttonlabel" data-function='swipe' for='swipe' onclick='noScroll()' value="button">&#xf0c9;</label>

And then your JS code would look like:

$(document).on('click', '#menubuttonlabel', function(){
    if ($('body').css('overflow') == 'auto'){
          $('body').css("overflow", "hidden");
          }else{
              $('body').css("overflow", "auto"); 
          }   
});

answered Apr 17 '16 at 06:25

Ikhlak S.

8,578
10
57
77

Alright I've made the adjustments! I think the last issue I'm having is onclick='noScroll()' is not showing that it's pulling a function of any kind. I have my scripts loaded in the header. Is there any reason it wouldn't be detecting my function? – David Washburn Apr 17 '16 at 06:31
@DavidWashburn What does your `noScroll()` function look like? – Ikhlak S. Apr 17 '16 at 06:52
currently I have it listed as this: `function noScroll(){ $('#menubuttonlabel).toggleClass('body bodynoscroll'); }` – David Washburn Apr 17 '16 at 06:55
@DavidWashburn you seem to be missing a quote `('#menubuttonlabel')`. Also take a look at this class: http://stackoverflow.com/a/19015970/3284463 – Ikhlak S. Apr 17 '16 at 07:01
@DavidWashburn try putting that function just before the body closing tag and let me know if it works – Ikhlak S. Apr 17 '16 at 07:10
NAILED it! Thank you. It locks the scroll when the menu is open and restores the scroll functionality when the menu is closed. Fantastic! Thanks for all the help everyone, I've learned quite a bit about Javascript just from this post and all the helpful response. – David Washburn Apr 17 '16 at 15:16

Use Javascript to change body CSS upon clicking a label

3 Answers3