Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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>
<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>
</body>
</html>
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers