CodeDeveloper.net | A Site For And By Web Developers

elasticFonts

Download elasticFonts

Description

elasticFonts is a plugin that allows the user to change the font size within the body tags of their
page. It has many admin features for configuration that allow a good amount of flexibility for
Wordpress sites. Text changes are done via jQuery. The jQuery.cookie plugin is also used to
maintain the user selection throughout a site.

This plugin was developed as a tutorial at CodeDeveloper.net and is my first attempt at a
Wordpress plugin. It was born of ideas from other sites as well as my personal involvement
working with the visually impaired. I hope that people find the plugin enjoyable  Please link
to CodeDeveloper.net if you find the plugin useful or if you are so inclined become a
contributor to the site.

Installation

1. Download the zip file and extract the contents.
1. Upload the ‘elasticFonts’ folder to your plugins directory (wp-content/plugins/).
1. Activate the plugin through the ‘plugins’ page in WordPress.
1. Configure the plugin via the admin menu ‘Settings->Elastic Fonts if so desired

Changelog

1.0
Initial Release

Update Values Section

The update values section of the admin should not be used by most sites. What it is used for is when
a site (such as the current CodeDeveloper.net theme) has page elements that have a dynamic height.
The way the feature works is it will take an element and change it’s height by subtracting a bottom
elements position from another elements position. For instance, the content area of CodeDeveloper.net has
a border that is generated dynamically (the left and right side in this case.) To determine the heigh of this
element after a font change we must measure the pixels from the upper corner of the element to the lower.

The update values section used jQuery ajax to resize the given element. Notation for this section follows
the following syntax:

*.element-to-adjust,.bottom-element-name,.top-element-name|.second-element-to-adjust,.second-bottom-element-name,.second-top-element-name*

Basically it expects 3 element classes seperated by commas. Each line should be seperated by the | character.

Download elasticFonts

No comments yet.

Leave a Reply

Theme Design by devolux.nh2.me