Question

I have this code which shows/hides a menu when a button is cicked

$('#main-menu ul').slideToggle();

the menu is hidden when the browser window is less than 767 px, so this button appears which allows it to be toggled on and off, this works except the only problem is when I resize the window bigger again, the menu is gone, if slide toggled has set it to display none. to fix this I added code to show the menu once the browser resizes. this then causes the new menu to show, when the browser window is scaled down again less than 767 px, instead of having the default be hidden. I can then hide the menu again when scaled less than 767px but this causes a flash of the menu as it is hidden.

I was wondering a way to detect if resize() was scaling up r down in this case when scaling down I can hide() menu and when scaling up I can show() menu.

$('.menu-button').click(function() {
    $('#main-menu ul').slideToggle();
});



    $(window).resize(function(){
                var w = $(window).width();
                if(w > 767 && $('#main-menu ul').is(':hidden')) {
                    $('#main-menu ul').show();
                }
            });




    $(window).resize(function(){
                var w = $(window).width();
                if(w < 767) {
                    $('#main-menu ul').hide();
                }
            });

Answer 1

You’ll need to store the previous dimensions and decide whether the resize is increasing or decreasing in size based on that.

jQuery(function($) {
    // Cache a reference to $(window), for performance, and get the initial dimensions of the window
    var $window = $(window),
        previousDimensions = {
            width: $window.width(),
            height: $window.height()
        };

    $window.resize(function(e) {
        var newDimensions = {
            width: $window.width(),
            height: $window.height()
        };

        if (newDimensions.width > previousDimensions.width) {
            // scaling up
        } else {
            // scaling down
        }

        // Store the new dimensions
        previousDimensions = newDimensions;
    });
});

To keep the menu visible when the browser window is resized and the user’s chosen to display it, you’ll just need to store a flag stating that the user chose to make it visible:

$('.menu-toggle-button').click(function(e) {
    var $menu = $('#main-menu ul');

    if (!$menu.data('keepVisible')) {
        $menu
            .data('keepVisible', true); // Store the user's choice (show the menu)
            .slideDown(); // Show the menu
    } else {
        $menu
            .data('keepVisible', false); // Store the user's choice (hide the menu)
            .slideUp(); // Hide the menu
    }
});

$(window).resize(function() {
    var $menu = $('#main-menu ul');

    if ($(window).width() < 767) {
        // Window is smaller than 767 pixels wide
        if (!$menu.data('keepVisible')) {
            // Hide the menu if it hasn't been kept visible by the user
            $menu.hide();
        }
    } else if ($menu.is(':hidden') || $menu.data('keepVisible')) {
        Window is larger than 767 pixels wide and the menu is invisible OR has been shown manually by the user
        $menu
            .data('keepVisible', false) // Reset the user's choice
            .show(); // Show the menu
    }
);

(Note that with this technique, the code block that determines if the window got bigger or smaller is completely unnecessary)