Creating alternative home pages using the <select> tag

**drhowarddrfine** · May 14 '07, 07:06 PM

The only way that would work is if your server has a script to respond to the form and replies with whatever selection/page they make. Another way is to let javascript handle the form but you'd have to ask on that board how to do that.

In that case, it would be even easier because then you'd only have to import a different stylesheet and not change the html at all.

**jhardman** · May 15 '07, 01:06 PM

Tom,

As someone who uses server side scripting, that looks like the easiest to me, you just need to set up your server to run scripts (which isn't that hard, depending on your server). the script itself would be very easy:
[code=asp]<%
if request.form("a ltHomepage") = "" then
css = "style1.css "
else
css = "style" & request.form("a ltHomepage") & ".css"
end if %>

<link rel="stylesheet " type="text/css"
href="<%=css%>" >
[/code]
The advantage of serverside scripting over client side is that it doesn't matter how well the user's browser supports the specific javascript function you use, although the javascript would probably work in most browsers.

Jared

**TomT** · May 16 '07, 06:42 PM

Jared,
Thanks for the reply. Because I know next to nothing about Javascript, I am still lost. Perhaps if I put the entire HTML code (short!) and the even shorter CSS code here, you can tell me how to write this. Once I have it down, I can make various different home pages.

The HTMLcode creates a web page that has only one field with three selections. The CSS code just change the background color.

[HTML]
<html>
<head>
<title> Home page </title>

<%
if request.form("a ltHomepage") = "" then css = "style1.css "
Else
css = "style" & request.form("a ltHomepage") & ".css"
end if %>

<link rel="stylesheet " type="text/css" href="style1.cs s">
</head>

<body>
<form action="#" method="#">
<p> Select a different home page:
<select name="AltHomepa ge">
<option value="">One</option>
<option value="">Two</option>
<option value="">Three</option>
</select>
<input type="submit" value="Go!"/>
</p>
</form>
</body>
</html>
[/HTML]

The CSS for style2.css is:

[CODE=css]
body {
background-color: red;
}
[/CODE]

The CSS for style1.css is:

[CODE=css]
body {
background-color: green;
}
[/CODE]

The CSS for style3.css is:

[CODE=css]
body {
background-color: yellow;
}
[/CODE]

Thanks,
Tom

**Greg Hudson** · May 17 '07, 10:05 PM

G'Day.
You could have a look at CSS ZenGarden - they do exactly what you are after (except on a MUCH bigger scale).

http://www.csszengarde n.com/

They also provide examples, and may also be able to supply you with an exact solution to your problem.

Regards, Greg.

**dragze** · May 18 '07, 11:17 AM

Hi Tom, well if all you want to do is load the same html but just apply a different stylesheet you can do this easily through a javascript. I am currently working on a project where i want the user to be able to select the stylesheet i.e. the look of the webpage from a menu box. See this thread http://www.thescripts.com/forum/thread648365.html, this thread includes the javascript used to change stylesheet, also the script creates a cookie and saves the users selected style. I do currently have a slight problem with the script that is if u change the page style using a hyperlink it all works fine and on all three browsers (IE, FF, Safari), however i want the user to select the style from a menu box this method only works in FF at the moment, but view the thread cause am trying to fix the mentioned problem.

p.s. dont worry if your not confident with javascript, i have given you everything you need in the linked thread and hopefully there will be the code to fix that problem i mentioned soon! :) If you have any problems or questions just ask me and i will try my best to help.

Originally posted by TomT

Hello,

I'd like to create several home pages, all with the same HTML code but different CSS settings. I would then allow the visitor to choose which home page to view.

This is pretty easy if I just use a series of links. But what I'd rather do is is create a one-field form using the <select> tag. This does not appear as simple to do.

Coding the HTML is simple:

Code:

<form action="#" method="#">
 <p> Select a different home page:
	<select name="AltHomepage">
		<option value="#">One</option>
		<option value="#">Two</option>
		<option value="#">Three</option>
		<option value="#">Four</option>
	</select>
	<input type="submit" value="Go!"/>
</p>
  </form>

But what do I use for the action, method and value attributes? Any ides that would help point me in the right direction would be much appreciated.

Thanks,
Tom

Creating alternative home pages using the <select> tag

Creating alternative home pages using the <select> tag

Comment

Comment

Comment

Comment

Comment