How to make function available once an action has occurred - jquery

Question

I'm trying to make a push style menu which shifts the content over to one side in order to reveal a menu list. So far the menu works fine when opening and closing, although i would also like to add functionality which allows the user to close the menu by clicking anywhere in the content section.

I'm not really sure of how I can tie the 'close' function to the body container once the menu has been opened.

I've attempted using .bind() and .trigger() but I'm new to javascript/jquery and don't really understand how to make it work in this situation.

Here is the current function which opens/closes the menu...

$('.menu-button').click(function(){

    if(parseInt($('.site-menu').css('left')) == -144){
        $('.site-menu').addClass('site-menu-pushr');
        $('.site-header, .container-site-content').addClass('site-view-pushr');
    }
    else {
        linkClickUnpush();
    }

});

Since I use classes to carry out the animation I figured I could make a function which allows the content to be clicked on once the menu has been opened, but no dice! I don't know how to make the function run each time the menu has been opened since adding it to the click event above just breaks it.

function contentCloseMenu(){

    if($('.site-header, .container-site-content').hasClass('site-menu-pushr')){
        $('.site-header, .container-site-content').click(function(){
            linkClickUnpush();
        });
    }
};

Any help is greatly appreciated!

@Mooseman - Not yet. I figured that .click() and .on(click, ...) would have the same effect so I didn't explore it. Would you recommend .on() instead of .click() ?? — Freemium, Jun 18 '13 at 18:55
See http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click?lq=1 — Mooseman, Jun 19 '13 at 12:40

score 0 · Accepted Answer · answered Jun 16 '13 at 21:54

0

Have a look here: http://jsfiddle.net/Vafw5/1/

CODE

$(document).ready(function () {
    $("#menu").on("click", function (e) {
         e.stopPropagation();
        if ($(this).hasClass("opened")) {
            $(this).animate({left: "0px"}, 600);
            $(this).removeClass("opened");
        } else {
            $(this).animate({left: "150px"}, 600);
            $(this).addClass("opened");
        }
      });
    $("#container").on("click", function(){
        if($("#menu").hasClass("opened")){
            $("#menu").animate({left: "0px"}, 600);
            $("#menu").removeClass("opened");
        }
    });
});

click on the red square to open the menu, click again on the red square or everywhere in the yellow box to close the menu.

Hope it helps

answered Jun 16 '13 at 21:54

BeNdErR

17,471
21
72
103

Thanks for the example! Its a bit late in the evening so i'll give it a shot tomorrow. Whats the difference between .click() and .on(click,)? – Freemium Jun 16 '13 at 22:01
have a look here or check the jquery documentation :) http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click – BeNdErR Jun 16 '13 at 22:05
Hey, I tried it out and it worked just how I wanted, thanks! Although wouldn't the container script run every time a user clicked anything on the webpage? I was hoping to somehow merge the script so it only becomes available when the menu bar is showing, do you know how I could do that?... Or do you think that leaving it as is wouldn't make a difference to performance? – Freemium Jun 18 '13 at 19:00
I'm not sure I understood correctly what you need.. you want to make which script (or part) available when the menu bar is showing? the "close the menu" script? – BeNdErR Jun 19 '13 at 06:39
I'd like to see if I can make the $('.container') part available only when the menu is open/showing. So if the menu is closed the $('.container') function wouldn't exist and clicking within the container wouldn't run any code. – Freemium Jun 19 '13 at 19:07
1

bind the click funcion while the menu is open, unbind the click when it's closed – BeNdErR Jun 20 '13 at 07:03
I'll look into that and give it a go. Thanks for your help – Freemium Jun 22 '13 at 17:31

How to make function available once an action has occurred - jquery

1 Answers1