asked on

Increase/Decrease Font Size

Hello,

I am trying to create an "Adjust Font Size" feature that looks and functions exactly like the one on this page: http://sports.espn.go.com/ncf/news/story?id=2503365.

Here are the features that I would like to include:

1. It needs to be cross browser compatible
2. I would like it to be developed using ASP dynamic stylesheets
3. Ideally I would like to set this up so that the user can select one of four small images, with each one triggering a different font size.
4. Through the use of cookies and ASP I would like the font that the user selects to be remembered

If someone can setup an example like above, it would be greatly appreciated!

Regards!

kevp75

easiest way would be to use different style sheets, then drop a cookie say with the bigger style sheets name, then have you style sheet referenced by it.

<%
styleSheet = request.cookies("styleSheet")
if styleSheet = "" OR ISNULL(styleSheet) then
styleSheet = "/default.css"
end if
%>
<link href="<%=styleSheet%>" rel="stylesheet" type="text/css" />

have your links popup a page to drop the cookie:<a href="/style.asp?style=1" target="_blank">Style 1</a>

and on style.asp

<%
style = request.querystring("style")
Select Case style
Case "1"
response.cookies("styleSheet") = "/default.css"
Case "2"
response.cookies("styleSheet") = "/bigger.css"
'etc....
End Select
%>
<script language="JavaScript">
window.opener.location.reload();
window.close();
</script>

HTH

Gsx_Eclipse

ASKER

HTH,

Thank you for your reply. Is there anyway that you can possibly setup a working example of this for me so that I can see it in action. I am new to ASP and this will help me greatly.

Thanks!

kevp75

sure:
http://www.07th.com/

kevp75

the code is 5 pages, here they are....

default.asp:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<%
styleSheet = request.cookies("styleSheet")
if styleSheet = "" OR ISNULL(styleSheet) then
styleSheet = "/style.css"
end if
%>
<link href="<%=styleSheet%>" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td><a href="/style.asp?style=1" target="_blank">size 1</a>, <a href="/style.asp?style=2" target="_blank">size 2</a>, <a href="/style.asp?style=3" target="_blank">size 3</a> </td>
</tr>
<tr>
<td> </td>
<td>Normal Text </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

style.asp:
<%
style = request.querystring("style")
Select Case style
Case "1"
response.cookies("styleSheet") = "/style.css"
Case "2"
response.cookies("styleSheet") = "/bigger.css"
Case "3"
response.cookies("styleSheet") = "/biggest.css"
'etc....
End Select
%>
<script language="JavaScript">
window.opener.location.reload();
window.close();
</script>

style.css:
body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: small;
      line-height: 1.2em;
      margin: 0px;
}

bigger.css:
body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: medium;
      line-height: 1.2em;
      margin: 0px;
}

biggest.css:
body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: large;
      line-height: 1.2em;
      margin: 0px;
}

Gsx_Eclipse

ASKER

Hello,

This is getting close to what I am looking for. Is there anyway that you can redesign slightly so that it does not have to temporarily load a new window which then refreshes the current one the user is on. Instead when a user clicks on one of the four options can it load without resfreshing the page, or can it just refresh the current page?

Thanks!

ASKER CERTIFIED SOLUTION

kevp75

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gsx_Eclipse

ASKER

Thanks for all your help!