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!
Gsx_EclipseAsked:
Who is Participating?
 
kevp75Connect With a Mentor Commented:
it's easy enough to do.

take the target="_blank" out of the links, and do a response.redirect("yourpage.ext") on the style.asp page.

No matter what how you do it, you will have to have the page refreshed in order to load the new css stylesheet
0
 
kevp75Commented:
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
0
 
Gsx_EclipseAuthor Commented:
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!
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
kevp75Commented:
0
 
kevp75Commented:
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>&nbsp;</td>
        <td>&nbsp;</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>&nbsp;</td>
        <td>Normal Text </td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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;
}
0
 
Gsx_EclipseAuthor Commented:
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!
0
 
Gsx_EclipseAuthor Commented:
Thanks for all your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.