jquery - For a fluid Navigation Menu, how to adjust padding dynamically for each Breadcrumb?

Question

I am currently building a site with a fluid layout. None of the mainstream fluid templates out there actually come with a stock horizontal navigation that can adjust itself as the window is resized or loads at different widths.

I've been pouring through online tutorials and other Stack Overflow solutions that try to tackle similar problems, some are extremely clever and come really close but none are able to handle a block-like hover effect a {display:block; padding:10px 40px;} a:hover {background:#ccc;}. Others use clever ways of creating block links that are identical widths that adjust with the window widht; however, this is not precise enough and I am not looking to create identical widths among the link blocks but to have identical left/right padding between links. This is much more precise as the distance between links is identical.

I've given up on doing this with CSS, maybe someone else has a solution for handling a variable padding, or something that acts very close to that. In any case, I decide to try to work on it in jQuery.

I have never actually written any jQuery before but have worked with several plugins for years. I thought I should at least try to come up with something before posting. I have it working, I am wondering is it possible to add the ability for it to adjust on the fly if the user resizes the window, not just on page load. I am also wondering if there is anything wrong with they way I have done it.

Here is a link to where I've gotten to: http://jsfiddle.net/XZxMc/3/

The HTML:

<div class="container">
    <div class="row">                        
        <div class="twelvecol">
            <ul>
                <li><a href="#">short</a></li>
                <li><a href="#">longer</a></li>
                <li><a href="#">even-longer</a></li>
                <li><a href="#">really-really-long</a></li>
                <li><a href="#">tiny</a></li>  
            </ul>               
        </div>
    </div>
</div>

The CSS:

.container {
    background:#ccc; 
    font-family:arial, helvetica;
}

.row {
    width: 100%;
    max-width: 700px; 
    min-width: 600px; 
    margin: 0 auto;
    overflow: hidden;
    background:white;
}

.row .twelvecol {
    width:100%; 
    float:left;
}

ul {
    text-align:center;
}

ul li {
    display:inline-block;     
    zoom:1; 
    *display: inline;
}

ul li a {
    padding:12px 39px;
    display:block;
}

a {text-decoration:none;}
a:hover {background:blue; color:white;}

??The JavaScript:

// Initial left/right padding of links set in css
var paddingIni = 39;
// Initial max-width of .row
var widthIni = 700; 
// Number of links multiplied by 2; 2 because we will be reducing the padding by multiples of 2px total, 1px left, 1px right
var linkQ = 5*2; 

// Current width of link container
var twelveWidth = $(".row .twelvecol").width(); 
// (Initial width / 10) - (Current width / 10); this gives us how much to subtract from our inital padding of 39
// Is there anything wrong with the way this is written?
var paddingSub = (widthIni/linkQ)-(twelveWidth/linkQ); 
// Simply subtracting above computation from our inital padding of 39
var paddingNew = paddingIni-paddingSub;

$("ul li a").css("padding-left",paddingNew);
$("ul li a").css("padding-right",paddingNew);

Also, if someone wouldn't mind explaining why this doesn't work, it's my attempt to do it all in one equation:

var whyisthiswrong = 39 - ( (700/(5*2)) / ($(".row .twelvecol").width()/(5*2)) );

Answer 1

On the HTML part, if you plan to only have one horizontal navigation I would make sure it has an id. Also I don't think this is necessary:

<div class='twelvecol'><ul>...</ul></div> 

You can have the same by doing

<ul id='hmenu' class='twelvecol'>...</ul>

CSS wise you just make sure your unsorted list has a display block or inline-block (since it's horizontal and therefore inline). This way you can also get rid of the CSS hack on the list items if I'm correct.

According to this post auto resize text (font size) when resizing window? For the jQuery part to trigger the window resize use:

$(function() {
    // trigger once dom is ready
    resizeMe();
    // trigger on window resize
    $(window).bind('resize', function()
    {
        // your resize function
        resizeMe();
    }).trigger('resize');
});

var resizeMe = function(){
    // your stuff here
};

You can adjust CSS in one time with a JSON param string or when it's only just padding:

$("#hmenu li a").css("padding", "12px " + paddingNew + "px 12px " + paddingNew + "px");

or

$("#hmenu li a").css({"padding-left": paddingNew, "padding-right": paddingNew});

Not to sure on the px concatenation. It may not be necessary.

Added jsfiddle, you can play with the "result window" sizes to see what happens: http://jsfiddle.net/tive/tKDjg/