Change font size on the fly

[Jon7800]

Good evening,

Does anyone know of a good tutorial where I could learn how to change font size on the fly. abcnews has a good javascript app that does it.
Check it out in the breadcrumbs line of this article: http://abcnews.go.com/International/wireStory?id=1372498&page=2

any direction or ideas with this would be appreciated. I basically want it like abcnews, the user can have 4 choices of font size...

Thanks!
Jon

[_theworks]

you could make seperate CSS classes like .largetext .smalltext .normaltext whatever.. then have buttons on your site that link to the same page but with like
index.php?fontsize=large then in the php making the html just have like

if (!isset($_GET['font']) {
//print text the normal size
echo '<p class="normaltext">'.$content.'</p>';
}elseif ($_GET['font'] == "smalltext") {
//print text the small size
echo '<p class="smalltext">'.$content.'</p>';
} elseif ($_GET['font'] == "largetext") {
//print text the largel size
echo '<p class="largetext">'.$content.'</p>';
}

this is just off the top of my head

[matto]

There are several aproaches:

(1) js-only: on font-resize click call a javascript function which iterates through the DOM (tree) structure of the HTML document, altering each font-size attribute where appropriate.

(2) php-only: in your stylesheet (say, style.css), replace font-size indications with markups, e.g. font-size=@{SMALL}.
write a php script (e.g. style.php) which takes a "font sizes no." parameter from the session (for example: "1" => small=8pt, medium=10pt, big=12pt and "2" => small=9pt, medium=11pt, big=13pt etc). this script reads in style.css and replaces the markups according to the font size setting stored in the session (default value = "normal" size).
include the style.php call in your page headers (<link rel="style.php" ...>). whenever a user clicks "change font size to xxx", the value in the session is altered.

(3) mixed css/php approach: same as in (2) but use only one (or very few) base font size(s) (which have an - example: - @{BASE_SIZE} markup) and derive the rest from those using the "em" size unit. this is a css measure unit which means "% size proportional to base font".

[_theworks]

matto:I wouldnt recomend using your js method as using font tags in html isnt exactly semantic.

but i like the other 2 😃

[Weedpacket]

...or hold down ctrl and roll the mouse wheel 😃

[Rodney_H_]

This is a pretty good and strait forward article that may help: http://www.alistapart.com/articles/relafont/