expand select boxes
expand select boxes kinda non ie compatible :(
by bitstarr
HTML
<div id="searchbox">
<div class="box">
<select id="mileage_max" name="sma">
<option value="">keine Angabe</option>
<option value="5000">5.000</option>
<option value="10000">10.000</option>
<option value="20000">20.000</option>
<option value="40000">40.000</option>
<option value="60000">60.000</option>
<option value="80000">80.000</option>
<option value="100000">100.000</option>
<option value="120000">120.000</option>
<option value="140000">140.000</option>
<option value="160000">160.000</option>
<option value="180000">180.000</option>
<option value="200000">200.000</option>
<option value="220000">220.000</option>
<option value="240000">240.000</option>
<option value="260000">260.000</option>
<option value="280000">280.000</option>
<option value="300000">300.000</option>
<option value="500000">500.000</option>
</select>
</div>
<div class="box">
<select id="mileage_max" name="sma">
<option value="">keine Angabe</option>
<option value="5000">5.000</option>
<option value="10000">10.000</option>
<option value="20000">20.000</option>
<option value="40000">40.000</option>
<option value="60000">60.000</option>
<option value="80000">80.000</option>
<option value="100000">100.000</option>
<option value="120000">120.000</option>
<option value="140000">140.000</option>
<option value="160000">160.000</option>
<option value="180000">180.000</option>
<option value="200000">200.000</option>
<option value="220000">220.000</option>
<option value="240000">240.000</option>
<option value="260000">260.000</option>
<option...
CSS
.box {height: 30px;}
select{width:3em;}
.expand{position: absolute;width: 10em;}
.toRight {left: -5px};
JavaScript
$(function() {
$('#searchbox select').bind("mouseenter", function(){
$(this).addClass('expand');
})
.bind("change", function(){
$(this).removeClass('expand');
})
.bind("mouseleave", function(){
$(this).removeClass('expand');
});
$("#searchbox .box:odd select").addClass('toRight');
});