OK, so i've been working on an FB app that changes height on every page. I, obviously used the setAutoResize function in my app layout and i have the following:
window.fbAsyncInit = function() {
FB.init({appId: '###', status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();
};
And it works fine in IE, Safari and Chrome but not in FF4. I also used:
window.setTimeout(function() {
FB.Canvas.setSize({height: $('body').height()});
}, 1000);
but no luck either. Does anyone experienced this before? tnx in advance.
Mark
An answer has already been provided, but I might as well post my solution to the problem. In Firefox the scrollbars are still part of the iFrame even if your page fits. They just don't have the blue scroller. This adds about 20px.
I don't think that your jQuery solution will work because height() doesn't take into account margin and padding. Maybe try this.
FB.Canvas.setSize({ height: $(document.body).outerHeight(true) + 20, width: 760 });
I added this to my css and it seemed to work (didn't have to muck with my autoresize):
body {
margin-top: -20px;
padding-top: 20px;
}
If you already have padding added to the top of your body, you will likely need to add 20px to it.
I assume it's because firefox measures the body height differently than other browsers.
Tested in ff8, chrome16 and ie9 with no negative repercussions.
This sounds like it might be a bug? Check out:
http://bugs.developers.facebook.net/show_bug.cgi?id=10889
If this is affecting you vote it up :)
FYI Warning! According to the Facebook Developer Roadmap FB.Canvas.setAutoResize will be renamed to FB.Canvas.setAutoGrow on July 5, 2012.
From the page:
We have renamed FB.Canvas.setAutoResize to FB.Canvas.setAutoGrow so
that the method more accurately represents its function.
FB.Canvas.setAutoResize will stop working on July 5th. We will
completely delete the function on August 1st.
Related
I had a fb:likebox that had proper width since last year. However recently suddenly the width of the box went wrong, it became much wider than it was before.
In the HTML source I still see the width="185" setting being there, but it has no effect.
The site can be seen here: http://tinyurl.com/m932dlq
Do you have any idea what might have changed? Did Facebook change something? I haven't found any other similar complaints.
Facebook has broken it, but you can revert it by a bit of CSS:
.fb-like-box span, .fb-like-box iframe {
width: 185px !important;
}
Facebook changed the fan box. The minimum width is now 292px. Here's the link for FB Developers
As the title says. Here is the URL if you have an iPad - How can I remove the responsive width of the Comments Plugin for iPads? (bottom of page) http://dev.assessmentday.co.uk/aptitudetests_numerical.htm
I ran into this too. I've worked around it by manually adding the data-mobile attribute set to false if I detect this is on an iPad:
<script>
if (navigator.userAgent.match(/\biPad\b/)) {
document.querySelector('div.fb-comments')
.setAttribute('data-mobile', 'false');
}
</script>
This could be improved to handle other tablets as well, but the best way to do that depends on how Facebook auto-detects "mobile", which I'm not sure of. Perhaps based on display width, perhaps based on the presence of touch event handlers, or perhaps indeed by user-agent on the server-side.
I have several iframe apps that stopped vertical resizing today. Has anyone else noticed an issue? Here is the small excerpt from my code that does the resizing on several apps:
if (appsettings.minheight != "null")
{
FB.XFBML.parse();
FB.Canvas.setSize({ width: '810px', height: appsettings.minheight + "px" });
FB.Canvas.scrollTo(0,0);
}
appsettings.minheight does have a value, and this was working fine recently. From the docs:
Note: this method is only enabled when Canvas Height is set to "Settable (Default: 800px)" in the Developer App.
I double checked this, and the app settings were all set to fluid, but this has been the case for a while. I tried toggling to Fixed (and setting a value) earlier today, but still no luck. I do not have a setting called "Settable."
Thanks,
Tim
Try it without the "px" like in the documentation: FB.Canvas.setSize({ width: 640, height: 480 });
This has surely been covered countless times, but I cannot find a working solution.
how do you get rid of the scrollbars in a Facebook iframe app in Chrome. Both IE & Firefox are fine.
Using the suggested CSS overflow:hidden, simply cuts off the content if its over 800px in height.
Even the Facebook Coca Cola iframe app has the content cut off!! see here
http://www.facebook.com/cocacola?sk=app_161193133389
this is what is also happening to my app in Chrome (v. 16.0.912.77 m)
add this to your canvas app's fb js:
FB.Canvas.setSize({ width: 520, height: X });
where X is the height you want.
If your app is fluid use:
FB.Canvas.setAutoGrow();
i had a similar issue: after adding FB JS SDK and
FB.Canvas.setAutoGrow();
i had to set
body{}
in css to keep the scroll bars from showing in chrome. In my case is was padding.
body{
overflow: hidden;
margin: 0px;
padding: 0px;
}
I would also try to set the size with a delay and experiment with it a little:
window.setTimeout("FB.Canvas.setSize({ width: 520, height: 1111 })", 2000);
Also don't forget to initialize Facebook with your app id ( FB.init ) before calling FB.Canvas.setSize or FB.Canvas.setAutoGrow.
You have to make a few tweaks to you app. First, add the following code to your page:
FB.Canvas.setAutoGrow(); to tell the Facebook SDK to resize the iframe if the contents is longer.
Add overflow: hidden to the <html> or <body> CSS
Check your app settings and make sure you have set the Canvas Width to 'fluid' and Canvas Height to 'fixed' (Go to Settings > Advanced > Scroll to Canvas Settings.)
All of these things should fix the scroll bars. If it doesn't, using something like "Inspect Element" in Chrome to see if something is causing the bars to appear.
There are various solutions you could try below. Please comment as to which one, or if none of them work and I will update this answer accordingly.
If you haven't already, try adding: body{overflow:hidden;}
You may also have javascript disabled.
Alternatively, you could set the fixed height for the app very high in the app settings, where it says: fixed[ ]. Also make sure that fixed is selected on your app settings.
If this happens on other apps, including that CocaCola page you mentioned, then it could possibly be the browser. Try updating. I use the Chrome 19.0.1084.56 and I have no problems, (except for me the height is always pushed to a 1200px maximum height).
Also look here: 'Choosing between Facebook iframe scrollbar or page cut off halfway' where there is a solution that you can try.
Edit: Also look here: 'Timeline page app height stuck at 800px'.
Edit: After some looking through the Facebook bug area, Facebook say this is not a bug on Facebook's end, therefore must be a problem in your code. (Source: 'https://developers.facebook.com/bugs/360687100649759')
If that doesn't work, then comment and say so and I will do some further research.
I tried teh jScroll plugin by Kelvin Luck. First of all its a wonderful script. Its working fine with text, ie text as contents, in all browesers. But when we insert images in that the scroll is not working in Safari and Chrome... please help me. Am a beginner in javascrpt...:)
Retheesh
Another way of doing it is to initialise the plugin once the entire page is loaded
$(window).load(function(){
$('.scroll-pane').jScrollPane();
})
Ok, this way late, but I just spent most of the day figuring this out.
It's actually quite simple and also sort of explained in the jScrollpane Demo pages...
Since I am using the Wordpress plugin, using the the workaround Dann provided seemed a bit to complicated. The solution here is setting the image height in your CSS file for this specific page instead of (or on top of) declaring them inline.
So basically if you have
<div id="mydiv">
<img src="...." height=200px"/>
>/div>
jScrollpane won't recognize the height of the pictures and count them for your div height. So you need to add a class to your div and define the img height in your CSS:
#mydiv .newclass img {
height: 200px;
}
and it will work fine!
I had a similar problem.
Reinitialising the panel seemed to work.
I used this script:
$('.image_class').load(function () {
$('.scroll-pane').jScrollPane();
});
Dann
It's a known issue, but Dann's workaround is effective. I ended up testing for the presence of troublesome images, since they weren't always present on the page and affecting the scroll area size:
$(function() {
if($('.image_class').size()) {
$('.image_class').load(function() {
$('.scroll-pane').jScrollPane();
});
} else {
$('.scroll-pane').jScrollPane();
}
});