Click to See Complete Forum and Search --> : Writing & Testing if cookie is defined... to change user prefered font size.


jasonwsaz
04-17-2006, 07:01 PM
Ok heres what I need to be able to do... I've tried several differednt ways but I can't figure it out.

www.jasonschwab.com/music.cfm
This is the page that I would like to change. I created this as a list of music that I have.

I would like the user to be able to be able to change the font size. The webpage above currently has that capability, but when you rerun the search it reverts to the original font size. So what I *think* I need to do is to set a cookie each time a user changes font size, and then have a little script that checks to see if the cookie is defined when a new search is run... If a cookie is defined then use that value for the size of the font. I've tried this several times placing writecookie and readcookie functions but I just can't seem to figure it out.

Check out this link to ABC news. Notice that if you click (upper right) the little font button the font changes. Then if you go to another page it remembers your font size preference and uses it again.

Here is the code (simplified) from what I have on the website above (music list)...

So can someone show me how I would add the cookie thing to this..

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change Font Size with Cookies</title>

<style type="text/css">
#lyr {position:absolute; left:200px; top:120px; width:400px; font-size:12px;}
</style>

<script language="javascript">
function ChangeFontSize(id, size) {
document.getElementById(id).style.fontSize = size + "px";
}
</script>
</head>

<body>

<!-- Click one of these links to change the font size -->
<a href="#" onClick="ChangeFontSize('lyr','20')">Change to 20px</a><br>
<a href="#" onClick="ChangeFontSize('lyr','28')">Change to 28px</a><br>
<a href="#" onClick="ChangeFontSize('lyr','36')">Change to 36px</a>

<table id="lyr">
<tr>
<td>
1.)Change Font-Size
<br>
this is some things that I would like to do
</td>
<td>
2.) This is some more text
<br />
and just a little bit more
</td>
</tr>
</table>

</body>
</html>

Once again thanks to anyone that can help figure this out...