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

jQuery Facebox window with full height with scrollbar

Posted June 1st, 2010 in Javascript

I've been using the jQuery Facebox plugin a fair bit on various websites to show stuff in "inline" windows. On my New Zealand Running Calendar website I make the dialog the full height of the window with a scroll bar if the content is longer than the height of the window. This post shows how to do this.

Download Facebox

Download the Facebox plugin and associated files from http://famspam.com/facebox
Download jQuery from http://jquery.com/

Working example

Here's a working example (which gets the content using AJAX) of what I am trying to achieve (in your own project you can adjust the width with CSS - I'll show how to do this in another post - my apologies if I'm boring you with posts about Facebox...). No, this will not work if you are viewing this page in a feed reader so you'll need to click through to try it out in a web browser.

Hacks required

Unlike some of my other Facebox posts this one doesn't require any hacks. Hooray! However, the example above does include my auto-center hack to fix an annoying issue.

The Javascript

Add this little bit of Javascript to your main .js file:

$(document).bind('beforeReveal.facebox', function() {
    var height = $(window).height() - 100;
    $('#facebox .content').css('height', height + 'px');
    $('#facebox').css('top', ($(window).scrollTop() + 10) + 'px');
});

What this chunk of code does is to change some CSS properties of the facebox before it is "revealed". The original small loading window will appear first and then when the content is loaded our new properties will take effect. Without hacking the plugin. Hooray! It's always good to do some cool stuff without hacking the core.

Line 2 works out how high the window is and subtracts 100. The chrome around the facebox window is about 80px and line 4 puts the top of the window at 10px from the top of the page so this means it looks more or less vertically centered.

Line 3 sets the main content div to the heigh specified above.

Line 4 positions the box 10px from the top of the window, no matter how far down the page the user has scrolled. By default, Facebox drops it down a little further (the actual amount depends on how big the window is) so this adjustment puts it in the correct place.

The CSS

Right, so you've popped the the above Javascript someplace or other but without this little bit of CSS it's going to overflow the box and look like crap.

#facebox .content {
    overflow-y: scroll;
}

There's a div in the facebox with a class of "content" so this CSS makes it scroll.

The end

Yes, this is the end of the post :) Try it out, and I hope it all works nicely for you. If not, I'm sure you will post a comment below.

Comments

blog comments powered by Disqus