Jan
06
2010

Creating a jQuery Plugin to Increase Font Size

by   |  Posted in Tutorials  |  6 comments

I have been spending a bit of time lately figuring out how to create my own plugins for jQuery. It doesn’t take much to accomplish and I thought it would be a good idea to put together a small tutorial to show everyone just how easy it can be. For this example, I will create a plugin to increase the font size of a selected div when a link is clicked.

To start, we are going to create a wrapper function which will allow us to use $ without conflicting with other JavaScript libraries:

(function($) {
  // our plugin goes here
})(jQuery);

Next we need to let jQuery know we are creating a new plugin by using $.fn. Let’s call our function increaseFontsize and give it a few variable, such as size, speed, easing and callback, so it works just like other jQuery functions.

(function($) {
  $.fn.increaseFontsize = function(size, speed, easing, callback) {
    // the guts of our plugin goes here
  };
})(jQuery);

Once you have done that, you can create the code that will make our plugin do what we want it to, which is increase the font size of a selected div.

The final plugin code looks like this:

(function($) {
  $.fn.increaseFontsize = function(size, speed, easing, callback) {
    return this.animate({fontSize: size}, speed, easing, callback);
  };
})(jQuery);

Now we can use our plugin just like any other jQuery function.

jQuery(function() {
  jQuery('a.increase').click(function() {
    jQuery('div.paragraph').increaseFontsize(16, 'fast');	
  });
});

Try it out below to see it work.

Increase Font Size  |  Decrease Font Size

Fusce eget diam purus, quis mattis dui. Proin volutpat velit at mi viverra id condimentum erat rhoncus. Aliquam eu nibh nisi. In hac habitasse platea dictumst. Nulla vel neque nulla, at lobortis nisl. Donec et erat orci. Mauris non semper libero. Curabitur euismod semper mi, at ornare ante sagittis eu. Nunc massa lacus, auctor facilisis tincidunt eu, euismod et massa. Nunc sit amet purus purus, non porttitor quam. In pulvinar erat sed libero vestibulum cursus. Nunc lobortis semper pellentesque. Nullam ut ligula non eros congue vestibulum.

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
If you liked this, please share it.

Tags: , , , , , , , , , , , , , ,

Short URL: http://bit.ly/ddkqum

Discussion 6 Comments

  1. David Holowiski on January 7, 2010 at 4:36 pm

    Very nice, and simple code too. Thanks.

  2. covalic on January 10, 2010 at 10:38 am

    Great work, really very simple. thx

  3. Avi D on October 17, 2010 at 4:36 am

    How would I be able to use this for an entire post rather than just a paragraph?

    • c.bavota on October 20, 2010 at 11:08 am

      Most posts are inside a div called post so you can just change the jQuery selector to .post p and it should select everything within a paragraph within the post div. You might have to adjust this for your specific site but the idea is going to be the same.

  4. Mike Bundrant on December 21, 2010 at 4:54 pm

    Thanks much – simple and clear!

  5. Jump on January 24, 2011 at 10:17 pm

    Thanks for the great info…