Question

I hope someone can help with this.

I have written a function which adds width to a final li item in a nav ul based on the number of existing list items and the remaining width in the parent container.

This works fine on document load and if the document is resized and an href is clicked, but during the actual resize the element’s size is not recalculated.

I’ve made a fiddle to help illustrate this.

Does anyone know how to dynamically make the calculation whilst the window is being resized?

This is the js

 $(document).ready(calcWidth);
$(document).resize(calcWidth);

function calcWidth(){
    // get array of all the list items in the nav
    var $listWidth = $('ul#main-nav li').map(function(){
        return $(this).width();
    }).get();
    var $itemCount = $('#main-nav li').length; //this works as margin-right is set to 1px
    var $contWidth = $('#main-nav').width(); // get the full container width
    var $sum = 0;
    $.each($listWidth,function(){$sum+=parseFloat(this) || 0;});
    $('ul#main-nav li.final a').css({
        width:  $contWidth - $sum - $itemCount, //set the width of the final li to be the total container minus the sum of the existing li elements
        height: '12px'
    });
}

If you need more code posted here, let me know, but it’s all in the fiddle.

Thanks
Luke

Answer 1

You don’t need to do this with javascript.

Move the clearfix class on the UL (because the list items are floated), add the purple background on the UL, and a 1px white right border to the list items. And you can remove the last LI.

See it here