EasyDynFont is a Javascript that allows users to resize the font and choose the font face of the current HTML page and store the settings in a cookie. This allows users with impaired vision to access the site easier.
You are seeing this very light version of the page, as you are using an outdated
browser!
Onlinetools.org is done in XHTML 1.0 and supports CSS 2.0, please upgrade your
browser if you want a better version of this site.
Thank you, please help us developers keep up with the industry rather than patching our code for outdated applications.
EasyDynFont is a Javascript that allows users to resize the font and choose the font face of the current HTML page and store the settings in a cookie. This allows users with impaired vision to access the site easier.
Accessibility of websites will become increasingly important in the nearer future. To allow users to change the font size of your HTML page can be achieved by using em or percentage as the font unit in your stylesheet.
This allows people to set the font-size of their browser to bigger and your page will comply with that.
Now, as not everybody knows how to change the font setting of their browsers, a nicer approach to offer that functionality is to have a panel that allows users to change the font size and the font face without reloading the page.
EasyDynFont gives you this chance simply by changing some variables and using it in your site.
It's a collection of DOM Javascripts that allow the resizing of the body font, to change it to another font face and to store all of it in a cookie.
Unzip EasyDynFont. See index.html for information.
Using EasyDynFont without knowing Javascript
To use EasyDynFont simply add a
in the head part of your page and initialise it in your body tag via
Then add a
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:
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.
Using EasyDynFont as a Javascript developer
First: if you don't want to use the checkbox for no saving, delete line 54 in the easydynfont.js
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.