Mikey Binns Mikey Binns - 6 months ago 13
Javascript Question

jQuery on click issue

I'm new to javascript and jQuery so sorry if this is very simple to fix.

I'm trying to get a menu that slides down from the top of the screen.

See my website here: http://www.mikeybinns.com/

Currently, the menu doesn't come down unless you click the menu icon 3/4 times, and when it comes down, it doesn't have any transistion effect on it, even though it has a transition effect in CSS. Note that the menu icon is meant to fade in and out on click and that the menu is a variable height, which is why I need to use jQuery, to set how high the menu has to go.

Please see the whole .js file here:

var showMenu = document.getElementById('showMenu');

jQuery(function ($) {
//find menu height
var menuheight = $(".hidden-menu").height();
//set the position of the menu (e.g. if menu is 240px tall, it would be 240-240-240-10=-250, the extra 10 is due to a drop shadow.
var menumove = menuheight - menuheight - menuheight - 10;
//move menu to above the screen
$(".hidden-menu").css({
top: menumove
});
//on click of menu icon
showMenu.onclick = function () {
$('#showMenu').click(function () {
//if menu has style attribute, remove attribute, otherwise, add style="top:(menu height in negative -10)px"
if ($('.hidden-menu').attr('style')) {
$('.hidden-menu').removeAttr('style');
} else {
var menushow = "top:" + menumove + "px";
$('.hidden-menu').attr('style', menushow);
}
});
//menu icon fade
$mb = $('#showMenu');
$mb.fadeOut(200, function () {
$mb.delay(300).fadeIn(400, function () {});
});
};
});


If anyones knows why it doesn't work 2/3 times, please let me know, or if there is a better way to do this, I'm open to completely re-coding this.

Thanks,

Answer

You're wrapping your click event in another click event, instead of just setting up on page load. This is actually saying "on click, set up a function that will fire on click", which is leading to your issue. If you get rid of your showMenu.onclick stuff, and just set up the click event on load, it should fix it. This change worked for me:

jQuery(function ($) {
//find menu height
var menuheight = $(".hidden-menu").height();
//set the position of the menu (e.g. if menu is 240px tall, it would      be 240-240-240-10=-250, the extra 10 is due to a drop shadow.
var menumove = menuheight - menuheight - menuheight - 10;
//move menu to above the screen
    $(".hidden-menu").css({
        top: menumove
});
//on click of menu icon

    $('#showMenu').click(function () {
//if menu has style attribute, remove attribute, otherwise, add style="top:(menu height in negative -10)px"
        if ($('.hidden-menu').attr('style')) {
            $('.hidden-menu').removeAttr('style');
        } else {
            var menushow = "top:" + menumove + "px";
            $('.hidden-menu').attr('style', menushow);
        }
    });
//menu icon fade
    $mb = $('#showMenu');
    $mb.fadeOut(200, function () {
        $mb.delay(300).fadeIn(400, function () {});
    });

});