Building a reusabe font size controller interface using jQuery
Most of the web2.0 design allows the user to change the font size of the main content area. This is indeed a good usability. So I thought, I should contribute something here. The result is a small jQuery code which can be used to generate a font size changer interface.
Only thing you need to make is a holder element for the controller and then call the function like
fontSize("#holder", "#content", 9, 12, 20); // holder is the id of the element where the font size controller interface will be shown // content is the id of the element where the font size changes will take place. // The next three arguments are Minimum font size, Default font size and Maximum font size respectively
Yes, all done and it will automatically generate all required buttons. It also supports jquery cookie plugin. So when you open the page again, the preferred font size will be restored automatically. (Cookie plugin is not required, but recommended)
After the function is called, the controllers will be generated in the specified area like the following.
Advantages
- Small size, built on jQuery
- Fully skinnable using css
- Multiple interface can be used in the same page for two different content areas
- Support jQuery Cookie plugin for remembering the preferred font size
- Very easy to use
