CODEWITHSUNDEEP
jqueryhtmlcssmenufullpage.js
Angus
Angus

Reputation: 449

Body Click to Hide Element

I have this website i'm making, and i have an hidden menu, that so far works correctly, but i want that when it is visible to have the option to click on the body to make it hide.

So far i have this code, but it doesn't work, since i'm coding on codeine it gives me the error "Attempting to assign readonly property", plus, makes the entire page disappear.

Here is my code for this segment, i am using also in this website parallax.js and fullPage.js

//function hideMenu {
    //var $menu_visivel = $('.menu2').is(":visible");

    //if ($menu_visivel) {

      //$('body').click(function() {

      //});

    //} else {

    //};
//}

Here is the full Pen , and debug page. Much thanks in advance.

Upvotes: 1

Views: 505

Answers (1)

zero point
zero point

Reputation: 1308

Check out a working example in CODEPEN.

You can add a click event to document to hide the element. At the same time, you need to add a stopPropagation event to the element as well:

$(document).click(function(event) {
    //check out for clicking on any element but .menu and .menuButton
    if(!$(event.target).closest('.menu, .menuButton').length && !$(event.target).is('.menu, .menuButton')) {
         // check if the .menu is already shown
         if($('.menu').css("left") == "0px") {
            $(".menu").animate({
                left: "-200px"
            },200);
         }
    }       
});

To show on .menuButton and hide at the loading time:

$(".menu").animate({
   left: "-200px"
},200);

$(".menuButton").click(function() {
   // you can easily enhance it for hiding as well
   $(".menu").animate({
     left: "0"
   },200);
});

This example clearly shows that parallax plugin is messing up with your code.

By the way, you have an extra $(document).ready() inside of the outermost one. You need to take it out. Additionally, the trick at this moment is working only when you right-click once on your page. Only left-click does not work. Per my observation, and this useful post HERE, it might because of the plugin because the vertical scrollbar on your <p> tag does not show up when needed unless you right-click on the page.

Upvotes: 2

Related Questions