You might think to yourself, "What is all the fuss with jQuery? You have to download a bunch of plugins to even make the library worth while.". First, that isn't true. Second, the jQuery library was specifically designed for that very purpose. By keeping the core library as small as possible - about 16 kb - users can then apply additional plugins at their own discretion. Today, I'll teach you how to build your first "Center" plugin from scratch. Let's get started!
Our Objective
We want to create a plugin that will dynamically adjust the styling of a specified element in order to keep it vertically and horizontally centered on the page at all times - even when the browser window is resized. Very little is required up front. You only need to make sure that you have the jQuery library downloaded.
The Screencast
Step 1
The first step when creating a plugin is to add a blank Javascript file. Naming conventions state that the file should be named "YourPluginName.jQuery.js". Once you've created this file, make sure that you create a reference to it in your document.
1 |
|
2 |
<head> |
3 |
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script> |
4 |
<script src="center.jQuery.js" type="text/javascript"></script> |
5 |
</head> |
Step 2
Next, paste in the following code.
1 |
|
2 |
(function($){ |
3 |
|
4 |
$.fn.center = function(){ |
5 |
|
6 |
var element = this; |
7 |
|
8 |
$(element).load(function(){ |
9 |
|
10 |
changeCss(); |
11 |
|
12 |
$(window).bind("resize", function(){ |
13 |
changeCss(); |
14 |
});
|
15 |
|
16 |
function changeCss(){ |
17 |
|
18 |
var imageHeight = $(element).height(); |
19 |
var imageWidth = $(element).width(); |
20 |
var windowWidth = $(window).width(); |
21 |
var windowHeight = $(window).height(); |
22 |
|
23 |
$(element).css({ |
24 |
"position" : "absolute", |
25 |
"left" : windowWidth / 2 - imageWidth / 2, |
26 |
"top" : windowHeight /2 - imageHeight / 2 |
27 |
});
|
28 |
};
|
29 |
});
|
30 |
|
31 |
};
|
32 |
|
33 |
})(jQuery); |
I go into much greater detail in the video, however, I'd still like to go over a few key points. Any time that you create a plugin, it must be wrapped with:
1 |
|
2 |
$.fn.center = function(){}; |
"Center" should be replaced with whatever your plugin's name is. This lets jQuery know that you're extending its methods. Now, though it does absolutely nothing, we can call our center method with:
1 |
|
2 |
$(function(){ |
3 |
$("#someElement").center(); |
4 |
});
|
Step 3
You must understand how to manually center an image on a page before creating the plugin. First, your element must be positioned absolutely. Otherwise, it obviously won't budge when we alter the "left" and "top" values. Next, the image needs to be shifted 50% of the browser's width to the left. Finally, in order to compensate for the image's width, we need to subtract one half of the image's width.
1 |
|
2 |
function changeCss(){ |
3 |
var imageHeight = $(element).height(); |
4 |
var imageWidth = $(element).width(); |
5 |
var windowWidth = $(window).width(); |
6 |
var windowHeight = $(window).height(); |
7 |
|
8 |
$(element).css({ |
9 |
"position" : "absolute", |
10 |
"left" : windowWidth / 2 - imageWidth / 2, |
11 |
"top" : windowHeight /2 - imageHeight / 2 |
12 |
});
|
13 |
};
|
This will perfectly place the center of the image in the center of the page. It's a bit hard to explain with text. Be sure to watch the video for a greater explanation.
Step 4
Continuing on, we need to create a listener for when the browser window is resized.
1 |
|
2 |
$(window).bind("resize", function(){ |
3 |
changeCss(); |
4 |
});
|
"ChangeCss()" is a function that adjusts the left and top values of our image. By calling it again when the window is resized, jQuery will recalulate those values.
You're Done!
If you have any questions, please feel free to leave a comment and I'll make sure that I respond. As always, this might not be "real world ready". What happens if the user has Javascript turned off? And of course, there are some ways to do this using pure CSS - but I digress.
Subscribe to the Weekly Screencasts
- Once ITUNES has loaded, clicked the "Advanced Tab"
- Choose "Subscribe to Podcast"
- Enter "http://feeds.feedburner.com/NETTUTSVideos"
That should do it! The screencast will also be searchable on ITUNES in the next twenty four hours.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
By
