Resizing the Font through Buttons/Links?

Crow555 · #1 (**permalink**) Mar 28th, 2008, 16:18

I've been asked to make the fonts on our site change size when a button corresponding to that size is pressed. I've searched google and all I can find it tips on how to go into the view menu of IE and changing it that way...

Anyway, a good example of this would be this website...

http://www.webcredible.co.uk/

From it's source, it's using php to change the styles involved but I can't get at that code. Anyway, I'm using ASP with CSS so if I can keep it within those techs, great; if not, I could dabble with something else.

I'm fairly new to web work so any ideas on how i approach this would be great. Thanks.

masonbarge · #2 (**permalink**) Mar 30th, 2008, 16:47

I don't know ASP, but the PHP solution is quite easy (at least conceptually) and should be quite similar other than the syntax. (Really, this would be fun to figure out if you didn't have to do it for work, LOL. There must be 6 different ways to do it.)

You could use a form. I give you an example using a GET value supplied in a link and write a cookie for you while I'm
at it

Put your font sizes in separate CSS files. Let's have four options, integers 1-4, corresponding to four font-stylesheets: small, normal, large, extra_larrge.

Then high up in your header (might as well put it above the DOCTYPE declaration) do a handler and cookie to set a fontsize variable $fs, using a previous cookie only if there is no new GET value (so the user can change the cookie):

PHP: Select all


if(isset($_GET['fs'])) {
    if(preg_match('/^[1-4]$/', $_GET['fs']))  {
        $fs=$_GET['fs'];
        setcookie( 'fs', "$fs", time()+60*60*24*120 );
    } else {
        $fs=2; //default
    }
} elseif(isset($_COOKIE['fs'])) {
   $fs = $_COOKIE['fs'];
} else {
    $fs=2;
}

Now let's make a url which depends on the value of $fs with a switch or multiple if/elseif construct.

PHP: Select all


if($fs==1) {
    $fontsize='style_font_sm.css';
} elseif ($fs==2) {
    $fontsize='style_font.css';
} elseif ($fs==3) {
    $fontsize='style_font_lg.css';
} elseif ($fs==4) {
    $fontsize='style_font_xlg.css';
} else {
    $fontsize='style_font.css'; //default
}

Now, after the main stylesheet link, put a second link whose value is determined by the value of $fontsize:

PHP: Select all


<link rel="stylesheet" href="./' . $fontsize . '" type="text/css" title="style" />

Our final step is to display the link that the user will click to change the font-size. I like to use "Aa", styled in different sizes, as a visual aid. So make CSS classes in your main stylesheet for say 8pt, 10pt, 12pt, 14pt (use whatever values you want, although they don't have to match the stylesheet exactly). Then simply pop something like this wherever you want it to appear, with appropriate styling (eg you will almost certainly want these to float):

Code: Select all

<span class='pt8'><a href='$PHP_SELF?fs=1'> Aa</a></span>
<span class='pt10'><a href='$PHP_SELF?fs=2'> Aa</a></span>
<span class='pt12'> <a href='$PHP_SELF?fs=3'> Aa</a></span> 
<span class='pt14'><a href='$PHP_SELF?fs=4'> Aa</a></span>

Obviously, the last bit will have to be an echo inside php tags. Otherwise you'd have to do:

Code: Select all

<span class='pt14'><a href='<?php $PHP_SELF?fs=4?>'> Aa</a></span>

Not tested but there shouldn't be more than minor syntax errors.

Crow555 · #3 (**permalink**) Mar 31st, 2008, 16:33

That's great mason, thanks for the tips so far.

I'm not to hot on PHP so I opted for Javascript. This is what I've come up with so far ...

HTML: Select all

<html>
<head>
<title>Test Text Resizing</title>
<link rel="stylesheet" href="fontSmall.css">
<link rel="stylesheet" href="fontNormal.css">
<link rel="stylesheet" href="fontLarge.css">
<!-- Last loaded stylesheet acts as default -->
<link rel="stylesheet" href="fontNormal.css">
<script language="JavaScript">
<!--
var doAlerts=false;
function changeSheets(whichSheet){
  whichSheet=whichSheet-1;
  if(document.styleSheets){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
      if(i!=whichSheet){
        document.styleSheets[i].disabled=true;
      }else{
        document.styleSheets[i].disabled=false;
      }
    }
  }
}
//-->
</script>
</head>
<body topmargin="50" leftmargin="100" marginheight="5" marginwidth="5" bgcolor="#ffffff">
<FORM>
<span class='pt8'><a href='javascript:changeSheets(1)'> Aa</a></span>
<span class='pt10'><a href='javascript:changeSheets(2)'> Aa</a></span>
<span class='pt12'> <a href='javascript:changeSheets(3)'> Aa</a></span> 
<br>
<h1>Category 1 Header</h1>
<br>
<h2>Category 2 Header</h2>
<p>This is a paragraph</p>
</FORM>
</body>
</html>

