Sliding Font Resizer

This example demonstrate how to uses mootools to implement a horizontal slider which controls font-size of target area. This demo fully compatible with all A-Grade Browsers. Dig page's source to see how it's work

Simple Demo

Simply create new SlidingFontResizer instance and specify target area, that's all. Try drag&drop slider and see resizing text effect.

Paragraph 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget odio id tellus tempus cursus. Sed vestibulum, sem et consequat vulputate, neque nisl pellentesque quam, ut tincidunt ipsum nisi at nulla. Sed et ipsum eu dolor posuere mollis. Quisque ac sem. Quisque accumsan. Nunc feugiat, elit ut ultricies tempor, tellus sem eleifend arcu, non egestas ante pede sed urna. In feugiat enim sit amet leo. Suspendisse at diam. Nam luctus magna eu pede malesuada condimentum. In non lorem. Vestibulum massa arcu, facilisis vitae, aliquam eu, imperdiet et, massa. Integer vestibulum mi vitae ante. Etiam lectus erat, tempus vitae, ornare condimentum, varius tincidunt, tortor. Morbi non odio et ante lacinia commodo. Donec facilisis, est in ultricies tincidunt, mauris libero tincidunt enim, ac rutrum nisl felis quis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

How to use

Arguments:

element

the target element to be a slider. You can use any HTML element since after SlidingFontResozer was created successfully, this element will be removed from the document.

options

See Options below

Options:

minSize

Minimum font-size - default is 10 px

maxSize

Maximum font-size - default is 24 px

targetArea

the area which need to be controled font-size - default is document.body

showValuePanel

does value panel show. default is false

Paragraph 2
Donec posuere, urna vitae posuere blandit, est urna tincidunt libero, at ultricies diam nulla quis enim. Curabitur dictum tortor egestas tortor. Nulla volutpat augue sagittis nisl. Vivamus nisi. Nunc ultricies quam in neque. Suspendisse potenti. Aliquam elementum odio malesuada tellus. Nunc tortor augue, volutpat id, tempor non, tempor vel, leo. Nam sit amet pede at nisi lacinia bibendum. Integer eu eros in sapien bibendum vulputate. Sed nec nunc. Phasellus tempus nunc sit amet mauris. Sed viverra sem ut est. Suspendisse varius tellus sed eros. Aenean a sapien nec nunc varius volutpat. Maecenas velit odio, suscipit ut, pellentesque eu, tempor eu, turpis. Nulla tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc augue quam, mattis eget, molestie eu, tempus et, erat. Cras vitae felis placerat ipsum consequat dignissim.