Showing posts with label jQuery fancybox resize dynamically. Show all posts
Showing posts with label jQuery fancybox resize dynamically. Show all posts

Friday, 21 January 2011

Dynamically resizing fancy box according to window height

For version 1.3.4 of fancy box I was trying to resize it dynamically so that as the window was resized my nice full screen modal dialog was also resized.  Here's how I did it:


function resizeFancyBox()
{
var newheight = $(window).height() - 30;
var newHeightStr = newheight + 'px';
$("#fancybox-content").css({ 'height': newHeightStr });
}

function closeCallback() {
$(window).unbind('resize', resizeFancyBox);
}

function startCallback(){
$(window).bind('resize', resizeFancyBox);
}

function showEformFancyBox() {
$('#hdnFancyBoxLink').fancybox({
width: 800,
height: $(window).height() - 20,
onStarted : startCallback,
onClosed : closeCallback,
showCloseButton: true
});
$('#hdnFancyBoxLink').click();
}