WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Fancybox not aligning vertically in safari and chrome.. long blog posts page (7 posts)

  1. dassekaka
    Member
    Posted 2 years ago #

    Hi,

    Cannot get the fancybox to center vertically when I am further down on a long/tall page.

    I cannot specify the height of the element since it is made up of a lot of blog posts, so it will differ depending on how many pics and how much text someone writes.

    I have read a lot of the suggested fixes here, but none of them work. It seems chrome understand all the height, but fancybox just can't understand. Why does it work in Explorer and not in Chrome?

    Also, Firefox not center aligning image either but in a different way. If I am at the top of the page it opens the fancybox way down.

    With Safari and chrome problem is when I am trying to open an image in fancybox further down the page, quite a long way down.

    Can anyone please help?

    Cheers!

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    Hi, it could be an issue or conflict with other theme files or stylesheet rules. Or even other plugins... A link to a live example will be more helpful than a description.

  3. dassekaka
    Member
    Posted 2 years ago #

    Thanks!

    The Firefox issue has been resolved. It had to do with a zoom on the body that made the whole page look bonkers. It also added a lot of space on the top and the bottom. When I removed the zoom, the extra space in the top and the bottom, and now the fancybox is working in firefox.

    It still works in IE, but not in Chrome and Safari. And they all have the zoom on the body.

    It might be the zoom on the body. But the client had someone draw a page in a certain dimension and it will as finished they wanted it be smaller in the browser. But it still works fine in IE, with the zoom.

    Please have a look http://matkonation.telavivian.com/.

    Thanks!

  4. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    As far as I can tell, it is definitely that zoom level set on the body that makes the fancybox script calculate the height wrong in Chrome. Open an image and scroll all the way down and you will see a margin that does not have the grey overlay...

    If you disable that zoom on the body, it should work fine. But if you really need zoom, maybe you are better off setting it to each of the bodies child objects:

    div#logo, div#header, div.banner, div#page {
      zoom: 0.91;
    }

    Notes:
    1. be careful with zoom applied to large sections (or even body) as it is currently only supported on IE and Webkit browsers (Safari and Chrome) but might be added to future browsers, giving unexpected results at that point.
    2. you seem to have copied the div#header section to the bottom but kept the ID unchanged. there can not be two divs with the same ID on one page... make it div#header2 and copy the stylesheet #header rules for it.

  5. dassekaka
    Member
    Posted 2 years ago #

    Thanks RavanH!

    That makes much more sense. I will give it a try.

    Notes.

    1. Ok. Will tell the client that.

    2. Yes. Rookie mistake.. will change that immediately.

    Thanks again!

  6. dassekaka
    Member
    Posted 2 years ago #

    Hi!

    After changing so that the zoom is in the way that you suggested above it now works in Safari and Chrome. Thanks!

    A bit of a side note. When I do the same thing to get firefox to zoom with the moz transform scale as such:

    div#logo, div#header, div.banner, div#page {
      zoom: 0.91;-moz-transform: scale(0.91);
    }

    Instead of leaving a gap of white space on the top and bottom of the whole page it now leaves one between the header/logo and the content/the blog posts. Any idea?

    Thanks again!

  7. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    I really have no idea but I'd guess that Firefox first creates the divs and sizes them to fit the content and only then applies the scaling factor without scaling down the divs original size. Maybe it would be enough to change the order of your CSS rules so that dimensions (even height:auto?) are applied after the scale is set...

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic