CSS/JS Dynamic Width & Font Size

Question

I have a client site with a navigation feature that has been very tightly designed (and not by me):

It consists of an unordered list, with three DIVs in each list item:

<ul id="application-tabs">
   <li>
      <div class="cv-home-applications-slideshow-tab-first"></div>
      <div class="cv-home-applications-slideshow-tab"><h4>Coffee</h4></div>
      <div class="cv-home-applications-slideshow-tab-right"></div>
   </li>
   <li>
      <div class="cv-home-applications-slideshow-tab-left"></div>
      <div class="cv-home-applications-slideshow-tab"><h4>Pet Food</h4></div>
      <div class="cv-home-applications-slideshow-tab-right"></div>
   </li>
</ul>

The content is in the center DIV, while the first/left and right DIVs create the angled tab buttons.

This client has also requested a Google Translate utility up at the top of the page.

My problem is that I need the navigation element to always fill that space from end to end. If the translation produces a shorter word – such as "Cafe" instead of "Coffee" – I need it to expand accordingly.

Likewise, if it results in a longer word, like "Cerveza," I'll need the font size to reduce.

I'm sure I'll need to employ some javascript, in combination with the CSS, but I'm not entirely sure where to start. Any assistance would be appreciated.

Thanks,

ty

Answer 1

here is a fiddle of a solution, it automatically spaces the menu to fit http://jsfiddle.net/nFRjc/

var $j = jQuery.noConflict();
    $j(document).ready(function () {
        var containerWidth = $j('#application-tabs').width();
        var linksWidth = 0;
        $j('#application-tabs li div + div').children().each(function () {
            linksWidth += $j(this).width();
        });       
        var linkSpacing = Math.floor((containerWidth - linksWidth) / ($j('#application-tabs').children('li').length));
        $j('#application-tabs').children().not(':last-child').css('margin-right', linkSpacing + "px");
    });​

Ok simple solution to make the font reduce in size if it's too large. See this fiddle, the links font size are 100px, but the script reduces them until they fit. http://jsfiddle.net/nFRjc/2/ I just added a loop that checks whether or not the total width of the individual links is greater than the container width, and reduces the font size by 1 if true.

var $j = jQuery.noConflict();
    $j(document).ready(function () {
        var containerWidth = $j('#application-tabs').width();
        var linksWidth = 0;
        $j('#application-tabs li div + div').children().each(function () {
            linksWidth += $j(this).width();
        });
        while (linksWidth >= (containerWidth - 100)) {
            $j('#application-tabs li div + div h4').css({'font-size': '-=1'});
            var linksWidth = 0;
            $j('#application-tabs li div + div').children().each(function () {
                linksWidth += $j(this).width();
            });
        }
        var linkSpacing = Math.floor((containerWidth - linksWidth) / ($j('#application-tabs').children('li').length));
        $j('#application-tabs').children().not(':last-child').css('margin-right', linkSpacing + "px");
    });​