homepage Welcome to WebmasterWorld Guest from 107.21.135.68
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Allowing the user to choose various style elements
options in drop-down menu affect page in real time
mmmwowmmm




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

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

 

garann




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

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>

garann




msg:3067640
 5:09 pm on Aug 31, 2006 (gmt 0)

Oops, I just noticed a typo in what's above.
backgroundcolor should be backgroundColor. Sorry. :)
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved