O'Reilly logo

MooTools 1.3 Cookbook by Jay Larry G. Johnston

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making usability cool with fading font-size changer

There are many different ways to change fonts on a page. Using MooTools allows us a fancy variety of options. Use morphing to smoothly transition from one text size to the next.

Getting ready

To be ready to transition font size, the layout must be liquid. A liquid layout is one that can grow without breaking the display. Create styles that would alter the size of the text.

<div id="main" class="medium"> <form action="" method="get" id="font_sizer"> Choose text size: <input type="button" id="small" value="S"/> <input type="button" id="medium" value="M" disabled="disabled"/> <input type="button" id="large" value="L"/> </form> <h1>Welcome!</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required