It happens to you too, even if you don't want to admit it.

This happened to me the other day actually, I mistakenly named a variable in my Javascript code "status".  This as it turns out was a big mistake.  The code I wrote ran fine in Firefox but when I flipped over to Internet Explorer to test nothing was working.  After an embarrassingly long time trying to find the error there it was, and to fix it all I had to do was change the variable name.

So in my function I had something like:

status=objectRef.innerHTML;

The problem is for some unknown and seemingly unfixed reason Internet Explorer references the variable status over to the window.status object.  Window.status is the text that displays in the status area at the bottom of your browser.  So if you set the variable status to a value in side your function the status area in your browser changes as well.

Now I could understand if this was just another IE6 browser quirk, but IE7 is affected as well. I haven't tested this on IE8 but this could be a problem here too.

It makes we wonder how many other keywords could be mapping to other place in the DOM.  Perhaps I will do some testing and check back in another post.  For now I will leave you with some example code, so go ahead and fire up that rusty IE6 or IE7 and I'll show you a neat trick.

 
<script>
	function statusTest(){
		obj=document.getElementById("mystatus");
		status=obj.innerHTML;
		alert("Now look at your status bar");
	}
</script>
 

 
<div id="mystatus" style='display:none'>I shouldn't be in your status bar should I?</div>
 
<a href='#' onclick='statusTest();return false;'>Prove my Point</a>
 

Try it out...

Prove my Point

So lesson learned always name your variables using detailed naming conventions.

If you want to read more about PNG's and IE6 read this post.

Instead I would like to show a technique that I have used recently to create dynamic interfaces using a minimal set of graphic files.

Here is the problem I'm trying to solve.  I have a site that has a wonderful gradient Menu bar/ Nav Panel/ Box/ whatever that needs to change color or have multiple colors.  Now what you could do is make a bunch of different back grounds for each color you want or (my technique) have a transparent PNG cover the solid CSS based background color and simply change the color in CSS to match.

Here is an example of what a typical transparent nav bar will look like...

In black..

In Blue...

In Yellow...

In Purple...

The only thing different in these examples is the Color code in the CSS

The first step in this process is to create the PNG file.  This is actually harder than you may think.  I use fireworks for my graphic design needs so I wont give you specifics but the technique should be similar in all graphics programs.

What you need to do is create a background image that is the same height as the nav bar you want to make. In this case the file I created is 1024 x 30 pixels.  The important part is not the size make sure you set your background to be transparent, not a solid color.

Next I make a layered background box so I can see what the gradient will look like. Then create a white box and apply a gradient to it.  You will want to adjust the opacity of the gradient at different sections to change the look, do not simply choose the color you want it to fade to.  So at every point in your gradient you should have the SAME color only different opacities. In my example the top of the transparency layer is 70% and by the middle of the graphic the opacity is 0%.

Next we have to code it in HTML and CSS.  Of course this would be a decidedly simpler process if you didn't have to account for IE6, but we still do so here it is.

HTML

 
<div id="baseLayer" style="background-color:#000000;">
<div id="transparentLayer">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
</div>
 

CSS

 
#baseLayer{
position:relative;
width:800px;
height:30px;
}
 
#transparentLayer{
position:absolute;
top:0px;
left: 0px;
width:800px;
height:30px;
background-image:url('/images/transparentPNG.png');
}
 

Now the hack for IE6

 
* html #transparentLayer{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/transparentPNG.png', sizingMethod='scale');
 
}
 

Now I only showed you examples of the code that outlines the technique. More css was required to make this example play nice. Please feel free to examine the full CSS for my examples above, also go ahead and download the transparent PNG. Looking at it is probably much simpler than trying to explain what I did in words.

I hope you enjoyed my first post. Although I wont be posting often, when I do my intentions are for it to be significant ones.