The javascript I've found on another site for changing stylesheets but it would be nice to be able to now hold onto the changes using a cookie. Like I said before, I'm very much a novice here so any help would be great.

Also, accessibility-wise, what are the implications of using a scripting solution like javascript, does anyone know?

Thanks again.

Aso · #4 (**permalink**) Mar 31st, 2008, 17:35

The best approach (but also, the most consuming) is to code a PHP (or any server side language) script that allows for stylesheet switching.

Then, add Javascript on top of this to provide some added behaviour to those that can support it.

The most important thing you can do, is hard-code the main stylesheet, then allow for changing of others. Believe it or not, I have seen developers rely solely on Javascript to attach a stylesheet!!

EDIT: So long as your site is accessible and readable with the default stylesheet, then accessibility is not going to be an issue. It might even be an idea, that if you are relying on Javascript switchers, to insert them dynamically when the DOM is ready. That way, Javascript disabled users won't be given the (redundant) option.

Crow555 · #5 (**permalink**) Apr 3rd, 2008, 16:51

Ok done I think!

Sorry for the delay. Like I said, I'm very new to webwork. Below is an example of a test page I made up. I post back the page to load up a new stylesheet and it should resize the text.

HTML: Select all

<% @ language="vbscript" %>
<% Option Explicit %>
<% Response.Buffer=True %>
<%
 Dim strFontTypeStyle
 
 strFontTypeStyle = Request.Cookies("style")
 If UCase(Request.ServerVariables("REQUEST_METHOD")) = "POST" Then
  strFontTypeStyle = Request.Form("style")
  Response.Cookies("style") = strFontTypeStyle
 End If
 If strFontTypeStyle = "" Then
         strFontTypeStyle = "Change 2"
     End If
%>
<html>
<head>
<title>Post back</title>
<% If strFontTypeStyle = "Change 2" Then %>
<link href="fontNormal.css" rel="stylesheet" type="text/css"/>
<% ElseIf strFontTypeStyle = "Change 1" Then %>
<link href="fontSmall.css" rel="stylesheet" type="text/css"/>
<% ElseIf strFontTypeStyle = "Change 3" Then %>
<link href="fontLarge.css" rel="stylesheet" type="text/css"/>
<% Else %>
<link href="fontNormal.css" rel="stylesheet" type="text/css"/>
<% End If %>
</head>
<body topmargin="50" leftmargin="100" marginheight="5" marginwidth="5" bgcolor="#ffffff">
<form action="<%= Request.ServerVariables("SCRIPT_NAME") %>" method="post">
<input type="submit" name="style" value="Change 1" text="Small"/>
<input type="submit" name="style" value="Change 2" text="Normal"/>
<input type="submit" name="style" value="Change 3" text "Large"/>
<br>
<br>
<P>Some sample text</p>
</body>
</html>

You'll need some aptly name style sheets to try it but I hope this helps someone as there are plenty of overly complicated ways on other websites that I don't have the time to understand how to go about it.

Thanks again to Mason and Aso for their helpful suggestions.

Now onto a javascript alternative for those not silly enough to turn it off...

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Adding Links to buttons - problem	fourtheye246	Flash & Multimedia Forum	2	Jun 13th, 2007 06:29
resizing....	jjgamepro17	Web Page Design	3	Apr 18th, 2007 20:22
help with fwd/backwrd buttons affecting other buttons	typeofdoug	Flash & Multimedia Forum	5	Feb 4th, 2007 03:48
Buttons to update font style and colour help	Loobyt	JavaScript Forum	4	Jun 20th, 2006 20:55

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Resizing the Font through Buttons/Links?