Overview:

  • Uses a standard Multiple Select List whilst maintaining the design of your page.
  • Define the default width for the list via css.
  • The mootools class then finds the longest item in the select list.
  • When the select list is "activated" (either by mouseover or focus) the box slides out to the width of the longest option.
  • The list slides out horizontally over the other form/page elements without displacing them.
  • This list closes automatically on mouseout or when it looses the focus (see options)
  • See the mootools class
  • Read more about this on my blog

Initiate:

var mySelect =new mooElasticSelect('_id_select_box_',[options]);

Options:

  • initLength - (number) OPTIONAL - width to reset select box to after slide (default "100")
  • charWidth - (number) OPTIONAL - font width for calculating final width of expanded select list (default "8")
  • initMethod - ('hover' or 'focus') OPTIONAL - define the mouse action that will initiate the expansion (default "hover")

The Code:

var mooElasticSelect = new Class({
  Implements: [Options],
    options: {
      initLength:'100',
      charWidth :'8',
      initMethod:'hover'
    },

  initialize: function(element,options){
    this.setOptions(options);
    this.selectBox		=	$(element);
    this.selectOptions	=	this.selectBox.getElements('option');
    this.build();
  },

  build: function(){
    //	wrap list in relative layer to flow "over" items 
    var wrapper = new Element('div', {
      'styles': {
        'position': 'relative'
      }
    });
    wrapper.wraps(this.selectBox);
    
    //	find longest optin text value
    var optionLength=0;
    this.selectOptions.each(function(option) {
      lng=option.get('text').length;
      if(lng>optionLength) optionLength=lng;
    });
    var selectWidth=optionLength*this.options.charWidth;
    this.stretch(selectWidth);
  },

  stretch: function(lng){
    var initLength=this.options.initLength;
    this.selectBox.setStyle('cursor','pointer');
    if(this.options.initMethod=='focus'){
      this.selectBox.addEvents({
        'focus':function(){this.tween('width', ''+lng+'px');},
        'blur':	function(){this.tween('width', ''+initLength+'px');}
      })
    }else{
      this.selectBox.addEvents({
        'mouseover'	:function(){ this.tween('width', ''+lng+'px'); },
        'mouseout'	:function(){ this.tween('width', ''+initLength+'px');}
      });
    }
  }
});

//  initiate the class
window.addEvent('domready', function() {
  var sel =new mooElasticSelect('mySelect',{'charWidth':'6'});
});
				

THE DEMO:

onMouseover

Rollover (mousover) the fixed-width multiple select list and it slides out adjusting it's width according to the longest option.

onFocus

Here you must click on the select list (set the focus) to activate the slide.
Click outside to close it again.