Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://jsbin.com/ofere"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
​
#nav { width: 580px; height: 120px; left: 150px; position: relative; overflow: hidden; }
​
.navblock { height: 100px; width: 100px; position: absolute; top: 10px; z-index: 50; background-color: grey; }
.navblock0 { left: -110px; }
.navblock1 { left: 10px; }
.navblock2 { left: 120px; }
.navblock3 { left: 230px; width: 120px; height: 120px; top: 0;}
.navblock4 { left: 360px; }
.navblock5 { left: 470px; }
.navblock6 { left: 590px; }
​
#leftnav, #rightnav { position: absolute; z-index: 100; height: 120px; width: 228px;}
#leftnav { left: 0; }
#rightnav { right: 0; }
​
/*Uncomment the following to help debug or see the inner workings */
/*
#nav { border: 1px solid green; overflow: visible; }
#leftnav, #rightnav { border: 1px solid blue; }
*/
</style>
</head>
<body>
<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>
​
<div class="navblock navblock1">one</div>
<div class="navblock navblock2">two</div>
<div class="navblock navblock3">three</div>
<div class="navblock navblock4">four</div>
<div class="navblock navblock5">five</div>
</body>
</html>
 
function rotateNav(direction) {
if (direction === 'left') {
  var change = 1;
  $('.navblock5').clone().removeClass('navblock5').addClass('navblock0').appendTo('#nav');
}
else {
  var change = -1;
  $('.navblock1').clone().removeClass('navblock1').addClass('navblock6').appendTo('#nav');
}
​
$('div.navblock').each(function() {
  var oldClassName = this.className.split(' ')[1],
    oldPos = parseInt(oldClassName.substr(8)),
    newPos = oldPos + change;
  
  console.log(oldClassName+" "+oldPos+" "+newPos);
    
    $(this).switchClass(oldClassName,'navblock'+newPos, 'fast', function () {
      var animated = $('.navblock:animated').length;
      if (newPos === 6 || newPos === 0) {
        $(this).remove(); 
      }  
      if (animated === 1) {
        $('#nav').dequeue();
      }
    });
});
  console.log('----------------');
}
​
$(document).ready(function(){
$("#leftnav").click(function() {
  $('#nav').queue(function(){rotateNav('right');});
});
$("#rightnav").click(function() {
  $('#nav').queue(function(){rotateNav('left');});
});
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers