sfautomaticwidth.js

/*
 * sf-AutomaticWidth v1.0b - Automatically adjusts the menu width for the jQuery Superfish plugin.
 *
 * Developer's note:
 * Built as a part of the Superfish project for Drupal (http://drupal.org/project/superfish)
 * Found any bug? have any cool ideas? contact me right away! http://drupal.org/user/619294/contact
 *
 * jQuery version: 1.3.x or higher.
 *
 * Dual licensed under the MIT and GPL licenses:
 *  http://www.opensource.org/licenses/mit-license.php
 *  http://www.gnu.org/licenses/gpl.html
 */

(function($){
  $.fn.sfautomaticwidth = function(){
    function automaticWidth(menu){
      // This plugin is not useful for vertical menus.
      if (menu.hasClass('sf-horizontal') || menu.hasClass('sf-navbar')){
        // Adding a helper class.
        // Making the main UL as wide as its container.
        menu.addClass('sf-automatic-width').css('width','100%');
        var
        // We need the inner width of the main UL.
        menuWidth = menu[0].clientWidth,
        // Selecting only the first level parents.
        children = menu.children('li'),
        // Number of children.
        childrenNumber = children.length,
        // Calculating the total width of the children based on their outer width.
        childrenWidth = 0;
        for (var a = 0; a < childrenNumber; a++) {
          // Resetting the children width and getting its outer width then.
          childrenWidth += children.eq(a).css({width:''}).outerWidth(true);
        }
        // Is the menu container wider than the menu?
        // (It'll be more flexible in later versions.)
        if (menuWidth > childrenWidth) {
          var
          // Calculating how much width should be added to each first level parent.
          difference = (((menuWidth - childrenWidth) * 100) / menuWidth) / childrenNumber;
          for (var a = 0; a < childrenNumber; a++){
            var
            child = children.eq(a),
            // Calculating and applying the new width to the item.
            autoWidth = (((child[0].clientWidth * 100) / menuWidth) + difference) + '%';
            child.css({width:autoWidth});
          }
        }
        // Reset the widths if the menu became narrower than its children.
        if (menuWidth < childrenWidth) {
          for (var a = 0; a < childrenNumber; a++){
            children.eq(a).css({width:''});
          }
        }
      }
    }
    // Return original object to support chaining.
    // Although unnecessary because of the way the module uses these plugins.
    for (var b = 0; b < this.length; b++) {
      var menu = $(this).eq(b);
      automaticWidth(menu);
      var timer;
      $(window).resize(function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
          automaticWidth(menu);
        }, 100);
      });
    }
    return this;
  };
})(jQuery);