Home | About Chris Hope | Contact Chris Hope | Search:

Vertically center a jQuery Facebox dialog

Posted May 18th, 2010 in Javascript

Some time back I posted a fix for the Facebox jQuery plugin so it centers horizontally correctly and was subsequently asked in the page comments how to center the box vertically. This post shows how to center it vertically but the caveat is that it will still load initially in the regular place and will then center vertically after the content has loaded.

Caveat

Because the height of the content is unknown before the box is initially loaded and rendered, it must first be loaded and rendered and then centered vertically. This means the box will appear in its regular place first, and the jump down (or up) to the vertical center of the page once the content is loaded.

If the content is always going to be the same height, you could instead hack the Facebox Javascript so the position is always calculated before loading (unfortunately I cannot see any way of doing this without modifying the original files).

Another way to display the box, and this is really only applicable if the content will usually be longer than the page itself, is to have it the full height of the page with some top and bottom margins and a scrollbar in the box itself. I will show how to do this at a later time but you can see this in action by clicking through to the New Zealand Running Calendar and clicking on one of the information icons next to an event name.

Center the Facebox box vertically

I posted how to get the vertical mid point of a browser window yesterday using jQuery and that forms the basis of this calculation.

Add the following somewhere in your Javascript files:

$(document).bind('afterReveal.facebox', function() {
   
    var windowHeight = $(window).height();
    var faceboxHeight = $('#facebox').height();
   
    if(faceboxHeight < windowHeight) {
        $('#facebox').css('top', (Math.floor((windowHeight - faceboxHeight) / 2) + $(window).scrollTop()) );
    }
   
});

How it works

Facebox triggers afterReveal.facebox after the box is "revealed" so we bind a function to this trigger with line 1.

The window height and facebox height are then cached into variables in lines 3 and 4.

The position of the box is set with CSS to be in the vertical center of the window, but only if the height of the facebox is less than the height of the window (condition on line 6). There's no point trying to center it vertically if it's bigger than the size of the window because it will disappear above the current scroll position.

Finally,  line 7 does the work. It works out where the top of the box should be positioned based on the height of the window and the box itself, and the current scroll offset.

Working example

Here's a working example: click me. This opens my logo in a Facebox dialog and then centers the box vertically on the page. If you are reading this in an RSS reader click through to view this page in a web browser otherwise that link will just show you the logo in a new browser window.

Comments

blog comments powered by Disqus