Creating a jQuery Plugin to Increase Font Size

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.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie