Skip to content

Instantly share code, notes, and snippets.

@ogorzalka
Created December 21, 2010 16:24
Show Gist options
  • Save ogorzalka/750148 to your computer and use it in GitHub Desktop.
Save ogorzalka/750148 to your computer and use it in GitHub Desktop.
IE Select Element Fix, jQuery
/*
How to use ?
Easy ! just apply the method to your forms :
$('form').expand_select();
*/
$.fn.expand_select = function () {
if (!$.browser.msie) return;
var s = $(this),
expand = function()
{
var currentWidth = parseInt($(this).css("width"));
$(this)
.data("origWidth", parseInt($(this).css("width")))
.css({
"width" : "auto",
'position' : 'absolute'
})
.parent()
.css('position', 'relative');
if( parseInt($(this).width()) < currentWidth )
{
$(this).css('width', $(this).data('origWidth'))
}
},
contract = function()
{
if (!this.noHide)
{
$(this)
.css({
position:'static',
width : $(this).data('origWidth')
})
.parent()
.css('position', 'static');
}
},
focus = function(){ this.noHide = true },
blur = function(){ this.noHide = false; contract.call(this) };
s.delegate('select', 'mouseenter mouseout focus click blur change', function(e) {
switch (e.type) {
case 'mouseenter': expand.call(this); break;
case 'mouseout': contract.call(this); break;
case 'focus': focus.call(this); break;
case 'click': focus.call(this); break;
case 'blur': blur.call(this); break;
case 'change': blur.call(this); break;
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment