Fancybox problem on iPhone

Question

Fancy box seems to have problems working on iPhone and iPad.

Go here http://fancybox.net/blog and click "5. Display login form Try now" on the page in an iPhone or ipad. The form is not center and when you try to enter your details the box moves about the page and makes it unusable.

Any fixes?

Thanks, C

Answer 1

Fancybox attempts to auto resize and center itself everytime that the browser window is resized, and this event gets triggered a lot on iPads and iPhones. For fancy box 1.3.4, the code which controls this is line 608:

$(window).bind("resize.fb", $fancybox.resize);

To fix the issue, I modified this part of the fancybox JS, and added another option called "resizeOnWindowResize", which you can set to false for iPad and iPhone users, or just disable all together.

if(currentOpts.resizeOnWindowResize) {
   $(window).bind("resize.fb", $fancybox.resize);    
}

You must also add a default value for this option in $.fn.fancybox.defaults hash map.

Then, when calling fancybox you can utilize this new option:

$('#fancybox_link').fancybox(${'scrolling': 'no',
                              width: 'auto',
                              height: 'auto',
                              centerOnScroll: false,
                              resizeOnWindowResize : false});