issue with iframe height

I know this topic has been asked about and answered multiple times but please believe that I have spend many hours searching for help and answers that work and/or I can actually understand.

It's the same ol' issue: I have figured out how to add a custom tab and even a custom icon for it (and I am really happy to have been able to do even that!). But, as per many other requests开发者_运维知识库 for help, it has the dreaded scroll bars. I, like the others, want it to flow down past it's limited 800px size. I have several different fixes for this, some I have tried unsuccessfully and some just go right over my head and I do not understand what is being written at all, where it goes and what needs to be edited in it.

I would really appreciate someone taking the time to walk me through the process and explaining the what's and how to's please.

View page here: http://www.bronts.com/bronts_facebook/index.html

View page within facebook here: http://www.facebook.com/pages/brontscom/191839754181703

You will need to use javascript sdk to autosize the iframe in a pagetab app. You will need to have an application id for this. Refer to https://developers.facebook.com/docs/reference/javascript/

the FB.Canvas.setAutoResize(); sets the height of the canvas.

here is working example on my app. http://www.facebook.com/apps/application.php?id=135669679827333&sk=app_135669679827333

NOTE: setAutoResize(); will be changing to setAutoGrow();

ALSO: you may need to reduce the width of your image, not sure until auto size is in place.

---------- i use this and add just below the < body > tags of my documents.

      <div id="fb-root"></div>
<script>
      window.fbAsyncInit = function() {
        FB.init({
    appId  : 'Your-App-Id-Here',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    //channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
        });
/* sets auto size to app canvas and page tab app. */
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>

Add overflow: hidden; to your body and use jQuery.ScrollTo to navigate inside iframe.

<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() 
{
    FB.init({ appId: '1375268019431848', 
    status: true, 
    cookie: true,
    xfbml: true,
    oauth: true});

    FB.Canvas.setAutoGrow();
    FB.Canvas.setAutoResize();
}
</script>