Dynamic Font Size with CSS

[TheCandyman]

Anyone know of a tutorial that uses CSS to change the font size on the page? What i am looking for is like

http://www.digg.com

on the top right. I pulled out the code from that website to try and understand, but just need some additional examples or tutorials.

 

[OsakaWebbie]

I had to look at their code also, but much of what makes theirs complex is that they store a cookie of the user's last chosen size - if you don't care about that, the complexity goes way down; just pick which size you will always start with.

Make two CSS files - one has all your settings, and the second only has alternate font sizes for the classes that you want to affect (make sure the class names are identical). Then, in the header of your page, use code like this (this is straight from the digg.com site's source - change the names to suit you):

 <style type="text/css" media="all">@import "/css/digg2.css";</style>
 <link rel="alternate stylesheet" type="text/css" href="/css/digg2-compact.css" title="compact" disabled="true"/>

It just makes one active reference to a style sheet and another inactive one at the ready.

Then, this is what they had in the body of their page:

<a href="#" onclick="setActiveStyleSheet('compact'); return false;" title="Switch to Compact Mode" id="compact"><img src="/img/switch-compact.gif" width="29" height="22" alt="compact" /></a>
<a href="#" onclick="setActiveStyleSheet('normal'); return false;" title="Switch to Normal Mode" id="normal"><img src="/img/switch-normal.gif" width="29" height="22" alt="normal" /></a>

That just calls a Javascript function with a passed parameter of which size they want it changed to. I assume that somewhere they hide and show these two - I didn't notice where that code was, but it should be easy.

Then the Javascript... I admit theirs was a bit hard to read because there were no spaces or carriage returns, and the logic seems a bit convoluted, but here is the relevent function from their code, and my interpretation of what it's doing:

function setActiveStyleSheet(title){
  var i,a,main;
  for(i=0;(a=document.getElementsByTagName("link")[i]);i++){
    if(a.getAttribute("rel").indexOf("style")!=-1 && a.getAttribute("title")){
      a.disabled=true;
      if(a.getAttribute("title")==title)  a.disabled=false;
    }
  }
}

It searches through all the link elements in the document, until it finds the one that references the alternative stylesheet (it seems there might be a more direct way to do this, by putting an id on that element or something, but...). Then, for some reason they disable it first, and then if it's the one requested (i.e. matches the passed parameter) they enable it - that looks a bit awkward, but it works (I would have just said, "if it's the passed title, enable it, else disable it" - a little easier to follow).

The basic idea is that in CSS, if you have two definitions for the same class, any attributes repeated in the second one with different values override what was set by the first one. So you have two stylesheets, one that is always there and one after it that you can enable and disable in Javascript. When you enable the alternate, its font sizes override the settings in the first stylesheet, and when you disable it, only the first one remains and therefore you get your primary font sizes again. Does that help clear the mud?

 

[TheCandyman]

I guess if i didn't store a cookie then each page would load my default font size. But the cookie would retain whatever they click until it expires. Maybe i'll do a form submit when they click the font and from there have ASP do the cookie since i am more confortable making them in that language.

Know of any other sites that do this?

Thx by the way.

 

[OsakaWebbie]

No, that's the first one I've seen. I personally favor letting the user change the font size in their browser rather than hard-coding it - after all, if they like big they probably already have their browser set to big before they visit your site. But if you have layout that messes up with too many different sizes, I suppose that's something you have to consider.

 

[TheCandyman]

Found a simple one (finally)

http://www.dynamicdrive.com/dynamicindex9/textsizer.htm