Another FBJS Gem that Caused Me No Little Grief

While the Facebook Developer Documentation has gotten somewhat better, there are places where it is out and out - well - wrong.

For example, then using the addEventListener function connect events to an object, the Facebook documentation says that the third parameter for capture is not used. WRONG.

How do I know this? Well, because I had need to attach both a blur and a change event to an inline edit control… and when the 3rd parameter was left missing, the blur event never fired. Adding false to the third parameter allowed both events to fire (see code below).

if (document.getElementById('inlineEdit')) {document.getElementById('inlineEdit').addEventListener('blur', blurInlineEdit, false);}

if (document.getElementById('inlineEdit')) {document.getElementById('inlineEdit').addEventListener('change', changeInlineEdit, false);}


One of the big challenges in writing Javascript (er, FBJS) for Facebook Canvas Pages is seeing what gets broken by Facebook’s munging of Javascript. By and large, things hang together pretty well. Events, however, probably cause me more grief in debugging Facebook applications than any other area of development focus.

Positioning a dialog on a Facebook Canvas Page

As promised (or threatened) here is a post on some little Facebook development insight gained through some trial, error, blood, sweat, and yes tears.

A problem I was having was accurately determining the x, y position of a given control for popping up informational dialogs. Sure, it was easy enough to use the getAbsoluteTop and getAbsoluteLeft calls to get the absolute positioning (supposed), but after playing around with these calls it became apparent that “absolute” didn’t mean “absolute” in the sense that most web / windows developers would understand. It really is a relative offset - but to what?

After perusing the FBJS docs, and finding no mention of a viewport (which is really what I was trying to determine the offset from), I took a total flier and thought - “well, if I could jet get the root element of my document, and find ITS x and y, I should be home free.

Bingo. That was the trick. Use document.getRootElement() to get the container element.

The code below demonstrates the technique.

var argCtl = document.getElementById(”myForm”);
var newTop = argCtl.getAbsoluteTop();
var newLeft = argCtl.getAbsoluteLeft();
var scrollW = argCtl.getScrollWidth();
var root = document.getRootElement();
var cTop = root.getAbsoluteTop();
var cLeft = root.getAbsoluteLeft();

document.getElementById(”confirm_dialog1″).setStyle(”top”, (newTop - cTop) + “px”);
document.getElementById(”confirm_dialog1″).setStyle(”left”, (newLeft - cLeft) + “px”);

First, grab a reference to an object on the page that you wish to position relative to (in this case, I am using a form named “myForm”). Get its x and y coordinates.

Next, get the container x and y by getting its reference (document.getRootElement()) and then its x and y values (getAbsoluteTop and getAbsoluteLeft).

Finally, to accurately position a dialog where an element exists, take the difference between the container and the element being positioned:

document.getElementById(”confirm_dialog1″).setStyle(”top”, (newTop - cTop) + “px”);
document.getElementById(”confirm_dialog1″).setStyle(”left”, (newLeft - cLeft) + “px”);

Voila. You’ve just positioned a dialog over an element.

In practice, you would want some arbitrary additional offset from the control so that you don’t hide it when you pop up / display your dialog. I’ll leave that as an exercise for the reader.

Adding more Development Content to Logorrhea

I’ve been debating adding more development content to my Logorrhea blog. Prolly will - but will keep things light. (Forgive the avalanche of “ums…” Still working my first cup of coffee when I recorded this!)

Mobile post sent by davidjhinson using Utterz. Replies. mp3