Geek Answers Handbook

Fancybox Positioning Inside Facebook Canvas iFrame

OK, so I have a canvas iframe application with its height set to "Installable" using javascrip sdk calls to facebook in FB.Canvas.setSize (); and FB.Canvas.setAutoGrow () ;. They work just fine since the iframe is set to a specific pixel height based on its contents.

The problem is that when I call Fancybox, it positions itself based on that height. I know that it is exactly what it should do, since fancybox jQuery returns a viewport:

(line 673 of the latest version of jquery.fancybox-1.3.4.js):

_get_viewport = function() {
return [
    $(window).width() - (currentOpts.margin * 2),
    $(window).height() - (currentOpts.margin * 2),
    $(document).scrollTop() + currentOpts.margin
];
},

But the problem is that iframes will be longer for many viewers than their browser window. Thus, Fancybox focuses itself in the iframe and ends only partially visible to most viewers. (i.e., the iframe is 1,058 pixels high, and the users browser is only 650 pixels high).

Is there a way for fancybox to simply calculate the physical height of the browser? Or do I need to change some settings in my Facebook canvas app to make it work?

I love the way the only scrollbar is on Facebook (parent if you want).

All offers GREAT appreciated!

+1
source share
5 answers

For fancybox 2 try:

find:

_start: function(index) {

and replace with:

_start: function(index) {
    if ((window.parent != window) && FB && FB.Canvas) {
        FB.Canvas.getPageInfo(
            function(info) {
                window.canvasInfo = info;
                F._start_orig(index);
            }
        );
    } else   {
        F._start_orig(index);
    }
},

_start_orig: function (index) {

getViewport return rez; :

if (window.canvasInfo) {
    rez.h = window.canvasInfo.clientHeight;
    rez.x = window.canvasInfo.scrollLeft;
    rez.y = window.canvasInfo.scrollTop - window.canvasInfo.offsetTop;
}

return rez;

, , _getPosition :

} else if (!current.locked) {

:

} else if (!current.locked || window.canvasInfo) {
+11

facebook js api , ,

    _start = function() {


    _start = function() {
        if ((window.parent != window) && FB && FB.Canvas) {
            FB.Canvas.getPageInfo(
                function(info) {
                    window.canvasInfo = info;
                    _start_orig();
                }
            );
        } else   {
            _start_orig();
        }
    },

    _start_orig = function() {

_get_viewport

    _get_viewport = function() {
        if (window.canvasInfo) {
            console.log(window.canvasInfo);
            return [
                $(window).width() - (currentOpts.margin * 2),
                window.canvasInfo.clientHeight - (currentOpts.margin * 2),
                $(document).scrollLeft() + currentOpts.margin,
                window.canvasInfo.scrollTop - window.canvasInfo.offsetTop + currentOpts.margin
            ];
        } else {
            return [
                $(window).width() - (currentOpts.margin * 2),
                $(window).height() - (currentOpts.margin * 2),
                $(document).scrollLeft() + currentOpts.margin,
                $(document).scrollTop() + currentOpts.margin
            ];
        }
    },
+5

, 'centerOnScroll': true, ...

+1

. , fancybox CSS. , fancybox CSS:

#fancybox-wrap {
    top:    20px !important;
}

fancybox 20px iframe. , . ! , fancybox .

0

, Fancybox , Uploadify, .

:

<style id="style-block">
body { background-color: #e7ebf2; overflow: hidden; }
</style>

Fancybox , . . div, ( ), , fancybox (! Important fancybox), , wrapCSS fancybox, fancybox , .

function viewImage(image, width, height) {
    var complete_pos = $('#image_queue_complete').position();
    var css_code = '.fancy-position { top: ' + complete_pos.top.toString() + 'px !important; }';
    $('#style-block').append(css_code);
    var img_src = '<img src="images/' + image + '" width="' + width.toString() + '" height="' + height.toString() + '" />';

    $.fancybox({
        content: img_src,
        type: 'inline',
        autoCenter: false,
        wrapCSS: 'fancy-position'
    });
}
0

More articles:


All Articles