The Code from my last post with my new colorizer ;)
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);
}
}
}
}
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);
}
}
}
}
Colorized by: CarlosAg.CodeColorizer AND
<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>
<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>
Colorized by: CarlosAg.CodeColorizer
posted by Brando @ 11:29 AM
9 Comments:
<3
Thought you might like it Joshie ;) Any suggestions for the lack of text wrapping that makes my css look all poo?
NVM, I think setting the sidebar background-color to white is the best I'll do. Ppl reading the code will probably copy and paste it first anyway I think.
Wow, the colourized code acts all funky. Try looking at your site in IE6. It spans the whole page, but it throws the right side bar thing down.
In Opera, it does weird things with line wrapping (comments look sort of wrapped in the first part as well as the second code part being totally f'ed).
And what the heck does "hrc" mean? :P
hrc is some text that just showed up there :(....
I'm going to work on the layout a little more tonight cause it gots some probs.
ohh <3 scrolls! I can't look w/ IE6 b/c I installed IE7 which sucks. I will try opera though. Originally I designed using FFox and IE6 so I thought I was ok. /me checks out opera.
With the scrollies there, it looks fine in Opera now. :) The only oddity I see is in the first code section, where one-line comments span two lines. :o
Well written article.
Thanks Leonora! I appreciate your feedback.
Post a Comment
<< Home