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.
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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://lab.smashup.it/flip/js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="http://lab.smashup.it/flip/js/jquery.flip.min.js"></script>
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
<script type="text/javascript">
firebug.env.debug = false; // open minimized
firebug.env.detectFirebug = true; // do not initialize if Firebug is active
</script>
<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;
}
</style>
<script type="text/javascript">
$(function() {
$('#flip').live('click', function() {
console.log('flip click');
$("#front").flip({
direction: 'tb',
content: $('#back'),
color: '#C8E3DC',
onBefore: function(){
console.log('before starting the animation');
var twitterUsername = $('#twitterUsername').val();
var url = 'http://twitter.com/status/user_timeline/' + twitterUsername + '.json?count=1&callback=?';
$.getJSON(url, function(data) {
console.log('data: %o', data);
var twitterList = '<ul>';
$.each(data, function(i, item) {
console.log(item.text);
twitterList += '<li>' + item.text + '</li>';
});
twitterList += '</ul>';
$('#backAjax').html(twitterList);
$('#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() {
$('#front').revertFlip();
});
}
});
});
});
</script>
</head>
<body>
<div id="front" class="flipBox">
<span id="frontStatic">Enter Twitter Username</span>
<input id='twitterUsername' type='text'/>
<button id="flip">Submit</button>
</div>
<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>
</div>
<a href="http://jsbin.com/ifoga/edit" target="_blank">View Source Code & Edit</a>
</body>
</html>
I hope you found this plugin interesting. I had a fun time putting it together ;)
No comments:
Post a Comment