jQuery Facebox: making it full width

I have written a number of posts about the Facebox jQuery plugin which is a Facebook style lightbox plugin. On my "setting the width" tutorial I was asked in the comments how to make the Facebox the full width of the browser window. It was a bit too much of a complex answer to post in the comments so I've added a new article here showing how to do this.
Download Facebox
Download the Facebox plugin and associated files from http://famspam.com/facebox
Download jQuery from http://jquery.com/
See my basic example for using Facebox.
Setting the Facebox width to the full width with Javascript
There doesn't seem to be a reliable way to do this with just CSS alone (I tried it but couldn't manage to make it work) so the width is set with Javascript instead.
Add the following code to your common Javascript file, or to the HTML page in a <script> block:

$(document).bind('beforeReveal.facebox', function() {

var padding = parseInt($('#facebox .body').css('padding-left'))
+ parseInt($('#facebox .body').css('padding-right'))
+ parseInt($('#facebox .tl').width())
+ parseInt($('#facebox .tr').width());

var offset = 20;

$('#facebox').css('left', '0px');
$('#facebox .body').width( ($(window).width() - padding - offset) + 'px' );

});

The padding variable (defined in lines 3 to 6) works out what padding and width there is in the Facebox itself because this needs to be subtracted from the full width of the window to correctly set the width.
The offset (defined in line 8) is to allow for the Facebox to not be the full width of the window. This number is subtracted from the window width along with the padding and it will be positioned centered horizontally in the window. An offset of 20 will make 10 pixels of space on the left and right of the dialog. Set it to 0 to make it the full width with no space around it.
Finally, lines 10 and 11 set the left and width based on the the window width.
Working Example
Click this link to open up my logo in a Facebox dialog which is the full width of the window less the 20px offset which is used in the example above. This link will simply load the logo into a new window if you are reading this in a feed reader, so click through to view the article in a web browser.

$(document).bind('beforeReveal.facebox', function() {

var padding = parseInt($('#facebox .body').css('padding-left'))
+ parseInt($('#facebox .body').css('padding-right'))
+ parseInt($('#facebox .tl').width())
+ parseInt($('#facebox .tr').width());

var offset = 20;

$('#facebox').css('left', '0px');
$('#facebox .body').width( ($(window).width() - padding - offset) + 'px' );

});

$('#example-facebox-logo').facebox();

Browsers tested
I have tested this code in the following browsers and it works in all of them.
Firefox 3.6.8 on OS X 10.6
Google Chrome 6.0.472.53 on OS X 10.6
Internet Explorer 8 on Windows XP
Firefox 3.0.19 on Windows XP
Opera 10.61 on OS X 10.6
Safari 5.0 on OS X 10.6

Related posts: