AJAXified jQuery Flip Plugin
11 Nov 2009I was talking to a friend a couple of weeks ago and he was looking for some plugin that would visually flip over a section of the screen (like flipping an index card). He had a master/detail layout and wanted to be able to click on a link from the master, the content would flip, and then the detail content would be displayed on the flipped side.
I recommended the Flip! jQuery Plugin since it was the closet thing I was aware that would do this effect without WPF, Flash, or Silverlight. Since the plugin supports several custom events (onBefore, onAnimation, onEnd) I figured that on the onBefore event an AJAX call could be initiated and the callback content can be inserted onto the reverse side of the master.
Here is a sample application that I put together last night. The app requests your twitter username, flips, retrieves the latest tweet using JSONP from Twitter for that username, and then displays it on the flip side.
I have hosted it on JsBin so that you can view the code, run the code, and edit the code to your heartβs content ;) I have also listed the code here below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
AJAXified jQuery Flip! Plugin
Enter Twitter Username
View Source Code & Edit
I hope you found this plugin interesting. I had a fun time putting it together ;)
Β 
