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.

open or close right navigation

EasyDynFont

Advertisement:
Version History
Short information
Restrictions
Requirements
Long Information
Installation notes
Usage notes
Demo URLs


Category: Javascript Version:1.0
Last page update:14.04.2003

»Download EasyDynFont.

»Launch EasyDynFont.

Version History

- 1.0 Initial release

Short information

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.

back up

Restrictions

- Do not resell it.
back up

Requirements

- Browser with Javascript
- HTML page with CSS font settings in percent or em.
- Cookies enabled.
back up

Long information

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.

back up

Installation Notes

Unzip EasyDynFont. See index.html for information.

back up

Usage Notes

Using EasyDynFont without knowing Javascript

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.

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

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.

back up

Demo pages

- Testpage
back up


Search:

 

Font:

Click to decrease fontsizeClick to increase fontsize

Text-colour:


Background:


sponsored by :

NWU

Help Onlinetools.org

Help onlinetools.org, donate via paypal

Partners

easyPHP

icons

Link to us

copy the code here:


Powered by EasyCMS