Javascript to change font from pulldown menu

RickyM · #1 03-21-2006, 12:19 PM

I have got this far in the HTML file:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>P7_1</title>
<script type="text/javascript" language="JavaScript" src="P7.js">	
</script>

<link rel="stylesheet" type="text/css" media="screen" href="P7.css" />
</head>

<body>
<h4>France, a beautiful and historical country...</h4>
<div id="france" style="width:70%; text-align:justify">
France is the largest country of Western Europe in area.  It covers about  213,000 square miles (552,000 square kilometers).  
<br /><br />
Paris, the capital and largest city of France, is one of the world's great cities.  A world capital of art and learning. Every year, millions of tourists visit such famous Paris landmarks as the Cathedral of Notre Dame, the Eiffel Tower, and the Louvre - one of the largest art museums in the world.  
<br /><br />
There is much more to France than just Paris, however.  The snow-capped Alps form the border between France and Italy.  Sunny beaches and steep cliffs stretch along the French coast on the Mediterranean Sea.  Fishing villages dot the Atlantic coast of northwestern France.  The peaceful, wooded Loire Valley has many historic chateaux.  Colorful apple orchards, dairy farms, and vineyards lie throughout much of the countryside.  
<br /><br />
France has a long and colorful history.  Julius Caesar conquered the region.  When Rome fell, the Franks and other Germanic tribes invaded the region.  France was named for the Franks.  By the A.D. 800's, the mighty Charlemagne, king of the Franks, had built the area into a huge kingdom.  In 1792, during the French Revolution, France became one of the first nations to overthrow its king and set up a republic.  Napoleon Bonaparte conquered much of Europe before he finally was defeated.   
<br /><br />
France is not only a beautiful and historic country, it is also one of the worlds richest and most powerful countries. France has great automobile, chemical, and steel industries.   
</div>

<form id="fontform" action="someaction.cgi" style="position:absolute; left:750px; top:50px">
<!-- selection pull down menu -->
<select name="fontchanger" ...>
<option value="Font">choose a font</option>
<option value="Courier">Courier New</option>
<option value="Garamond">Garamond</option>
<option value="Tahoma">Tahoma</option>
</select>
<br /><br /><br /><br /><br />
<select name="choosefont" ...>
<option value="Fontsize">choose a font size</option>
<option value="fontsmall">small</option>
<option value="fontmedium">medium</option>
<option value="fontlarge">large</option>
</select>
</form>

</body>
</html>

What I have to do is, from the select boxes shown below in the screenshot; one for size and one for font, when a font is chosen from the pulldown menu, the text in the paragraph changes to that respective font/size.

http://files.dmusic.com/music/r/i/rickym/france.JPG

I think in the javascript file that a case statement may work, and the onchange handler, but I have no idea how to implement it. Also I have to do all the formatting in a CSS file too.
The fonts are courier new, tahoma and garamond. The text sizes are 12, 14 and 16.(small, medium & large).

If anyone knows how I can do the javascript then I would be most grateful - I'm basically useless when it comes to javascript.
Thanks

Rick

RickyM · #2 03-21-2006, 04:20 PM

anyone?

Rags123 · #3 03-21-2006, 04:36 PM

I would suggest,

put all the permutations of your cases in a css file.

Then in the script file, depending on the selection change the className of the div tag...

Eg:
Css:
.tahoma12
{font-family:Tahoma; font-size: 12px;}

.tahoma14
{ font-family:Tahoma; font-size: 14px;}
.garamond12
{font-family:Garamond; font-size: 12px;}

and so on

onChange, call the script and depending on whatever is selected in your dropdowns, set the cssClass of the div tag 'france'.

RickyM · #4 03-21-2006, 04:49 PM

ok thanks, is there anyway you could show me a quick example of that in a script file? Im not quite sure what you mean.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)