Simple Vertical Align Plugin for jQuery

Does it work on multiple instances? So far, I can only get it to vAlign on the first named element.

Thanks.

Thanks Zack. I have a sillier question: do you know if there is any way to get it to work if the html section it is applied to is hidden by default on page load and only visible if the user makes it so?

Thanks for the code! The code however doesn’t run for each element in the selector. I updated it to fix this issues, here it is:

return this.each(function() {
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph – ah) / 2;
$(this).css(‘margin-top’, mh);
});

Hi,
could you please be so kind to explain me where and how to code / copy-paste this into a working function? I’m totally blind about jQuery (my bad)

Nice little plugin sir, thanks.

First I stumbled upon the SEO stylesheet, now this? Keep it up, you’re on fire!

Hey, this is great, successfully tested in IE6, Chrome, Opera, Safari, however it surprisingly does not work in Firefox 2 (I’ve got 2.0.0.19). Any ideas how to make it work in FF2?

THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU THANK YOU, YOU Just saved me another 3 hours or trying to make a classic Jquery method to work with each function. (I’m kinda clueless to javascript in general, still learning the basics).

Thanks again

Anther quick question

If i set it to the container div will it work?
(trying to make a new website and i have to make it vertically aligned to the top and bottom sides) so i am wondering does it work by calculating the window height or I have to make another div (and not set everything to it) and slap my container inside said div.

Thanks 🙂

nice function mate.

I changed my code from:

$(this).css(‘margin-top’, mh); to
$(this).css(‘padding-top’, mh);

because I was having some problems with a UL list. My html code is:

Blah Blah Blah

and I use $(“.valign”).vAlign(); on the

I am having problems with multiple instances and I’m not that great with jquery. The first element positions but the rest don’t unless I refresh the browser.
Is where the .each ( ) function would come into play? If so where would it be placed in the code?


Snippet does not work for me in Safari 5.0.2. IE, Firefox, Chrome successfully tested. Any ideas? Thanks.

very usefull

I added a few tweaks to the code based off of the comments as well as some things I noticed to fix negative margin issues if the browser height is less than the height of the container div. Here is the final result:

(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(window).height();
var mh = (ph – ah) / 2;
if(mh>0) {
$(this).css(‘margin-top’, mh);
} else {
$(this).css(‘margin-top’, 0);
}
});
};
})(jQuery);

Also, I’m using the following to call the function that takes care of both when the page is loaded or the browser is resized:

$(document).ready(function(){
$(“#container”).vAlign();
});
$(window).bind(‘resize’, function(){
$(“#container”).vAlign();
});

This code is geared for a container div that’s a direct child of the body that needs be to vertically centered in the body.

— Jonathan Lahijani

its not working properly in chrome!!

Very helpful script.  But has been mentioned, it only works on elements that have been rendered.  Here is one solution for vertically aligning images that are loaded into the DOM and then when all elements are aligned fire the callback plugin/function.

    $(document).ready(function(){        createPanels();        var $img = $(“img.product_image”),            count = $img.length,            statusCount = 0;        //wait for images to load and aligned before firing tab script        $img.load(function(){            var $this = $(this);            statusCount = statusCount + 1;            $(this).vAlign();            if(statusCount >= count) {                $(“#fpWrap”).idTabs();            }        });    });

Excellent goods from you, man. I have take note your stuff previous to and you’re just extremely great. I really like what you’ve got here, really like what you are stating and the way in which wherein you are saying it. You make it entertaining and you still care for to stay it smart. I cant wait to learn much more from you. This is actually a tremendous site.

whoah this blog is excellent i love studying your posts. Keep up the good paintings! You know, lots of people are hunting round for this information, you can aid them greatly.

Is better with outerHeight().
This include the padding.

It does not work in Safari… any ideeas? Seem to be something wrong in the calculation. My images are not centered..

doesn’t work with chrome, because the way chrome, ie and ff deal with image loads is different. chrome run the code BEFORE the image finishes its load, though, the height, at the moment the reading, is 0, and the code shoudn’t work properly. therefore, it could be used the load() event on the image. but.. the ie doesn’t trigger when the image is loaded.. it DOES LOAD before the code, but it doesn’t like to share it with the world.. so, I created a version of the code, which works with ie, ff AND chrome. it’s based on the assumption that, if the browser loads the image before the code (and, in consequence, has a value for image height() ), it’s because it cares about prevention on dealing with images, so, the load() is unnecessary. if it runs the code BEFORE the load of the image, it should get prepared to respond about when the image load accurs (and, then, the image load() event will trigger). but, as always, there must be a browser who run codes which deal with image without worring with the problems with loading (it means, any time, probably before the image load), AT THE SAME TIME it doesn’t like to report about the load() event. so, it’s not universal.. but, working with ie, chrome AND ff, its kind of.. ps.: paste this code into your js file, and use the class vertical-align-middle in any object you want to vertical-align to middle. 😉

$(function() {
$(‘.vertical-align-middle’).each(function() {
if($(this).height() == 0){
$(this).load(function(){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2);
$(this).css(‘margin-top’, mh);
});
}else{
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2);
$(this).css(‘margin-top’, mh);
}
});
});