CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tim T
Tim T

Reputation: 333

Struggling to get some basic JQuery and JS code working

In the code below, when menuLeft has the class 'cbp-spmenu-open', it is displayed on screen. When it doesn't have that class, it is not on screen.

Im trying to make some code so that, when the menu is on screen, it will disappear when the user clicks on anything apart from the menu.

In my code below, Im basically trying to tell it:

If the menu is on the screen, clicking on anything but the webpage makes the menu disappear.

Not too sure where I have gone wrong, so if anyone could post some correct code that would be great! Thanks.

if ( $('.menuLeft').hasClass('cbp-spmenu-open') ) {
        $("*").not("#menuRight").click(function() {
        classie.toggle( menuLeft, 'cbp-spmenu-open' );
    });
}

EDIT:

var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
        menuRight = document.getElementById( 'cbp-spmenu-s2' ),
        menuTop = document.getElementById( 'cbp-spmenu-s3' ),
        menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
        // showLeft = document.getElementById( 'showLeft' ),
        showRight = document.getElementById( 'showRight' ),
        showTop = document.getElementById( 'showTop' ),
        showBottom = document.getElementById( 'showBottom' ),
        showLeftPush = document.getElementById( 'showLeftPush' ),
        showRightPush = document.getElementById( 'showRightPush' ),
        body = document.body;

        var showLeft=document.getElementsByClassName('showLeft');
        for(var i=0;i<showLeft.length;i++) {
            showLeft[i].onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeft' );
};

}

// showLeft.onclick = function() {
//  classie.toggle( this, 'active' );
//  classie.toggle( menuLeft, 'cbp-spmenu-open' );
//  disableOther( 'showLeft' );
// };
showRight.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuRight, 'cbp-spmenu-open' );
    disableOther( 'showRight' );
};
showTop.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuTop, 'cbp-spmenu-open' );
    disableOther( 'showTop' );
};
showBottom.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuBottom, 'cbp-spmenu-open' );
    disableOther( 'showBottom' );
};
showLeftPush.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'cbp-spmenu-push-toright' );
    classie.toggle( menuLeft, 'cbp-spmenu-open' );
    disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'cbp-spmenu-push-toleft' );
    classie.toggle( menuRight, 'cbp-spmenu-open' );
    disableOther( 'showRightPush' );
};

function disableOther( button ) {
    if( button !== 'showLeft' ) {
        classie.toggle( showLeft, 'disabled' );
    }
    if( button !== 'showRight' ) {
        classie.toggle( showRight, 'disabled' );
    }
    if( button !== 'showTop' ) {
        classie.toggle( showTop, 'disabled' );
    }
    if( button !== 'showBottom' ) {
        classie.toggle( showBottom, 'disabled' );
    }
    if( button !== 'showLeftPush' ) {
        classie.toggle( showLeftPush, 'disabled' );
    }
    if( button !== 'showRightPush' ) {
        classie.toggle( showRightPush, 'disabled' );
    }
}

Upvotes: 0

Views: 162

Answers (1)

Adam Oakley
Adam Oakley

Reputation: 816

This isn't the cleanest solution but I think this will work for you with the least amount of work

Something like this:

$("body").click(function(event) {
    $('.menuRight').addClass('cbp-spmenu-close');
});

showRightMenu = function(e) {
    $('.menuRight').removeClass('cbp-spmenu-close');
    e.preventDefault();
    e.stopPropagation();
}

$(".menuRight").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});

Here is the JSFiddle:

http://jsfiddle.net/Lpbxxufd/7/

Upvotes: 1

Related Questions