Welcome to WebmasterWorld Guest from 54.147.212.98

Forum Moderators: open

Message Too Old, No Replies

Allowing the user to choose various style elements

options in drop-down menu affect page in real time

   
8:02 pm on Aug 30, 2006 (gmt 0)

10+ Year Member



Hello. I'm trying to create drop-down menus that will allow the user to choose from different style elements to be applied to the page. The idea is that they can select the background-color from one menu, and on another menu they can select the font color, and these style choices will be applied to the page instantly. What I have so far is this:

<head>
<style>
body {
background-color:#cccccc;
color:#000000;
}
body.aaa {
background-color:#000000;
}
body.bbb {
background-color:#ff0000;
}
body.ccc {
color:#ffffff;
}
body.ddd {
color:#ff00ff;
}
</style>
<head>

So here I have my classes set up. Now I want to create drop-down menus to allow the user to select from either "www" or "#*$!", and from either "yyy" or "zzz". I really don't know how to do this at all. What I tried was this (and feel free to laugh):

<select>
<option selected="selected">CHOOSE BACKGROUND COLOR</option>
<option value="aaa">BLACK</option>
<option value="bbb">RED</option>
</select>

<select>
<option selected="selected">CHOOSE FONT COLOR</option>
<option value="ccc">WHITE</option>
<option value="ddd">PURPLE</option>
</select>

Obviously I'm just feeling around in the dark here, but you can probably see where I'm going with this...
What I don't understand is how to make the user's selection actually affect the page. Is it some kind of "Onclick" thing? How do I make it so that the users selection actually affects the page in real time?

It seems like it would be something simple, but I haven't found it yet. Any help would be greatly appreciated - thanks!

Thanks,
Phil

12:13 am on Aug 31, 2006 (gmt 0)

10+ Year Member



You could do it pretty quickly like this (though you'd probably want this in a function for production code):


<select onchange="document.getElementById('IDOfElementToChange').style.backgroundcolor=this.value;">
<option selected="selected">CHOOSE FONT COLOR</option>
<option value="ccc">WHITE</option>
<option value="ddd">PURPLE</option>
</select>
5:09 pm on Aug 31, 2006 (gmt 0)

10+ Year Member



Oops, I just noticed a typo in what's above.
backgroundcolor
should be
backgroundColor
. Sorry. :)