My fb app requires users to press up and down arrow key. it works well when on an independent page, but when i integrate it on fb, the problem is, when the user presses up or down arrow key, the fb page scrolls up or down. There should be a solution to this. Kindly suggest.
I believe this is because the focus on loading the iframe in Facebook is on the actual page and not the iframe. The following javascript code should prevent the parent page from scrolling.
document.onkeydown = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
if (keyCode >= 37 && keyCode <= 40) {
return false;
}
};
Related
We're testing a new tracking method and want to pass the Facebook fbclid on to the client.
Just to be clear...
The user clicks the Facebook ad,
They land on our page
They click a button and are taken to the client
How can we capture the fbclid and forward it on to the client when the user clicks the button on our page?
I added the following code. Which included adding a class to the link. Will check to see if it works.
let anchors = document.getElementsByClassName("marketingAnchor")
Array.from(anchors).forEach(element => {
let currentURL = new URL(window.location.href)
let AnchorHref = element.getAttribute('href')
let tmpURLObj = new URL(AnchorHref)
let fbclidParam = currentURL.searchParams.get("fbclid")
if (AnchorHref == null || fbclidParam == null) return;
tmpURLObj.searchParams.set('fbclid', fbclidParam);
element.setAttribute('href', tmpURLObj.href)
});</script>
I am using the ckEditor along with GWT and SmartGWT. I have a problem that whenever the ckEditor displays a dialog (e.g. link button, table button), although the items in the dialog gain focus (input texts work fine, I can write inside them), the dropdowns (select elements) when clicking on them, do not expand to show their option items (they expand only when they have focus and user hits "spacebar"). This happens only in firefox and chrome (latest versions) while on IE11 it works as expected.
Note that I am already aware of the "focus" problem existing if a ckEditor instance exists in a GWT/jquery modal and I have already included a fix:
$wnd.CKEDITOR.on('dialogDefinition', function (evt) {
var dialog = evt.data.definition.dialog;
dialog.on('show', function () {
var element = this.getElement();
var labelledby = element.getAttribute('aria-labelledby');
var nativeElement = $wnd.document.querySelector("[aria-labelledby='" + labelledby + "']");
nativeElement.onclick = function (evt) {
if ((evt.target.tagName == "INPUT" || evt.target.tagName == "SELECT" || evt.target.tagName == "TEXTAREA") &&
-1 != evt.target.className.indexOf("cke_dialog_ui_input")) {
evt.target.focus();
};
}
});
});
Any hint how I can make the dropdowns to behave correctly? To me it looks like the dropdown element does not receive the click event (although on click it gets focus) or somehow the event's propagation stops unexpectedly.
EDIT
Forgot to mention that the problem appears if the ckEditor instance is inside a modal SmartGWT window. More specifically if I set
Window win = new Window(); //com.smartgwt.client.widgets.Window
win.setIsModal(false);
and then add the DynamicForm form which contains the ckEditor item on that window then the dialog dropdowns work fine, however if I set
win.setIsModal(true);
I get the faulty behavior described above
In case anyone else has the same problem with me, the solution is to call win.hideClickMask() upon show event of the dialog. This can be achieved in many ways depending on how ckEditor is integrated with SmartGWT. In my implementation this is achieved by overriding onDialogShow() as below:
final CKEditor ckEditor = new CKEditor(conf) {
#Override
public void onDialogShow() {
// to overcome the problem that smartgwt modality obstruct the dropdowns of a ckeditor dialog to be pressed
final NodeList<Element> allWindowsWithModalMask = findAllWindowsWithModalMask();
if(allWindowsWithModalMask != null ) {
for(int i =0; i<allWindowsWithModalMask.getLength(); i++) {
Element el = allWindowsWithModalMask.getItem(i);
String id = el.getAttribute("eventproxy");
if(Canvas.getById(id) != null) {
hideClickMask(Canvas.getById(id).getOrCreateJsObj());
}
}
}
}
};
and
protected native NodeList<Element> findAllWindowsWithModalMask() /*-{
return $wnd.document.querySelectorAll("[class='windowBackground']");
}-*/;
protected native void hideClickMask(JavaScriptObject windowCanvas) /*-{
windowCanvas.hideClickMask();
}-*/;
I'm testing my web app login flow on the iOS8. I notice that on iOS8, the login dialogue pops up, but after logging in, it just stays there, showing a blank page.
The login works, because the page behind it shows the user information, but the popup just stays there, while it should close automatically. On iOS7 and iOS6 it does close. On desktop browsers it closes too.
I've tested some other random sites (for example brainfall.com) using FB.login(): same thing.
Does anyone have a fix for this?
Any help is much appreciated!
Check this:
fb_window_redirect
Override de window.open method. This allows you to know what windows are opened.
Then you can redirect the window opened by the FB SDK.
...
window._open = window.open; // saving original function
//Override the function
window.open = function(url,name,params) {
var new_window = window._open(url,name,params);
if (typeof onWindowOpen === "function") {
onWindowOpen(url, name, params, new_window);
}
return new_window;
};
...
var openedWindows = [];
var fbWindows = [];
function onWindowOpen(url, name, params, new_window) {
...
// Filter the facebook oauth request
if (url.contains('facebook.com')
&& url.contains('oauth')) {
fbWindows.push(new_window);
}
openedWindows.push(new_window);
}
...
//On fb login button pressed callback:
FB.login(function(response) {
//Try login
if(response.authResponse) {
//Login succesful
// Fb window redirect.
// see onWindowOpen
var fbwin = fbWindows[0];
var redirect_url = ''
fbwin.location = redirect_url;
}
},
{scope: 'email,publish_stream,user_birthday'});
...
i am just trying to implement facebook and twitter in my Webworks App and cannot get them work together.
I am using the FaceBook-OAuth-2 and the Twitter-OAuth-1 sample and i just put both stuff together and my problem is that only the first startOAuth() opens a window in the app to login the second doesn't so if i first clicked facebook it works after when i try twitter nothing happens.
https://github.com/blackberry/BB10-WebWorks-Samples
thanks
function setClickHandlers() {
console.log('set click handlers');
var fb = document.getElementById('facebookOn');
fb.addEventListener('click', function(e) {
// if the childWindow is already open, don't allow user to click the button
if(childWindow !== null) {
return false;
}
e.preventDefault();
toast('Contacting Facebook...');
setTimeout(function() {
startOAuth();
}, 500);
});
console.log('set twitter click handlers');
var tw = document.getElementById('twitterOn');
tw.addEventListener('click', function(e) {
// if the childWindow is already open, don't allow user to click the button
if(childWindow !== null) {
return false;
}
e.preventDefault();
toast('Fetching access token...');
setTimeout(function() {
twittergetAccessToken();
}, 500);
});
}
I would start by adding some debug code in your click handler to see if that's getting called when you click the button in the first place.
If it is, then I recommended you use Web Inspector (console) to see if there are any errors. If there are, they'll show up there.
Good reference for Web Inspector here - http://developer.blackberry.com/html5/documentation/web_inspector_overview_1553586_11.html
If the click handler is not being fired then perhaps you have the wrong element ID, or the setClickHandlers function is not being executed.
I would like to have a fixed element (a DIV) in the iFrame for my Facebook Application. So when the user scrolls down the page, that element is still fixed on the top of the browser window?
The basic: You add stuff to a bag, while you are scrolling down, and a fixed DIV will show you your "score" while you add these things to the bag. The "score counter" should always be visible while scrolling.
Thank you!
This is not possible if you are using facebook's iframe auto-resize features. Once the iframe is resized so that scrolling is not necessary, the only scroll available will be the one of the parent window. However, the child iframe has no information about the scroll of the parent window (since they are not on the same domain...) and trying to listen to scroll events or scroll position will only return that the scrollbar is at position 0, or topmost.
You can however listen to click events and extract the offset of the click event or the clicked element.
Some examples:
$('.clickme').click(function(e) {
e.preventDefault();
var top;
// Using click position (e.pageY and e.pageX available)
top = e.pageY;
// Using clicked element position
top = $(this).offset().top;
$('#moveme').css({'top': top - 100 + 'px'}); //
}
Maybe you can base your interaction on this principle instead?
I don't know about you Erik but this really doens not help me much.
Could FB.Canvas.getPageInfo help?
Maybe that would help : I was ussing
(function() {
var el = $("header:first");
var elpos_original = el.offset().top;
$(window).scroll(function(){
var elpos = el.offset().top;
var windowpos = $(window).scrollTop();
var finaldestination = windowpos;
if(windowpos<elpos_original) {
finaldestination = elpos_original;
el.stop().css({'top':0});
} else {
el.stop().animate({'top':finaldestination-elpos_original},0);
}
});
})();