I created a custom facebook landing page using the same template I have used 3 times before. The problem is, this time, ther vertical scrollbar won't go away. This is the resizing code I have been using:
<script type="text/javascript">// <![CDATA[
window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 1200});}
function sizeChangeCallback() { FB.Canvas.setSize({ width: 520, height: 1200});}
// ]]></script>
and at the bottom of the page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
FB.init({
appId : 'MY_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// ]]></script>
My CSS uses body {overflow: hidden;}, inside my app "auto resize" is selected. The issue is not that the ifarme won't resize (it does), it's that I have an empty vertical scrollbar on the right that won't go away.
Since the iframe design uses the whole 520px width, the empty vertical srollbar gives me the dreaded horizontal scrollbar. Judging by the width of the horizontal scrollbar, it's the vertical scrollbar causing it and not anything (that I can find or see) in the HTML/CSS making the page wider than 520px. The problem happens in IE8, IE7 and Firefox.
You can see the page here.
I have tried a few variations of the javascript code from a few different sources, but no luck. Not sure if this is something small I'm missing or if it's yet another facebook bug. This problem is not present on any of my other facebook iframe landing pages. After searching around for an answer and coming up with nothing, I've hit a wall with this one.
Its this code
html {
overflow-Y: scroll;
}
in your style.css style sheet thats causing the problem. When I inspect it with Chrome and remove that value, the scroll bars disappear.
Related
I'm developing iPad html5 webpage that needs to display pages from other origins (different domains).
I'm loading those pages into iframe, and scrolling the iframe using the iOs5 new scrolling ability, as shown in the code below.
<div id="myDiv" style="height: 1185px; width: 100%; overflow:scroll; -webkit-overflow-scrolling: touch;">
<iframe id="myIframe" src="http://http://css-tricks.com/forums/discussion/11946/scrolling-iframe-on-ipad/p1"></iframe>
</div>
The problem is that the off-screen iframe content is not becoming visible when scrolling to it (the frame is blank).
How can I overcome this issue and provide scrollable iframe solution?
OK. found the solution.
apparently, the problem appear when the main document height is shorter than the iframe that is scrolled.
the parts of the iframe page, that exceed the document height, are not rendered.
So, under my needs, I could solve the problem by adding such a js (with jquery) code:
<script>
$(function() {
var iframe = $("#myIframe");
iframe.load(function() {
$("body").height(iframe.height());
});
});
</script>
If you have an access to iFrame body, apply some transform3d to its content to enable GPU rendering.
In my case adding -webkit-transform: translate3d(0, 0, 0); to main wrapping div did the job.
This has been driving me completely nuts for months now. I have created an app for the sole purpose of displaying content customized for facebook from my company's website.
We want something like this: http://www.facebook.com/FarmersInsurance?sk=app_7146470109
But end up with this: http://www.facebook.com/DeltaFlexTravelers?sk=app_110411285713674
I can't get rid of the damn scroll bars! I've done everything that other answers to this kind of question suggest to no avail. I am explicitly setting the width and height using FB.Canvas.setSize(). nothing.
I am wondering if FB.Canvas.setSize() does not work when displaying the content as a page tab. If that is the case how do you get rid of the freakin' scrollbars on an app displayed as a page tab?
Even with the width set in IE I get scroll bars and cut off content. Had to cut it down to 510px. 520 is the max but different browsers may have different dpi settings. Either that or MS gave IE a different definition of a pixel.
Try creating a wrapper div that is the size you want (default 520x800 )and then set the overflow to hidden. Forces you to design within the space but got rid of the scrollbar issue for me. You'll probably also need to set the margin:0,padding:0 for that div as well. If you need more specifics you can look at http://facebook.com/xocialhost at the page tabs we've built. Feel free to look at the source stylesheet which is a modified version of the HTML 5 boilerplate that we've customized to work for our FB apps.
You need to do two things:
1. Use FB.Canvas.setSize(). As an extra hammer use the setAutoResize with a short delay.
2. Set your tab page CSS to overflow = hidden;
Here is the setSize Portion:
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
FB.Canvas.setAutoResize(7);
And here is the CSS portion:
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
Did you try with setting up size? What I always do to get rid of scrollbars is to set 2 things:
Container of my app is always 520px width, and have overflow: hidden set
Height of tab I set with JS API is always bit bigger then actual HTML height.
It always work for me...
And this is the code I'm using:
window.fbAsyncInit = function() {
if(typeof(FB) != 'undefined') {
FB.init({
appId: 111111111111111, xfbml: true, status: true, cookie: true, oauth: true
});
FB.Canvas.setSize({ width: 760, height: 1250 });
}
};
(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);
}());
Facebook's mobile examples use the script: http://connect.facebook.net/en_US/all.js. This script adds to the div fb-root. My mobile site is 320px wide and I use the viewport meta setting. Including Facebook's script causes a big extra space on the right side of the actual content because it's settings it's contents to 575px wide. I tried including code to replace the 575px with 320px ("#fb-root").val().replace("575px","320px"); but that hasn't helped -- maybe I'm doing it wrong (using jQuery).
Anyone know how to restrict this to 320px?
Update:
Found a bug a report on this with two work-arounds:
Set status to false in the FB.init. I can verify that this does fix the problem for me, but breaks the ability for users to login.
Move <div id="fb-root"></div> directly under <body>. This didn't work for me.
Source:
http://bugs.developers.facebook.net/show_bug.cgi?id=18528
I used the following css style rule to beat this 575px #fb-root width problem:
#fb-root > div { left:-575px !important; }
That works because, if you locate the #fb-root node in, say, Firebug's HTML tree-viewer, you'll find that it contains a child div that is styled as follows:
position: absolute; top: -10000px; height: 0pt; width: 0pt;
i just set this in the css by default
#fb-root{display:none}
and when i need to use the FB dialogs(when calling FB.ui), i do this:
$('#fb-root').show();
and in the callback of the FB.ui, i do this
$('#fb-root').hide();
so here is an example:
var inviteFriend = function (msg) {
$('#fb-root').show();
FB.ui({
method: 'apprequests',
message: msg
}, function (response) {
$('#fb-root').hide();
console.log('sendRequest response: ', response);
});
},
this works for me, and i have tested on some devices.
The code you've provided seems to only replace the value in the code, which has, by that point, already fired. You might try to setting the width with jquery's .css() method on fb-root. Make sure this is fired after the fb js sdk is included, or put into the callback method if loading asynchronously.
Or just wrap it in another div, set its height and width, and the put overflow:hidden;
What is the maximum iframe width of a facebook page?
It was 520px.
As with a Canvas Page, the amount of space available to your app is
bounded by the outer context of Facebook. Since your app is also
loaded inside of Facebook Page, the space is smaller (520 pixels) than
what is available to on a Canvas Page.
from FB docs (yes i know that doc about canvas and it's only mentions iframes, but i cannot find quickly reference to full iframe documentation)
Important Update
On the March 30th 2012, Facebook changed this to 810px, to match the new design of timeline.
And here you have a screenshot of the Facebook app, with width 810px.
It's 810 px wide. You don't have to worry about scrollbars if you use the following code...
<!--in head section-->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
<!--at the bottom of your page right before the closing body tag-->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '320332891360172',
status : true, // check login status
cookie : true, // this allow the server to access the session
xfbml : true // parse XFBML
});
</script>
For future reference, you can set the frame width to be floating inside advanced settings of app. This allows you to have any width for your app.
See http://developers.facebook.com/blog/post/549/
I have this Facebook application profile page:
http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566
which is associated with my iframe-based Facebook application, Gem Spinner:
http://apps.facebook.com/gemspinner/
What I'm seeing is that, depending on the window height, my iframed content will appear with a fixed height and a scroll bar, instead of just flowing down the page (and off the bottom of the page, as necessary), as I would like. When I make the window shorter, the scroll bar appears; when I make the window taller, the scroll bar disappears. My understanding is that it's Facebook determining this height and adding the scroll bar (but maybe I'm wrong about that). In any case, I would appreciate any help in understanding this and letting my content flow down the page as necessary.
Well, I did a few things to get it to work.
(1) In my application settings, under the Facebook Integration tab, under IFrame size, I chose Auto-resize instead of Show scrollbars.
(2) I loaded the Facebook connect API (see code below).
(3) I called FB.Canvas.setAutoResize( 100 ) in two different places. I call it twice because it wasn't clear to me which location would make it take effect more quickly. In early testing, I was seeing the iframe height start out short (maybe 800 pixels tall) and then grow to the full size of my content (maybe 1100 pixels tall). In subsequent tests the iframe resizes immediately so I don't see the two states. So I'm not totally clear on the timing/mechanism here.
<body>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
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 : false // parse XFBML
});
FB.Canvas.setAutoResize( 100 );
</script>
... the rest of the page body goes here ...
<script type="text/javascript">
FB.Canvas.setAutoResize( 100 );
</script>
</body>