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.
<head>
<script src="jquery-1.2.6.pack.js" type="text/javascript">
<script src="center.jQuery.js" type="text/javascript">
</head>
Step 2
Next, paste in the following code.
(function($){
$.fn.center = function(){
var element = this;
$(element).load(function(){
changeCss();
$(window).bind("resize", function(){
changeCss();
});
function changeCss(){
var imageHeight = $(element).height();
var imageWidth = $(element).width();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(element).css({
"position" : "absolute",
"left" : windowWidth / 2 - imageWidth / 2,
"top" : windowHeight /2 - imageHeight / 2
});
};
});
};
})(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:
$.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:
$(function(){
$("#someElement").center();
});
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.
function changeCss(){
var imageHeight = $(element).height();
var imageWidth = $(element).width();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(element).css({
"position" : "absolute",
"left" : windowWidth / 2 - imageWidth / 2,
"top" : windowHeight /2 - imageHeight / 2
});
};
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.
$(window).bind("resize", function(){
changeCss();
});
“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
You can add our RSS feed to your ITUNES podcasts by doing the following:
- 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Can anyone please show me a working example of how to get this done in DIV? thanks a lot!
Is there’s a DIV sample using this tutorial? I think this is VERY USEFUL if we can make it using DIV.
I can’t see the video,
When I start the video I see the video of the jFlow Plugin and not how to create a plugin.
I can’t see the video too…
Confused…if “this” is already a jQuery object, and you then assign that object to the variable “element”, why do you need to wrap it as in “var imageHeight = $(element).height();” ? Why not just element.height(), which does seem to work at least in Safari and Firefox?
@Nora:
Because “this” is a DOM object and $(this) or $(element) is a jQuery object and this object has height() method in it.
You can read more about jQuery custom functions and custom plugins here.
You might find this useful as well. All jQuery plugins related posts: http://jquery-howto.blogspot.com/search/label/plugin
I am not able to see this video
hey! that stuff was really helpful. I have developed a sample plugin. Now where can i make it available to others?
Ok so this is pretty cool, a nice example of how to create a plugin.
However, the functionality of this is useful to me. How can I adapt this to center the image within a div, not the browser window?
The div will be a set width/height and the image within it will vary in size but need to stay centered..?
There is examples out there in google but appear to be quite clunky..
Many thanks
I have been studying jQuery for about two years now and I was to the point whenever rewriting a set of code that I usually use became tedious I thought “maybe it is time to learn how to turn this into a function?” I ran across this tutorial creating a plugin. Plugins are for the “pros”. This was explained and I realized that I understood more than I thought I would about a basic plugin. So, I will attempt to make a plugin. Anyway, this was truely enlightening to the core idea of creating a plugin. Not sure what I am getting into. LOL
Thank you.
PS. are you using sql software to create this?
I did it! I did it! I did it! I built my first plugin! It works OMGoodness!
Thank you soooo much for this tutorial! And I used Visual Web Developer to do it!
Nice tutorial. One suggestion though. If you want to position the image in the middle of the window you’ll need to use ‘fixed’ as the css position. When you use ‘absolute’ it gets position to the first element that not is fixed (by default all elements are fixed).
Normally this won’t be a problem, but sometimes you have a parent element that has a relative or absolute position. For more info on positioning look at http://www.w3schools.com/Css/pr_class_position.asp.
Keep up the good work!
Very nice and useful tutorials for web designers,
Thanks for posting.