Facebook FBJS Examples

I’ve been asked several times recently if the FBJS examples on my Facebook fan page have a tutorial, so I figured I should probably post something. I hadn’t previously, since they were pretty basic examples, but Facebook is great at making stuff look way more complicated than it is, so if it helps demystify it a little, I’m happy to do my part.

You’ll want to look at the example fan page link here so you can see the effects that each one of these code snippets invokes. Without the corresponding page, it won’t really make much sense.

These examples will work FBML applications and Static FBML tabs.

IMPORTANT NOTE: FBJS onmouseover effects shown here will ONLY work after the user has clicked on a clickable element elsewhere on the page. Once the user has clicked on something else within the tab, all mouseover effects work properly for the duration of that page load. If the user reloads the tab, they have to click again before mouseovers will work.

It’s a restriction of Facebook, and there’s no way around it other than to use CSS workarounds when they’re available – a few are detailed at the bottom of the page. The onmouseover restriction may change as Facebook transitions over to iframe tabs, but as of this article, a click is required first.

I’ve never really understood exactly what “security” benefit Facebook thinks they’re gaining from this behavior, but it’s something to consider when you’re planning the interactive elements of your tabs.

I’ve included all of the examples here for continuity so that it’s easy to follow along, even though some of these effects are kinda stupid. Like the first few in particular. But keep reading – they do get more useful. And perhaps more importantly, they work great as an uncluttered introduction to the way the Animation() function works.

Also, please forgive the weird element names. I needed to make sure there were no naming conflicts, and since I added onto that page in a sort rambling way, I didn’t always make the names very intuitive. On the other hand, I didn’t want to risk changing things here for clarity and accidentally breaking something.

Just about all of the FBJS examples below use the Animation() function, and if you’re familiar at all with JavaScript libraries like jQuery, you’ll notice some similarities in how you can chain events and functions here as you can in jQuery. If you’re not familiar with jQuery, you’re missing out. I can pretty confidently say it’s changed the face of front-end web design over the past several years. Go learn it. You won’t be sorry.

Also keep in mind that if you’re using FBML for a static tab or an app, you may not need some of these FBJS transitions. Sometimes a simple clicktohide, clicktoshow or clicktotoggle will work. Although I haven’t written about those functions here on FBMHell.Com much, I have several in-depth tutorials that cover them on my main blog.

Simple Text Highlight and Flash Effect – onClick

These are pretty stupid. Not sure why anyone would use them. As you can see, each link has slightly different settings that specify what color the Animation() should transition the background to and from, and the third example chains a duration() onto the end before calling the go() trigger.

[html]Highlight the link background color.

Flash the background color.

Highlight the background color.[/html]

Move Link – onClick

Another stupid example, but hopefully it gets you used to seeing how the Animation() function works.

[html]Move Me!
Each time you click on the link, it will move another 15 pixels.[/html]

Move Animation – onMouseover

Put your mouse over the links below – this action will trigger an animation in the opposite link. Take a look at what’s happening here. We’ve named two different link elements, me_1 and me_2. The onmouseover Animation() specifies the id of the opposite link, and then chains the actual animation behavior and locations onto the end.

[html]Move the other on the right
Move the other on the left[/html]

Content Hide (roll-up) with Animation – onClick

This animation hides content in a roll-up type of fashion. Notice the height and opacity set to 0 in the chained events? That’s because at the end of the transition, we want our content to be 0px high, and 0 opacity, so it does a fade-out as it’s rolling up.

[html] [/html]

Content Hiding – onClick

This animation hides content from the bottom and the right, closing in towards the upper left corner. Exact same concept as the hide+fade shown above, but with the additional to('width', '0px') chained in to collapse the width as well as the height.

[html] [/html]

Animated Text Reveal (across and down) – onClick

You can also animate width and height to “auto” for when you want to completely show a div without having to calculate the specific dimensions of its parent:

[html]

About Facebook.[/html]

Animated Text Hide (across and down) – onClick

[html] [/html]

Animated Text Reveal (down)- onClick

There is a very slight difference between this animation and the one demonstrated above. Instead of the animation revealing across and down, this one reveals only down.

[html]

About Facebook.[/html]

Animated Text Hide (down)- onClick

This is the same style of animation as the reveal directly above, only it hides text. Once again, this simply uses the Animation() in an onclick, and then chains the specific height, animation style, duration, etc.

[html] [/html]

Checkpoint Callback “Storytelling” – onClick

[html] [/html]

Ease Functions – onClick

There are three default eases that come with the animation library: begin, end, and both. begin will start slow and end fast, end will start fast and end slow, and both will start and end slow, but will be very fast in the middle.

[html] [/html]

Custom Ease Functions – onClick

This is an awkward ease, but it’s really only meant to demonstrate how you can write your own simple ease functions to call those in your Animation(). In this case, we create a custom function called bounceEase, add some math to create the (awkward) bounce, and specify bounceEase in the ease() option of the chaining.

[html]

function bounceEase(p) {
if (p <= 0.6) {
return Math.pow(p * 5 / 3, 2);
} else {
return Math.pow((p – 0.8) * 5, 2) * 0.4 + 0.6 }
}
[/html]

FBJS Image Carousel

I’m actually skipping that one in this list, since I have a whole tutorial dedicated just to the FBJS carousel already. Click here to check it out.

FBJS Image Swap

This doesn’t seem to be working anymore – I believe they changed something in the FBML. No biggie, since the same effect can be done more reliably using CSS. Since CSS isn’t FBJS, you don’t have the same restriction on mouseover events that was discussed at the beginning of this post, where the user has to click on some clickable element on the tab before mouseover events will fire. In general, if you can accomplish something via CSS instead o FBJS, do it. 🙂

The last two code snippets are strictly CSS and not FBJS at all, but I’m including them so that the demo effects on the Facebook fan page match up with the snippets here.

CSS Image Swap

[html] div.nav {
height: 129px;
width: 129px;
margin:0;
padding:0;
background-image:url(“http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg”);
}

div.nav a, div.nav a:link, div.nav a:visited {
display:block;
}

div.nav img {
width:100%;
height:100%;
border:0;
}

div.nav a:hover img {
visibility:hidden;
}

[/html]

CSS Text Swap

[html] #set_of_links {
position:relative;
padding:9px;
border:1px dotted #999;
background-color:#fff;
margin-bottom:20px
}
#set_of_links a {
display:inline;
padding:2px 9px 2px 9px;
text-decoration:none;
color:maroon;
background:#ececec
}
#set_of_links a:hover {
background:white;
text-decoration:none
}
#set_of_links a span {
display:none
}
#set_of_links a:hover span {
display:inline;
position:absolute;
top:0;
left:90px;
padding:5px 15px 5px 0
}

[/html]