CODEWITHSUNDEEP
jqueryresizeonclick
LeeTee
LeeTee

Reputation: 6601

Jquery on click function not reseting on browser resize

I have the following code which slides a column in a from left to right and nudges everything to the right of the column over to the right and then back again (a bit like facebook app). It works fine on document ready but not on resize. After resizing the it starts to act strangely. Its as though its doing the previous function and not registering the new function on resize.

function doMenu() {

var $trigger = $(".icon-menu-2");
var $menu = $(".c_left");
var width = $(window).width();

if ((width < 870) && (width > 750)) {
    var status = 'closed';

    $('.icon-list').on('click', function(event){
        if ( status === 'closed' ){
            $menu.animate({
                width: 0,
                marginLeft: -200,
                display: 'toggle'
            }, 'fast');
            $(".content_right, .navbar").animate({
                marginRight: 0,
                display: 'toggle'
            }, 'fast');
            return status = 'open';

        } else if ( status === 'open' ) {
          $menu.animate({
                width: 200,
                marginLeft: 0,
                display: 'toggle'
            }, 'fast');
            $(".content_right, .navbar").animate({
                marginRight: -120,
                display: 'toggle'
            }, 'fast');
            return status = 'closed';
        }
    });
}

if (width < 750) {

   var status = 'closed';
    $('.icon-list').on('click', function(event){
        if ( status === 'closed' ){
            $menu.animate({
                width: 0,
                marginLeft: -200,
                display: 'toggle'
            }, 'fast');
            $(".content_right, .navbar").animate({
                marginLeft: 0,
                display: 'toggle'
            }, 'fast');
            return status = 'open';

        } else if ( status === 'open' ) {
            $menu.animate({
                width: 200,
                marginLeft: 0,
                display: 'toggle'
            }, 'fast');
            $(".content_right, .navbar").animate({
                marginLeft: 200,
                display: 'toggle'
            }, 'fast');
            return status = 'closed';
        }
    });            

}

}
$(document).ready(doMenu);
$(window).resize(doMenu);

EDIT - changed toggle() to on('click', function(event) as suggested below but still have same problems with functions not working properly on resize.

Upvotes: 0

Views: 392

Answers (1)

Arpad Bajzath
Arpad Bajzath

Reputation: 896

Instead of toggle you can use flags. 

var status = 'closed';
$('.foo').on('click', function(event){
    if ( status === 'closed' ){
        //...
        return status = 'open';

    } else if ( status === 'open' ) {
        //..
        return status = 'closed';

    }
});

Upvotes: 1

Related Questions