mootools fontSelector Widget

Introduction

A handy little font selection widget.

At only 3kb fontSelector is a lightweight, easy solution, so check out the example and then download it for yourself.

Example

Font Selector

This is an example of the light-weight, flexible font selecting widget for mootools.

Abilities

• Easily change fonts on a page.
• Look Cool.
• Have fun!!

Steps

1. var fSelector = new fontSelector($$('p','h3','li'), {fontList: ['Arial','Times new roman','Century Gothic']});
2. Enjoy font changing on all p, h3, and li elements

Start Font Changing

Documentation

fontSelector.js

A simple font changer widget

Dependancies

mootools Moo.js, Utility.js, Element.js, Function.js, Dom.js, Array.js, String.js, Event.js, Common.js, Window.Size.js, Fx.Style.js, Fx.Styles.js, Fx.Base.js, Fx.CSS.js

Author

Justin Maier, http://justinmaier.com

License

MIT-style license.

fontSelector

A simple font changer widget.

Note

Tested in Firefox 2.0, and IE6-7 on XP SP2

Known Bugs

None

Arguments

element the element you want to apply the font changing to

options an object. See options below.

Options

onSelect Add additonal effects to what happens when you select the font (like changing text color)

fontList List of available fonts (ie fontList: ['arial','century gothic', 'tahoma', 'verdana'])

fade True or False. Fade the selector in/out. (defaults to true)

className The Class applied to the widget. (defaults to 'fontSelection')

Example

(start code)


 <h1>I am Justin</h1>

 <p>Hello World</p>


<script>

 var fSelector = new fontSelector($$('p','h1'),{fontList: ['Arial','Times new roman','Century Gothic']);

</script>

(end)

Properties

show show the editor (pass element, and event).

hide hide the editor.

remove remove/kill the editor.

Download

Get it while its hot. fontSelector.js | fontSelector.packed.js

Discuss