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):

Slideshow Navigation

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

Could you post a demo or a link to the site? I certainly hope the original dev didn't give each LI a fixed width. — Snuffleupagus, Aug 29 '12 at 19:56
Your question is similar to http://stackoverflow.com/questions/11937818/jquery-resize-li-based-on-a-string-size Maybe my answer (http://stackoverflow.com/a/11938695/1529630) interests you. — Oriol, Aug 29 '12 at 21:06
Oriol – It is similar, but only half of the solution. See my response to user1289347 below. — Ty Morton, Aug 30 '12 at 13:12
Snuffy - I am the original dev, and no, the only fixed sizes are the DIV containing the UL, and the first/left/right DIVs that contain the button caps. The LIs and the content DIVs have no assigned widths. — Ty Morton, Aug 30 '12 at 13:14

user1289347 · Accepted Answer · 2012-08-30T16:11:45.420

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");
    });

That part I knew how to do. It's the other scenario that has me perplexed – reducing the font size to fit, if the translated menu option names are longer – and the logic involved in determining same. — Ty Morton, Aug 30 '12 at 13:11
I add an updated fiddle that does what you need. If you take a look at the while loop I added you can see the solution. — user1289347, Aug 30 '12 at 16:12
FYI - I had to change line 9 of the javascript to `while (linksWidth >= (containerWidth - 350))` to accomodate the combined DIV widths for the button caps. Otherwise, it works brilliantly! Thanks again! — Ty Morton, Sep 02 '12 at 15:04

CSS/JS Dynamic Width & Font Size

1 Answers1