Quote:
Originally Posted by b1randon
I've seen this before and in my app I could definitely use the ability to make that text wrap, if not complete with a tooltip. I hope someone has an answer b/c I don't know. I'm going to do some research though.
Here's what I'm going to use from now on. It is a script that lets the select box expand an contract.
-
var lilPx = "200px"; //size of small select box
-
var bigPx = "600px"; //size of large select box
-
var prefix = 'bs'; //prefix used on all select box IDs
-
-
document.onmouseover = shrinkAll; //handles abandoned selections (no change)
-
-
function resize(id){
-
//get the element in question
-
var elem = document.getElementById(id);
-
-
//dynamically init/assign the holder variable
-
var holder = eval("hold"+id);
-
-
//if select not being held open
-
if (!holder){
-
//go big->small or small -> big
-
if(elem.style.width == bigPx)
-
elem.style.width = lilPx;
-
else
-
elem.style.width = bigPx;
-
}else{
-
elem.style.width = bigPx;
-
}
-
}
-
-
function hold(id){
-
//swap the hold value, dynamic of course
-
eval("hold" + id + " = !hold" + id);
-
-
//change size if necessary
-
resize(id);
-
}
-
-
function shrink(id){
-
//get element to shrink
-
var elem = document.getElementById(id);
-
-
//set width to small
-
elem.style.width = lilPx;
-
-
//unhold
-
eval("hold" + id + " = false");
-
}
-
-
function shrinkAll(e){
-
//be sure we have the real src, not a bubble or trickle!
-
if (!e) var e = window.event;
-
var target = (window.event) ? e.srcElement : e.target;
-
-
//shrink em all except that one that was the source (possibly)
-
var selects = document.getElementsByTagName('select');
-
for(i=0; i<selects.length; i++){
-
if(selects[i].id.substring(0,prefix.length) == prefix){
-
-
//shrink if it wasn't the source (make sure the src isn't parent for <option> in mozilla)
-
if(selects[i].id != target.id && selects[i].id != target.parentNode.id ){
-
shrink(selects[i].id);
-
}
-
}
-
}
-
}
-
[HTML]
<html>
<head><script type="text/javascript" src="script.js"></script></head>
<body onload="" id="body">
<div id="outtie"></div>
<select style="width:200px;" id="bs1" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option>00004546353 - MAKROLON TANK TRUCK</option>
<option>00004567435 - 500 BARRELS OF POLYOL 50 KG ea</option>
<option>00056463543 - POLYURETHANE BLEND</option>
<option>00005464354 - 50% ACID SOLUTION</option>
<option>00056875343 - 50 PALLETS OF RANDOM CHEMICALS</option>
</select>
<br />
<select style="width:200px;" id="bs2" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option>00004546353 - MAKROLON TANK TRUCK</option>
<option>00004567435 - 500 BARRELS OF POLYOL 50 KG ea</option>
<option>00056463543 - POLYURETHANE BLEND</option>
<option>00005464354 - 50% ACID SOLUTION</option>
<option>00056875343 - 50 PALLETS OF RANDOM CHEMICALS</option>
</select>
</body>
</html>
[/HTML]
Let me know if you have problems implementing it. ;)
