This is a small test page to explain you how to implement EasyDynFont in your pages and to show what it does. To test the functionality, use the dropdown to the right, and the buttons "larger" and "smaller".
EasyDynFont works with every HTML page that has no elements with a fixed font size. To make it work, make sure that all the elements of the page have a font setting measured in "em" or "%" rather than pixels or points.
To use EasyDynFont simply add a
<script language="JavaScript" src="easydynfont.js"></script>
in the head part of your page and initialise it in your body tag via
<body onload="init()">.
Then add a
<script language="JavaScript">drawform();</script>
in the body of your document, where you want the form to change the size and font to appear.
The form has the following style-classes attached to it: dynform for the form element, dynselect for the dropdown and dynbutton for the buttons. Change these classes in your stylesheet to change the display to your likes
In the easydynfont.js file you can change the following:
var fonts="Arial,Times New Roman,Verdana,Courier".split(",");
var standardfont="Arial"
var standardsize="12px"
The names of the fonts can be deleted or added within the "", separate each with a ",". the next two settings are the standard settings which are applied when there is no cookie saved yet.
First: if you don't want to use the checkbox for no saving, delete line 54 in the easydynfont.js
nosave=document.dynform.nosave.checked
You have a few javascript functions to play with:
drawform() is the javascript function to write the HTML of the form used for non-Javascript savvy people.
init() initialises EasyDynFont, which means it checks if there is a cookie already set, and gathers the data from it, before applying the data to the current document. If there is no cookie set yet, the standard settings are applied and the cookie is stored for the first time.
addSize(add) adds "add" to the current font-size of the body. So if you send "1", the font gets bigger, and "-1" it gets smaller. Valid are any Integer values. If nosave is set to false the data is stored in a cookie afterwards.
setSize(add) sets "add" as the current font-size of the body. Valid are any Integer values. If nosave is set to false the data is stored in a cookie afterwards.
setFont(add) sets "add" as the current font of the body. Valid are any font names as strings. If nosave is set to false the data is stored in a cookie afterwards.
storeSize() saves the current settings in a cookie.
setCookie() and getCookie() are pretty standard Javascript functions to save and retrieve cookie data.