Wednesday, November 11, 2009

AJAXified jQuery Flip Plugin

I 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.

AJAXified jQuery Flip! Plugin

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" ""> 
<html xmlns="" xml:lang="en" lang="en"> 
<script src=""></script> 
<script src=""></script> 
<script src=""></script> 
<script type='text/javascript' src=''></script> 
<script type="text/javascript"> 
firebug.env.debug = false;   // open minimized 
firebug.env.detectFirebug = true; // do not initialize if Firebug is active 
<title>AJAXified jQuery Flip! Plugin</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
.flipBox { 
  width: 500px; 
  height: 200px; 
  background-color: #F6EECA; 
  font-family: Helvetica; 
  color: #000000; 
  text-align: left; 
  padding: 15px; 
<script type="text/javascript"> 
$(function() { 
   $('#flip').live('click', function() { 
      console.log('flip click'); 
         direction: 'tb', 
         content: $('#back'), 
         color: '#C8E3DC', 
         onBefore: function(){ 
            console.log('before starting the animation'); 
            var twitterUsername = $('#twitterUsername').val(); 
            var url = '' + twitterUsername + '.json?count=1&callback=?'; 
            $.getJSON(url, function(data) { 
               console.log('data: %o', data); 
               var twitterList = '<ul>'; 
               $.each(data, function(i, item) { 
                  twitterList += '<li>' + item.text + '</li>'; 
               twitterList += '</ul>'; 
               $('#backTitle').text("Here is " + twitterUsername + "'s Lastest Tweet..."); 
         onAnimation: function(){ 
            console.log('in the middle of the animation'); 
         onEnd: function(){ 
            console.log('when the animation has already ended'); 
            $('.revert').live('click', function() { 
   <div id="front" class="flipBox"> 
      <span id="frontStatic">Enter Twitter Username</span> 
      <input id='twitterUsername' type='text'/> 
      <button id="flip">Submit</button> 
   <div id="back" class="flipBox" style="display: none"> 
      <span id="backTitle">Here is Your Latest Tweet...</span> 
      <span id="backAjax">Back AJAX</span> 
      <button class="revert">Return</button> 
   <a href="" target="_blank">View Source Code &amp; Edit</a> 

I hope you found this plugin interesting. I had a fun time putting it together ;)

 cooltext439925164 cooltext439925034

No comments:

Post a Comment