If you have been frustrated with the process involved in eliminating scrollbars in Facebook iframe apps, and cross browser compatibility issues... welcome to Club Misery. But misery loves company, so let's dig in and solve our problems together. First, we need to be on the same page (pun intended) so we assume for purposes of this post that you have read the excellent post by HyperArts and the Facebook Developers explanation of FB.Canvas.setSize: and HyperArts article on getting rid of scrollbars.
We also assume that you have tried following many tutorials and expert discussions on the web related to this subject. And you are still stuck. If that's you... I've been there too. With deep thanks to Tim Ware and Martin Koss, I will chronicle my journey to the Promised Land of no scroll bars!
- I found out that there were often bugs in play on the Facebook side of things. So if things *used to work* and they suddenly don't today... don't panic. Watch and wait... follow HyperArts and others to see if a bug is reported. Then vote for the bug and follow it.
- Once I ruled out bugs (or they were fixed by Facebook) I was left with the reality that not all browsers will work with the Javascript SDK in the same way. I learned that I must test everything in every browser known to mankind. So a little help from your friends goes a long way. Don't assume "stuff works" just because it works in *your* browser. Firefox on a Mac may handle the code differently than Internet Explorer on a PC. You get the idea.
- You *must* use a body style, whether inline or in your external stylesheet, that sets "overflow:hidden." You can style it inline as <body style="overflow:hidden;"> or in your stylesheet as body {overflow:hidden;} but this is a must do.
- I learned by testing that you can "cheat" and include height paramaters in the FB.Canvas.setSize. This has been widely recommended, and it works. But if you are creating a template for your own future use or others' use.. or if you will be embedding dynamic content which resizes... this could pose a challenge. Plus... it just bugged me that I should have to do that since the point of the whole system is to *not* require such a workaround.
- So assuming that you have set the overflow:hidden command properly, and the rest of your stuff is in place correctly... it all comes down to using the correct javascript script in the head section. And for the majority of us who may be "good enough" html and css coders... javascript (at least for me) can be a bit scary. So here are the several versions of that script that I have tried, along with my comments. I begin with the one I'm using, that as of today, 4/7/11, appears to be working in *all* browsers.
HYPERARTS MODIFIED
This is the one I'm using today, and it seems to work in *every* browser.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize( 100 );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
-------------------------------------------------------------------------
FACEBOOK DEFAULT
This will NOT work in all browsers
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
Source:
http://developers.facebook.com/docs/reference/javascript/fb.canvas.setsize/
-------------------------------------------------------
HYPERARTS SUGGESTED
This will work in every browser, but you must manually set the height.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize( 100 );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1700 });
}
</script>
Source:
http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/
comment 29
-----------------------------------------------------------
THE "ITALIAN SOLUTION"
I found this in a forum post a while back, and it works. I just don't know why.
<script type="text/javascript">
window.fbAsyncInit = function() {
setTimeout(function() {
FB.Canvas.setAutoResize();
}, 300);
}
</script>
Source:
http://forum.developers.facebook.net/viewtopic.php?id=76390
http://bugs.developers.facebook.net/show_bug.cgi?id=12733
-------------------------------------------------------
Please note: Chrome and IE are the biggest offenders of mishandling the javascript. If you are not careful, they will always show a scrollbar, or worse... cut off the bottom part of your content if it is over the magic 800 pixels.
Also note: Firefox, especially if viewed on a Mac, will add the dreaded scrollbars more quickly than anything else.
And happy thoughts... Safari, on an iPad, loads fast and never had a problem with whatever I threw its way.
Happy scrollbar free coding!
(Note: Before commenting on this post, click the tag below the post to see if I have posted more current information on this subject. Also please note that this post is intended for Facebook App Developers with a thorough knowledge of setting up iframe apps and a good working knowledge of HTML and CSS.)
You've got it Ken. Your code is perfect. I saw your post on Tim's blog and you are spot on. You only need to enter the sizes if, for a variety of reasons, the length of the content is so variable you need sizes. Adding the code as you have done seems perfectly cross-browser compatible (it is pretty much exactly what I use on a few of my pages).
Thanks!