FancyBox opens too low on the page

Question

I'm using FancyBox on my page, and occasionally (but not always), the lightbox opens too far down the page, getting cut off at the bottom and making you scroll down to view the rest of it. Normally, it'll be positioned in the dead center of the page.

I'm setting its position to fixed in the onStart method when I call it, and most of the time it does open in the center like it's supposed to - so I don't know what's causing it to get thrown off, but only sometimes.

The site is Raditaz.com: play an existing station (or create your own - you don't need an account) and then click the album art in the middle to open the lightbox.

Any leads on this would be appreciated - thanks!

EDIT: A few updates...

• If I resize the window once the FancyBox is opened, it'll reposition itself correctly in the center (but only until I close and reopen it again, at which point it will be shifted too low again)
• The incorrect positioning seems to occur most frequently in WebKit browsers (Safari and Chrome)

EDIT 2: I should have pointed out that the version of Fancybox we're using is 1.3.4, not the newer 2.0. Our version of jQuery is 1.6.4. It's possible that using Fancybox 2.0 would solve the problem, but (I think) that requires jQuery 1.7, which is incompatible with some of the other plugins we're using. So I'd prefer a fix that works with Fancybox 1.3.4.

Answer 1

I visited your webpage and was able to reproduce the issue repeatedly once I found the bug, and that was using Firefox.

To begin, here is a reference photo of the issue:

Note in the above image Fancybox is not centered in the browser and the top of the artists photo is just under the Totem Ticker Plugin you are using.

The next reference photo is a close-up of the red framed section that shows the Totem Ticker is overlaying objects:

These two issues are related. To reproduce the FancyBox opens too low on the page issue you will need to click on a mini-artist image next to the centered larger image that has played a few songs ago, and while the Totem Ticker Plugin is in the process of animating.

These reference images shows what happens when the timing is right. If timing is not right or the slider is using a image in the cache that hasn't cleared yet, you will need to try again. Usually you will start to see the Totem Ticker overlap other objects.

Now that the bug has been found, here is a working solution to take care of it. You will use callbacks in the Fancybox plugin to turn off the Totem Ticker when Fancybox is about to animate, and turn back on the Totem Ticker when Fancybox closes.

Because the Totem Ticker does not have any API to interface with it, you must use the process outlined by that plugin to use start and stop options via an anchored button. The good news is you don't need to have a text-link associated with it thus making it not seen. Here's the code to review:

jQuery Totem Ticker jQuery Before:

    $('#trending ul').totemticker({
        direction: 'up',
        interval: 5000,
        mousestop: true,
        row_height: '74px'
    });


jQuery Totem Ticker jQuery After:

    $('#trending ul').totemticker({
        direction: 'up',
        interval: 5000,
        mousestop: true,
        row_height: '74px',
        start: '#totemStart',
        stop: '#totemStop'
    });



jQuery Totem Ticker HTML Before:

        <div id="trending" class="column aside">
            <div class="section title"><span>Top Trending Stations</span></div>
            <div class="fadeout"></div>
            <ul></ul>
        </div>


jQuery Totem Ticker HTML After:

        <div id="trending" class="column aside">
            <div class="section title"><span>Top Trending Stations</span></div>
            <div class="fadeout"></div>
            <ul></ul>
            <a id="totemStart" href="#"></a>
            <a id="totemStop" href="#"></a>
        </div>





Imported raditaz.min.build File Before:

    $("#album-art-anchor").fancybox({
        scrolling: "auto",
        autoscale: true,
        autoDimensions: true,
        width: 455,
        height: 495,
        titlePosition: "outside",
        onStart: function () {
            $("#fancybox-overlay").css({
                position: "fixed",
                overflow: "scroll"
            });
        },
        onClosed: onTrackLightboxClosed
    });


Imported raditaz.min.build File After:

    $("#album-art-anchor").fancybox({
        scrolling: "auto",
        autoscale: true,
        autoDimensions: true,
        width: 455,
        height: 495,
        titlePosition: "outside",
        onStart: function () {
            $("#fancybox-overlay").css({
                position: "fixed",
                overflow: "scroll"
            });
        },
        onClosed: onTrackLightboxClosed,

        // Below is added above is original.
        //
        beforeShow: function(){
            $('#totemStop').click();
        },
        afterClose: function(){
            $('#totemStart').click();
        },
        onComplete: function(){
           $.fancybox.center;
        }
    });

The onComplete fires right after the content has shown, and the function uses Fancybox API to center the contents in the viewport... but IMHO that's now not necessary since we are taking care of the issue causing it. I included that to be sure since I can not reproduced a failing condition on my end, but the two plugins were tested together to ensure this answer helps to address your issue.

To be sure, you can always run $.fancybox.center; in a setTimeout so that it fires after Fancybox has stabilized:

setTimeout("$.fancybox.center;", 1000);

onStart use of overflow: "scroll" causes an empty vertical bar on the right side for Chrome.

On a side note since the site is in development, besides Firefox with Firebug plugin, I used HTML Validator Plugin for Firefox. It highlights errors when viewing the source html page and provides solutions. For example, on homepage line 389 is unclosed Class Name. On line 587/589 is duplicate ID's. Some errors aren't errors, like when plugins inject their unique tags into the markup.

EDIT: Per your recent SO Question Edit: Please update Fancybox to v2.0 which is compatible with jQuery v1.6.4 that you are using. The Fancybox v2.0 source file says jQuery v1.6.0 is the minimum required version.

If anything was unclear please let me know and I will try to explain differently. Thanks.