Question

I have a a script that on $(window).resize() needs to hide divs in a list. However, because I’m using an older OS, my browser doesn’t resize in realtime. It instead leaves a trace where it will resize, and then open letting go, it resizes. Thus, the script below only removes one div from the list instead of all that conflict. How can I fix this?

jQuery:

$(window).resize(function () {
    movePivots();
});
    function movePivots() {
        var last_pivot = $("ul li:last");
        if ($("#container").width() - $("ul").width() <= 0) {
            last_pivot.remove();
        } else {

        }
    }

CSS:

#container 
{
    float: left;
    width: 50%;
    min-width: 450px;
    max-width: 900px;
    height: 1000px;
    background-color: #eee;
}

#nav 
{
    float: left;
    background-color: #ddd;
    min-width: 450px;
    max-width: 900px;
    width: 100%;
}

ul 
{
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #ccc;
}

Answer 1

Use a while loop:

$(window).resize(function () {
    movePivots();
});
    function movePivots() {
        var last_pivot = $("ul li:last");
        while ($("#container").width() - $("ul").width() <= 0) {
            last_pivot.remove();
            last_pivot = $("ul li:last");
        }
    }