Changing DIV, background color

[altendew]

Hey right now I got my <div> displaying a background color.. I have a drop down list of color codes, and when going down the list I want the background color of the <div> tag to change so they can preview it.

This is the current code I have:
<select name="backgroundColor" onChange="document.backgroundColor.style = \"background-color: 000000\";">

......

<div id="backgroundColor" style="width: 20px; height: 20px; background-color:#003366; layer-background-color:#003366; visibility: visible"></div>

So how do I get these two to work together

 

[BillyRayPreachersSon]

Something like this should work:

onchange="document.getElementById('backgroundColor').style.backgroundColor = this.value;"

This assumes that the values of each of your options is valid CSS colour syntax, for example:

<option value="#000000">Black</option>
<option value="red">Red</option>

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[altendew]

Well thanks I got it to work, but is this cross broswer functional?

 

[BillyRayPreachersSon]

Yes.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[altendew]

This isnt a big deal.

But when you press down button to go through the select list in Opera it doesnt change. Only when you click on the item. Works in all other browsers well though.

 

[BillyRayPreachersSon]

From what I can tell, the only browser (at least out of IE, NN, FF, and Opera) to fire the onchange event on a keypress - but BEFORE the control has lost focus - is IE.

This means that FF, NN, and Opera all behave the same.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[altendew]

If anyone is intrested I got it to work in all browsers by using.

<select name="backgroundTextColor" onKeyUp="document.getElementById('backgroundTextColorLayer').style.backgroundColor = this.value;" onKeyDown="document.getElementById('backgroundTextColorLayer').style.backgroundColor = this.value;" onchange="document.getElementById('backgroundTextColorLayer').style.backgroundColor = this.value;">

 

[cLFlaVA]

ain't nothin' like neat-n-tidy, reusable code.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]