PDA

Click to See Complete Forum and Search --> : dynamic website with choosing font etc

angelina
11-28-2003, 12:22 PM
Hello everyone.
I have to create 1 page with 4 drop down fields where user can choose font, font size, font color and background color.
Then the user hits submit button and the text (which is already viewable when entering page) changes to whatever the
user chose.

I would be so greatful if anybody would know something how to do that, as I have to be done with it this weekend as it's a homework for school. And I browsed the web already but I can't find anything that might help me.

thank you so much
angelina
Vladdy
11-28-2003, 08:13 PM
Since it is a homework, giving you a complete code would be just wrong. If you want help, post what you got so far and then people will hint you in the right direction.
For inspiration you can check out customization wiget on my site (gecko or IE6 required)
ray326
11-28-2003, 08:41 PM
A List Apart and Netscape Developers Edge both have articles related to what you need to do.
angelina
11-29-2003, 11:53 AM
Ok, This is what I got so far. I know I somehow have to call the function in the table.

Thanks,
angelina


<script>

function changeFont();
{
document.getElementById("text").document.forms[0].elements[0].value
}
function changeSize();
{
document.getElementById("changeSize").document.forms[0].elements[1].value
}
function changeColor();
{
document.getElementById("fontColor").document.forms[0].elements[2].value
}
function Bgcolor();
{
document.getElementById("bgColor").document.forms[0].elements[3].value
}
</script>
</head>

<body>
<form action="" method="get" onSubmit="changeFont();" "changeSize();" ""changeColor();" ""BgColor();">
<select name='font'>
<option value='changeFont()'>Select Font</option>

<option value="arial">arial</option>

<option value="times">times</option>

<option value="helvetica">helvetica</option>

</select>

<select name='size'>
<option value='changeSize()'>Select Size</option>

<option value="12">12</option>

<option value="24">24</option>

<option value="42">42</option>

</select>
<select name='color'>
<option value='changeColor()'>Select Color</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="pink">Pink</option>
<option value="purple">Purple</option>
</select>
<select name='background'>
<option value='BgColor()'>Select Background Color</option>

<option value="black">black</option>

<option value="orange">orange</option>

<option value="yellow">yellow</option>

</select>
<input name="submit" type="submit">
</form>

<table width="74%" border="5" id="table">
<tr>
<td width="29%"><img src="robbielive.jpg" width="165" height="220"></td>
<td width="71%"><img src="tattoo.jpg" width="164" height="250"></td>
</tr>
<tr>
<td colspan="2" id="text"><p><H3>Angels</H3>
<em>http://www.robbiewilliams.com </em>
<p>I sit and wait<br>
Does an angel contemplate my faith?<br>
And do they know<br>
</tr>
</table>
</body>
</html>