Question

I’m trying to develop a responsive navigation menu which dynamically creates a “More..” menu item when the screen size goes below certain width.

Heres my code so far:

Html :

<ul id="menuElem" class="clearfix">
    <li class="HighLighted"><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
    <li><a href="#">Menu Item 6</a></li>
</ul>

Javascript :

function MoreMenu () {
    //Checks if sub-menu exsists
    if ($(".sub-menu").length > 0) {
        //if it does then prepends second-last menu item to sub menu
        $(".sub-menu").prepend($("#menuElem > li:nth-last-child(2)"));
    }
    else {
        //if it doesn't exsist then appends a list item with a menu-item "more" having a sub-menu and then prepends second-last menu item to this sub menu.
        $("#menuElem").append("<li class='more'><a href='#'>More...</a><ul class='sub-menu'></ul></li>");
        $(".sub-menu").prepend($("#menuElem > li:nth-last-child(2)"));
    }
}

function RemoveMoreMenu () {
    //checks if sub-menu has something
    if ($(".sub-menu li").length > 0) {
        //if it does then the first child is taken out from the sub-menu and added back to the main menu.   
        $(".sub-menu li:first-child").insertBefore($("#menuElem > li:last-child"));

        //if sub-menu doesn't have any more children then it removes the "more" menu item.
        if ($(".sub-menu li").length === 0) {
            $(".more").remove();
        }   
    }
}

function Resize() {
    benchmark = 800; //Maximum width required to run the function
    $(window).resize((function() {
        currentWidth = $(window).width(); //Current browser width
        if (benchmark - currentWidth > 0) { 
            //checks if the browser width is less than maximum width required and if true it trigers the MoreMenu function              
            MoreMenu ();
            console.log("screen size resized down");
        } 
        else {
        }
    }));
}

The problem is when I run the Resize() function it actually runs MoreMenu() function for every window resize activity which is below 800px – which is not ideal.

So, is there any way to run that MoreMenu() function just once when the screen size goes below 800?

Thanks in advance -Struggling to get my head around javascript 🙂

Answer 1

Keep track of what the width was previous to the resize event handler, so that you only call MoreMenu and RemoveMoreMenu when you pass the width limit going up or down.

var previousWidth = $(window).width();
var benchmark = 800;

$(window).resize(function() {
    var newWidth = $(window).width();
    if (newWidth < benchmark && previousWidth >= benchmark) {
        MoreMenu();
    }
    else if (newWidth >= benchmark && previousWidth < benchmark) {
        RemoveMoreMenu();
    }
    previousWidth = newWidth;
});

You might also want to run MoreMenu initially if the previousWidth is less than benchmark from start.