...

View Full Version : need help creating themes



katz42
12-06-2008, 01:55 AM
I am new to javascript, and I am trying to create a drop down menu that will allow you to change the some of the css on the page, so that they can select different themes.

I am not sure how to create the function that does this. Here is what I have:

<html>
<head><title>Changing Page theme</title>
<script type="text/javascript">

function changeTheme();{

}

var theme1 = new Object(bgcolor,h2Color,h1Color)
{
bgcolor = "blue"
h2Color = "green"
h1Color = "orange"
}

var theme2 = new Object(bgcolor,h2Color,h1Color)
{
bgcolor = "red"
h2Color = "black"
h1Color = "white"
}


</script>
</head>
<body>
<form name="select_theme">
<p>
Choose a theme for this page. <br />
<select name="theme" onChange="changeTheme();">
<option value="theme1">Theme1</option>
<option value="theme2">Theme2</option>
</select>
</p>
</form>

</body>

</html>


Any help is greatly appreciated!

NickolasM.
12-06-2008, 02:38 AM
I know not much about Javascript but you could give this a try,

Replace

<body>
<form name="select_theme">
<p>
Choose a theme for this page. <br />
<select name="theme" onChange="changeTheme();">
<option value="theme1">Theme1</option>
<option value="theme2">Theme2</option>
</select>
</p>
</form>

</body>



With

<body>
<form name="select_theme">
<p>
Choose a theme for this page. <br />
<option onChange="changeTheme(); value="theme1">Theme1</option>
<option onChange="changeTheme(); value="theme2">Theme2</option>
</select>
</p>
</form>

</body>

See if that works.

rangana
12-06-2008, 12:29 PM
@NickolasM.,

That's erroneous.

option tag don't have onchange event.

For further reading:
http://www.w3schools.com/TAGS/tag_option.asp
http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION




@katz42,

You had typo:


function changeTheme();{


Also, I don't seem to understand what you are doing.

Where's the Object object? What's your goal BTW ?

katz42
12-06-2008, 05:23 PM
What I am trying to do, is to create a menu that when you select Theme 1, the javascript will call the css of that theme and change the background color and the colors of the h1 and h2 tags on the page. Then when you select Theme 2, those same properties change again to the theme2 css. It just needs to be something simple.

As I said before, I am new to javascript, so I don't get on you mean by "Where's the Object object?"

I think all I need is the code for the changeTheme function to call the themes from the select menu. I just don't know how to do this.

NickolasM.
12-06-2008, 08:11 PM
I know not much about Javascript but you could give this a try,

Replace

<body>
<form name="select_theme">
<p>
Choose a theme for this page. <br />
<select name="theme" onChange="changeTheme();">
<option value="theme1">Theme1</option>
<option value="theme2">Theme2</option>
</select>
</p>
</form>

</body>



With

<body>
<form name="select_theme">
<p>
Choose a theme for this page. <br />
<option onChange="changeTheme(); value="theme1">Theme1</option>
<option onChange="changeTheme(); value="theme2">Theme2</option>
</select>
</p>
</form>

</body>

See if that works.
I thought I saw it like that somewhere, I do not do Javascript. Tried to help.

rangana
12-07-2008, 02:55 AM
Might help:
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum