O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Offering Body Text Size Choices to Users

NN 6, IE 5

Problem

You want to let users choose the relative font size for the content of the page.

Solution

Create a user interface element that lets users select from three or four different font sizes. Each choice invokes the changeSizeStyle( ) function shown in the Discussion. This function enables a style sheet whose ID is passed as an argument and disables the rest. All of the related style sheets apply themselves to the body element. As an added bonus, the changeSizeStyle( ) function calls upon the cookies.js library (Recipe 1.9) to preserve the setting to be applied to the page the next time the user visits.

Discussion

This is a three-part solution, involving HTML for the font size controller, style sheets, and scripts. The result is a small controller on the page that lets users select from three font size bases upon which the rest of the page renders, as shown in Figure 12-1.

Text size controller for users

Figure 12-1. Text size controller for users

HTML for the controller defines one surrounding div element and several nested img elements. Three of the img elements are surrounded by links, whose onclick event handlers invoke the changeSizeStyle( ) function. To prevent blank space from occurring between the images, avoid source code line breaks between elements. The following HTML code inserts line breaks inside element tags:

<div id="textSizer"> <img src="fontSizer.jpg" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required