IE7 - setAutoGrow doesn't work

I have created a facebook application that I am using inside a tab's iFrame.

I am using the setAutoGrow function of the Javascript SDK to make the iFrame expand until the end of the content.

From my observations, the setAutoGrow function does not work in IE7, and I can't figure out why. All other browsers (including IE8 and 9) are working correctly.

For testing purposes, I have created a gradient that is 1500px high.

As an example, I will post what it looks like in Chrome. As you can see, the gradient can be scrolled until the end (red color):

And now comes what happens in IE7. The iFrame has a default height of 800px (as defined in the app settings). You can see that it stops at "turquoise", and the setAutoGrow function does not extend it to the desired height (1500px).

The important part of my CSS looks as follows:

body, html { 
    overflow: hidden;        
    margin: 0; padding: 0;
}

    #wrapper {
        margin: 0 auto;
        width: 810px;    
    }

        #content {
          background: url(../img/bg.jpg) top left no-repeat;
          height: 1500px;
        }

And this is the javascript snippet I've placed just before the closing body-tag and after the fb-root tag:

window.fbAsyncInit = function() {

    FB.init({

        appId      : '...',
        channelUrl : '...',
        status     : true,
        cookie     : true,
        xfbml      : true

    });

    FB.Canvas.setAutoGrow();

};

I have found a bug report that dates back to the 1st of August, which has been closed by FB: https://developers.facebook.com/bugs/209607222498543?browse=search_5009002cb69058a73627413

I have read and applied the hints from the following topic: Facebook iframe FB.Canvas.setAutoGrow does not auto grow after initial load?

... but nothing seems to solve the problem.

Does anyone have an obvious hint, something I have overseen, or an easy solution/workaround for this problem?

While I was using IE7 DebugBar I noticed that it was having a problem loading a URL called "dimension_context.php". I will attach the screenshot.

Answers


I am using this may be it helps you

<html>
<body>
    <div id="fb-root">
    </div>
    <script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript" language="javascript">
        FB.init({
            appId: 'APPID',
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true// parse XFBML
        });
        window.fbAsyncInit = function () {
            FB.Canvas.setSize();
        }
        //  FB.Canvas.setAutoResize();
        FB.Canvas.setAutoGrow(7);
    </script>
<form></form>

</body>
</html>

Have you tried busting the all.js's cache by adding a random GET parameter to it? Also, I'd rewrite the http:// part to // so the javascript file would load properly in case facebook is in https mode.

<script type="text/javascript" language="javascript" src="//connect.facebook.net/en_US/all.js?v1"></script>

You can see here that my tab is working on IE7:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script>
</head>
<body style="overflow:hidden">
<div id="fb-root"></div>
<!-- YOUR HTML -->
<script type="text/javascript">
window.fbAsyncInit = function () {
        FB.init({
            appId: 0000000000000, // App ID

            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0
            xfbml: true  // parse XFBML
        });

        FB.Canvas.setAutoGrow();
        FB.Canvas.setSize({ width: 810, height: 1417 });

    };



    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));
</script>
</body>
</html>

My app settings:

Page Tab Width: 810px Canvas Width: Fixed Canvas Height: Fixed at 1147px

If you want your tab to adapt to different heights try this in each page:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script>
</head>
<body style="overflow:hidden">
<div id="fb-root"></div>
<!-- YOUR HTML -->
<script type="text/javascript">
$(document).ready(function(){
    window.fbAsyncInit = function () {
        FB.init({
            appId: 0000000000000, // App ID

            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0
            xfbml: true  // parse XFBML
        });

        FB.Canvas.setAutoGrow();
        FB.Canvas.setSize({ width: 810, height: $(document).height()});

    };



    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));

});
</script>
</body>
</html>

Check out an example:

https://www.facebook.com/pages/Vpascoal/215529398504982?sk=app_105369212942645 (click on the image)


Need Your Help

Is it better to query on the FK or the PK in a join query

sql-server-2005 performance

Using SQL2k5 and assuming the [ID] columns are the clustered PK and the [FK...] columns have a nonclustered index, of the two queries, which WHERE clause is more efficient?

Disabling/Enabling a Continue button

java android button sharedpreferences

I'm a beginner when it comes to Android Studio/Java, so please forgive me if the question is kind of silly.