Busted Mug

A blog that documents solutions to the most frustrating problems that occur during development in technologies such as Java, XML, AJAX, SQL, CSS and others that make me want to throw my coffee mug against the cube wall.

Friday, January 05, 2007

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 = 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=0i<selects.lengthi++){
        
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>

Colorized by: CarlosAg.CodeColorizer

9 Comments:

At 8:59 AM, Blogger Joshie said...

<3

 
At 9:50 AM, Blogger Brando said...

Thought you might like it Joshie ;) Any suggestions for the lack of text wrapping that makes my css look all poo?

 
At 9:55 AM, Blogger Brando said...

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.

 
At 9:20 AM, Blogger Joshie said...

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

 
At 2:11 PM, Blogger Brando said...

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.

 
At 2:21 PM, Blogger Brando said...

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.

 
At 6:08 AM, Blogger Joshie said...

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

 
At 6:17 AM, Anonymous Leonora said...

Well written article.

 
At 1:07 PM, Blogger Brando said...

Thanks Leonora! I appreciate your feedback.

 

Post a Comment

<< Home