When reaching viewport point then troggle my sidebar

Question

I need to be able to troggle my sidebar. This works but I also need to hide the sidebar when reach viewport > 740px. The troggle needs to work also. I came a far way but I think I have to combine these two to let it work properly.

Anyone knows hot to do this?

CHECK OUT MY FIDDLE PLEASE >

My script:

$('.troggler').toggle(
    function() {
        $('.right').animate({"right": "-400px"}, "slow");
        $('.troggler').animate({"background-position": "-25px"}, "fast");
    }, function() {
        $('.right').animate({"right": "0"}, "slow");
        $('.troggler').animate({"background-position": "0"}, "fast");
})

$(window).resize(function() {
    if ($(window).width() < 740) {
        $(".right").animate({"right": "-400px"}, "slow");
        $('.troggler').animate({"background-position": "-25px"}, "fast");
    }
    else {
        $('.right').animate({"right": "0"}, "slow");
        $('.troggler').animate({"background-position": "0"}, "fast");
    }
});

wouldn't recommend using that toggle method since it is deprecated http://api.jquery.com/toggle-event/ Is valid in 1.7 as in demo but if you upgrade can cause issues — charlietfl, May 30 '14 at 12:09
I'm open for any improvement although I'm not planning to update the js version. — fourroses, May 30 '14 at 12:15

score 1 · Accepted Answer · edited May 23 '17 at 12:11

I guess the $(window).resize() fires multiple events while you ara resizing the window. To solve this, you might wait for the resizing (dragging) complete.

// Basic Concept is ...
$(window).resize(function () {

    if( ... event not fired ...  ){
       setTimeout(function(){
            // toggle your navi
       },500);
    }
    ....
});

DEMO:http://jsfiddle.net/VseLR/13/

Your code could go like this:

function showNavi(){
    $('.right').animate({"right": "0"}, "slow");
    $('.troggler').animate({"background-position": "0"}, "fast");
}
function hideNavi(){
    $('.right').animate({"right": "-400px"}, "slow");
    $('.troggler').animate({"background-position": "-25px"}, "fast");
}

$('.troggler').toggle(function() {
        showNavi();},
    function() {
        hideNavi();
    });

function applyLayout() {
    if ($(window).width() < 740) {
       hideNavi();
    }else {
       showNavi();
    }
}
var timer = 0;
var delayToCall = (function () {
    return function (callback, ms) {
        if (timer > 0) {
            clearTimeout (timer);
        }
        timer = setTimeout(callback, ms);
    };
})();
$(window).resize(function () {
   delayToCall(function(){
     applyLayout();
    }, 500);
});

You might want to check this question:
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

Hope this helps.

Thanks allot naota! there is one thing: when having large viewport and click on close, nothing happens, click again and then it works. Any idea how to solve this? — fourroses, May 30 '14 at 14:02
@fourroses, Yes. I guess it's because the first parameter of `.toggle()` is show and 2nd parameter is hide. You might want to change order to opposite like this: http://jsfiddle.net/VseLR/15/ — naota, Jun 02 '14 at 01:30

When reaching viewport point then troggle my sidebar

1 Answers1