Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

font-size


Font Stack Tester

Submitted by MatMar10 on March 24, 2010 - 2:11am

Dynamically apply different font stacks and font sizes to elements of a page.

Fontscale

Submitted by Drywall on March 12, 2010 - 6:29pm

The jQuery Fontscale plugin is a module for jQuery that facilitates dynamically resizing the font size of specified elements. It supports sizing fonts up or down by configurable increments and units (pixels or percent). If the cookie jquery plugin is loaded, it also supports saving the modified font state via cookie. Font resizing is triggered by a click or other specified event.

PDK Accessibility: Dynamic font-size

Submitted by pdk on November 19, 2009 - 2:47am

This is a highly configurable accessibility plugin to control the font-size of your content dynamically.
See: Screenshot
This plugin changes the font-size of your content by clicking on a link i.e. 'a' tags (one each for increasing & decreasing the size).
You only need to specify the name of the container div or element of the content & need not specify every basic element like h2, p, span, etc. inside the container.
The font-size to the mentioned container must be specified in "px" in CSS (16px recommended but not compulsory). All the other elements inside must have font-sizes specified in either 'em' or '%'.

Font Cycle

Submitted by mike@openhousec... on November 12, 2009 - 6:40pm

A simple plugin that will cycle the font size for a matched element

HTML coding

Add the reset font size to your css file.

       html {font-size: 11px;}
     

Add an element to the page that will be used to change the font size.

<a class="changeFont" title="Increase font size" href=""&gt;increase font size</a>
        

Include the plugin file

Add the following underneath the jQuery script tag

            <script type="text/javascript" src="jquery.cyclefontsize.js"></script>
       

Initiate the plugin

Initialize code

              $('.changeFont').cycleFontSize({increaseEle: "#main-content p"});
       

Currently the default font size increase step is 2px

Created By Mike Buckley

Clip-Animation

Submitted by trixta on October 23, 2009 - 6:02am

This Plugin adds support to animate the clip-property. (additionally it normalizes reading the clip-style and font-size-property in IE)

Truncating Styled Text

Submitted by mdavidgreen on September 13, 2009 - 2:33am

Recently I had the need to truncate a section of styled HTML text so it would fit inside a container with a specific pixel width. You might have thought this would be something pretty easy to make happen with a little JQuery and some .css() and .width() commands.

You would have been mistaken. I know I was.

Among the tricky aspects was my desire that the text retain its styling, regardless of the width of the container. I also wanted it to truncate at the appropriate complete letter, rather than chop a word off in the middle of a letter. I wanted to be able to specify a string to use to indicate truncation (eg: “…”). I wanted the complete text to be preserved, and added to the element as a title tag so that it would be available to readers who hovered over the truncated text. And of course, I wanted it to work seamlessly across browsers.

Font Controller

Submitted by yettti on September 1, 2009 - 7:08am

Font Controller
Font controller is a lightweight font size controller... nothing much more to it.

Usage
Using font controller is simple, simply apply it to an element and it does the rest.
eg.

$("#fontmanager").fontsizemanager();
<div id="fontmanager"></div>

fontScaler - dynamic controlled font size

Submitted by marcup on August 26, 2009 - 6:28am

This plugin adds a font-scaling toolbar to your page. The font-scaling toolbar allows for dynamic user-controlled font-sizes throughout the whole page, or parts of it. fontScaler comes in 2 flavours: fixed increments (A|A|A) or variable increments (+|-).

fontReSizer.js dynamically creates a full configurable -a a a+ box

Submitted by JHMorales on January 20, 2009 - 8:41am

jQuery Plugin by Jorge H. Morales http://www.jhmorales.es 17/01/2009 (original version spanish fontReSizer.js) based on http://www.shopdev.co.uk/blog/text-resizing-with-jquery/
It dynamically creates a full configurable [-a a a+] box to control the screen font-size, it also calculates the initial font-size for new visitors according to screen resolution to show the text in the same proportion. So in all resolutions font-size to screen-width proportion is near the same. Also it keeps chosen font-size in cookie for future navigation.
Crea dinamicamente una caja con -a a a+ para controlar el tamaño de fuente en pantalla, además calcula la fuente inicial para nuevos visitantes de acuerdo a la resolución de pantalla para mostrar el texto en la misma proporción. Así en todas las resoluciones el tamaño de fuente es proporcional al ancho de la pantalla. Mantiene también el tamaño de fuente escogido para la navegación.

examples/ejemplos