I'm working on a FB canvas app using Flash with 3D graphics. I must embed my SWF with param wmode="direct".
According to FB documentation, when using wmode="direct", FB hides the flash object when displaying a popup/dialog (buy credits, chat, notifications, etc.) and after the popup close, it shows the flash again.
On Chrome and Firefox it works, but on IE, after the dialog closes I checked the flash element style and I saw that visibility=visible, but still the flash is still hidden!
I tried several approaches, all with same result:
Not using "hideFlashCallback" on FB.init (let FB do it
automatically)
Using "hideFlashCallback":
function onFlashHide(params) {
if (params.state == 'opened') {
hideFlash();
FB.Canvas.hideFlashElement(params.elem);
} else if (params.state == 'closed') {
showFlash();
FB.Canvas.showFlashElement(params.elem);
}
}
function hideFlash() {
$('#flashContent').css('visibility', 'hidden');
}
function showFlash() {
$('#flashContent').css('visibility', 'visible');
}
Thanks!
Roei
UPDATE:
Another reference to FB documentation: http://developers.facebook.com/docs/appsonfacebook/tutorial/#flash
I had the same problem with IE when calling the FB.ui functions. The Facebook dialog would open, but when closed Flash would not come back.
I found a trick which solves this. Before calling to the FB functions, use javascript to set focus to a different HTML element. After that, the Flash object became visible again when I was done with the Facebook dialog.
// IE9 has a problem where the Flash object won't regain
// focus if it has focus when the FB UI is called. To fix this,
// We'll redirect focus before the call.
var lFocus = document.getElementById('focus_target');
lFocus.focus();
Hope this helps.
Have you tried using display: none; and display:block instead of visibility: hidden and visibility: visible? In past projects I have noticed that IE sometimes has trouble with the visibility CSS property...
Related
I have added a facebook like button to my page, however when it is clicked the flyout appears, and then disappears.
At first I thought it was other elements on the page hiding it, but the problem persisted even on blank pages.
Tried both the iframe and html 5 codes that were generated by facebook and neither seems to work.
iframe - http://jsfiddle.net/aDK95/1/
Html 5 - http://jsfiddle.net/L9nZZ/1/
In both cases it seems to been hidden by the hidden_elem class:
#facebook .hidden_elem {
display: none !important;
}
It seems very similar to this bug reported at FB that was reported in May. However there doesn't seem to be much movement on it.
Has anyone else come across this? Know of any work arounds?
I came across this bug and it flummoxed me for quite a while. The steps I took to rectify it are as follows:
Ensure that you have put in the Javascript SDK initialization
Make sure that the #fbroot div is not inside a hidden div
In the Open Graph tags on the page, the og:url has to be set to a https protocol
and not a http protocol
Run your page through the Facebook Debugger at https://developers.facebook.com/tools/debug to check for any errors. Another interesting point which helped me resolve this was that when you put in your "URL to Like" value in the Like configurator, the dynamic like button generated shows whether that url would work well or not.
I'm trying to pop open an apprequests dialog using the following cod:
$("#fbInviteButton").click(function(){
FB.ui({
method: "apprequests",
message: "Test"
};
});
When the button is clicked, a box pops up with the loader and just sits there. In the developer console in Chrome, I can see the ajax request complete and content come back.
When I look at the HTML source, I see the other dialog (class: "fb_dialog fb_dialog_advanced"), with populated content, and when I toggle the CSS for that window:
top: -10000px
the dialog with content comes into view.
So for some reason, when the content is loaded, it doesn't pop into place and replace the loader. Any idea what would cause this?
The application is Ruby on Rails using the Asset Pipeline.
I believe a bug in Facebook's JavaScript SDK causes this problem. I am currently using an older version of SDK taken from here as a workaround.
Opening my mobile webpage from my homescreen (after adding it to my homescreen), it starts in fullscreen mode, so far so good.
After logging in (form/submitbutton), the 'app' is still in fullscreen mode, which is also the desired result.
Now, when I click a link that has the rel="external" attribute, webkit opens a new window in Safari, so it exits the fullscreen 'app' I started from my homscreen, I would like it to stay in fullscreen mode.
data-ajax="false" has te same result. Removing data-ajax="false" and rel="external" will not exit fullscreen, but this way you can't link to a multi-page document (1 document with different data-role="page").
Does anyone has the same problem, or even better, a solution?
I do not really care about the transitions, I just want the webpage to remain in fullscreen mode, (the user has to log in again when the new window has opened).
iPhone 3gs
M_webkit / 5.0.2
Why not create a script that pulls out the href and goes to the new url via javascript.
If you use jQuery it's as simple as:
$("a[rel='external']").bind("click",
function() {
if (this.href) {
location.href = this.href;
return false;
}
});
Without jquery you'll need to use object detection and attach a click event to it with the same logic inside the anonymous function above.
I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps
I'm implementing Facebook connect for a website. The Facebook Connect code is inside an iframe. Everything works well but when Facebook is supposed to show a popup dialog (for example FB.Connect.showFeedDialog or FB.Connect.streamPublish) The popup shows inside the iframe.
Since its a small iframe window the popup is half hidden.
Any idea on how to solve it is very much appreciated.
Note: the FB login and logout popups do show well.
My window was too small to show the FB iframe properly, so I overrode the private _openFeedDialogIframe function to call the _openFeedDialogWindow:
var init = function()
{
FB.Connect.get_status().waitUntilReady(function(status)
{
FB.Connect._openFeedDialogIframe = function(b, a, f)
{
FB.Connect._openFeedDialogWindow(b, a, f);
};
});
};
FB.ensureInit(init);
This forces a popup every time an iframe is to be shown.