Body Click to Hide Element

Question

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.

you Pen does not show anything. Double check please. In meanwhile, you can do something like this: $("element which needs to be hidden").parentsUntil("body").click(function() { //hide your element here }); — zero point, Feb 03 '16 at 02:22
this is the error: "ERR_BLOCKED_BY_CLIENT" I think you have your Pen in private mode so that only you can see it. — zero point, Feb 03 '16 at 02:29
try this, it's updated with the code you already provided: https://jsfiddle.net/angus/qyqu96e3/2/ — Miguel, Feb 03 '16 at 02:32

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

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.

edited May 23 '17 at 12:07

Community

1
1

answered Feb 03 '16 at 03:12

zero point

1,290
3
10
15

can you help me with this? i want to remove the current parallax.js because it is what is messing up my whole code, only i can't find a replacement to it that does the same job D: – Miguel Feb 03 '16 at 03:24
Are you trying to have full page layout? if so, you'd better off with this plugin for sure: http://alvarotrigo.com/fullPage/#secondPage – zero point Feb 03 '16 at 03:45
the one i'm using ahah – Miguel Feb 03 '16 at 03:51
don't forget to accept my answer and up-vote it if it answers your question. – zero point Feb 03 '16 at 03:56
well, it kinda didn't, because i have a specific button to show and hide the ".menu", the click on body was an added feature. unless i'm understanding the answer wrong. also, with fullPage.js i can scroll on a div without it going to the next section, idea on how to solve? – Miguel Feb 03 '16 at 03:59

Body Click to Hide Element

1 Answers1