jQuery fancybox plugin not centered in safari or chrome, but is in firefox.

Question

I've just installed fancybox on my site, and it works perfectly in firefox, but when I try it out in chrome and safari, the fancybox is not centered in the browser window.

Any insights?

You can view a demo at:

http://kotyy.com/kotyy/lindseyandasp/test2.xhtml

Answer 1

Hate to answer my own question, but maybe it will help another out. I added a wrapper to my content and it works fine now.

Answer 2

off topic, but some of your links don't work

Answer 3

hey, whats a wrapper? is it an iFrame?

Answer 4

Hello,

I had the same problem, using lightbox 1.3.1 and jquery 1.4.2.

After a short looking to the code I found problem in function fancybox_get_viewport. It determines current viewport using $(window).width() and $(window).height(). Problem is that on Chrome and Safari this funcions returns document width and heigh. On Opera too, see http://updatepanel.net/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

Workaround is easy. Use window.innerHeight ? window.innerHeight : $(window).height();

Here is modified function, replace in your jquery.fancybox-1.3.1.js:

fancybox_get_viewport = function() { return [ (window.innerWidth ? window.innerWidth : $(window).width()), (window.innerHeight ? window.innerHeight : $(window).height()), $(document).scrollLeft(), $(document).scrollTop() ];},