JavaScript: My Text Size
This nifty little tool has its origins from the now retired Netscape's DevEdge web site (http://devedge.netscape.com/). Its purpose is to give the user, or visitor to your site, the ability to adjust the font size to one that is comfortable for their reading style.
You should note that the font size adjustment is never permanent, and can be reset to the design's normal size at any time. However, what this nifty little tool will do is allow the visitor to set the font to a size they prefer, and have all the pages of the site using this tool viewed with the new font size.
Shown here is the script in action. The 'Plus' symbol link [+] will increase the font size, the 'Minus' symbol link [–] will decrease the font size, and the 'N' letter link [N] will restore the page back to the Normal font size of the design.
How it Works
Because of how this JavaScript tool works, the browser will need to support: JavaScript (JS) for the interaction and adjustment controls, Cascading Style Sheets (CSS) for the actual font scaling, and Browser Cookies to save the user's chosen font size for use throughout the site.
If JS is not supported no controls or adjustments will be made to the page. If CSS is not supported the size adjustments will not be made to the page. Finally, if cookies are not supported the users settings cannot be saved and used from page-to-page throughout the site.
Using the Script
Using the script is rather simple, but you will need to add a few items to all your pages to use it.
Download the Script
You might want to download the My Text Size script (4kB Zip file) now so you can experiment with it. A copy of this example and instruction page is included with the script.
Add the JavaScript:
Add the script to all your pages, referencing to the file where you have placed it in your site structure. This is a single line of code added in the <head> of the web page.
<script type="text/javascript" language="javascript" src="http://MYWEBSITE/my-textsize.js"></script>
(Remember to replace MYWEBSITE with the address and location of the script in your web site.)
Provide the controls:
The script won't actually do anything till you give the visitor access to the controls. The code we use simply makes use of JavaScript to write a centered division with the three links. We are using JavaScript itself to write the controls to the page, and we do this for a good reason.
In this JS call we first test to see if the browser will support the tool before offering the controls to use the tool. Implementing the tool in this manner avoids browser support problems where controls are presented that do not work.
Using a little creativity it is very simple to change the way this block is presented, or even incorporate the controls as part of your site design. Here is our implementation of providing the controls from the above example:
|
<script type="text/javascript"><!-- if (document.cookie && (document.documentElement.style || document.body.style)) { document.write("<div id=\"myTextSize\">My Text Size: "); document.write("<a onclick=\"myTextSize('decr');\" title=\"Shrink text size\">[–]</a>"); document.write(" <a onclick=\"myTextSize('reset');\" title=\"Normal text size\">[N]</a> "); document.write("<a onclick=\"myTextSize('incr');\" title=\"Enlarge text size\">[+]</a>"); document.write("</div>"); } // --></script><noscript> <p>Sorry, your browser does not currently support JavaScript. JavaScript support is needed to use the JavaScript tool.</p> </noscript> |
Remember to replace the <noscript> message with one that fits with your site. Our message is for the tutorial page.
Adding some presentation:
Once you have the script added and working, you might want to adjust how it looks. By adding a little CSS to your site, you can adjust the colors and presentation of your new site tool. Here is what we are using in this example:
|
<style type="text/css"><!-- div#myTextSize { padding: 0.25em; text-align: center; background: #eee none; } div#myTextSize a { padding: 1px 1px 3px 1px; font-weight: 900; font-size: 80%; background: #603; color: #eee; cursor: pointer; cursor: hand; } --></style> |
