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();
}

Thursday, 20 January 2011

Cancel a fancy box close

A quick one since I couldn't actually find this anywhere in the api or documentation. If you want to cancel a user request to close a fancybox then all you have to do is return false from the callback assigned to onCleanup in the fancybox options. Annoyingly I worked this out by looking at the fancybox code but still managed to struggle with it for a while because the callback I inherited had another evaluated function that was causing a close. Oh well - got there in the end!