CODEWITHSUNDEEP
facebook
Haseeb Asif
Haseeb Asif

Reputation: 1786

facebook app tab iframe borders issue

i have fb app and a tab, as the contents grows, scrolls appears with the iframe but i want to no scrolls for the iframes but i want scrolls for the whole page instead of the i frames

Upvotes: 0

Views: 533

Answers (2)

Sudaththa Ariyasena
Sudaththa Ariyasena

Reputation: 96

The easiest way to hide the scroll bars is to use FB.Canvas.setAutoResize()

Please refer to the following article/tutorial for further information.

http://gpiot.com/facebook-page-tab-hide-scroll-bars-from-iframe/

Upvotes: 0

Mika Tuupola
Mika Tuupola

Reputation: 20387

You also need to start the timer to call autoresize code. In your applications HTML do:

<div id="fb-root"></div>
<script type="text/javascript">
  //<![CDATA[
    window.fbAsyncInit = function() {
        FB.init({appId: "xxxxxxxxxxxxxxx", 
                 status: true, cookie: true, xfbml: true});
        FB.Canvas.setAutoResize();
    };

    (function() {
        var e = document.createElement("script"); 
        e.async = true;
        e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js";
        document.getElementById("fb-root").appendChild(e);
    }());
  //]]>
</script>

Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize(50);
};

If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:

window.fbAsyncInit = function() {
    FB.Canvas.setSize();
}

You can even pass the desired size as parameter

window.fbAsyncInit = function() {
    FB.Canvas.setSize({ width: 520, height: 600 });
}

Upvotes: 1

Related Questions