[Summary view] [Print] [Text view]

   1  // $Id: supersubs.js,v 1.1 2009/08/19 04:28:07 sociotech Exp $
   2  
   3  /*
   4   * Supersubs v0.2b - jQuery plugin
   5   * Copyright (c) 2008 Joel Birch
   6   *
   7   * Dual licensed under the MIT and GPL licenses:
   8   *     http://www.opensource.org/licenses/mit-license.php
   9   *     http://www.gnu.org/licenses/gpl.html
  10   *
  11   *
  12   * This plugin automatically adjusts submenu widths of suckerfish-style menus to that of
  13   * their longest list item children. If you use this, please expect bugs and report them
  14   * to the jQuery Google Group with the word 'Superfish' in the subject line.
  15   *
  16   */
  17  
  18  ;(function($){ // $ will refer to jQuery within this closure
  19  
  20      $.fn.supersubs = function(options){
  21          var opts = $.extend({}, $.fn.supersubs.defaults, options);
  22          // return original object to support chaining
  23          return this.each(function() {
  24              // cache selections
  25              var $$ = $(this);
  26              // support metadata
  27              var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
  28              // get the font size of menu.
  29              // .css('fontSize') returns various results cross-browser, so measure an em dash instead
  30              var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
  31                  'padding' : 0,
  32                  'position' : 'absolute',
  33                  'top' : '-999em',
  34                  'width' : 'auto'
  35              }).appendTo($$).width(); //clientWidth is faster, but was incorrect here
  36              // remove em dash
  37              $('#menu-fontsize').remove();
  38              // cache all ul elements
  39              $ULs = $$.find('ul');
  40              // loop through each ul in menu
  41              $ULs.each(function(i) {    
  42                  // cache this ul
  43                  var $ul = $ULs.eq(i);
  44                  // get all (li) children of this ul
  45                  var $LIs = $ul.children();
  46                  // get all anchor grand-children
  47                  var $As = $LIs.children('a');
  48                  // force content to one line and save current float property
  49                  var liFloat = $LIs.css('white-space','nowrap').css('float');
  50                  // remove width restrictions and floats so elements remain vertically stacked
  51                  var emWidth = $ul.add($LIs).add($As).css({
  52                      'float' : 'none',
  53                      'width'    : 'auto'
  54                  })
  55                  // this ul will now be shrink-wrapped to longest li due to position:absolute
  56                  // so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
  57                  .end().end()[0].clientWidth / fontsize;
  58                  // add more width to ensure lines don't turn over at certain sizes in various browsers
  59                  emWidth += o.extraWidth;
  60                  // restrict to at least minWidth and at most maxWidth
  61                  if (emWidth > o.maxWidth)        { emWidth = o.maxWidth; }
  62                  else if (emWidth < o.minWidth)    { emWidth = o.minWidth; }
  63                  emWidth += 'em';
  64                  // set ul to width in ems
  65                  $ul.css('width',emWidth);
  66                  // restore li floats to avoid IE bugs
  67                  // set li width to full width of this ul
  68                  // revert white-space to normal
  69                  $LIs.css({
  70                      'float' : liFloat,
  71                      'width' : '100%',
  72                      'white-space' : 'normal'
  73                  })
  74                  // update offset position of descendant ul to reflect new width of parent
  75                  .each(function(){
  76                      var $childUl = $('>ul',this);
  77                      var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
  78                      $childUl.css(offsetDirection,emWidth);
  79                  });
  80              });
  81              
  82          });
  83      };
  84      // expose defaults
  85      $.fn.supersubs.defaults = {
  86          minWidth        : 9,        // requires em unit.
  87          maxWidth        : 25,        // requires em unit.
  88          extraWidth        : 0            // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
  89      };
  90      
  91  })(jQuery); // plugin code ends