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>
<html lang='en'>
  <head>
<link class="jsbin" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <style type="text/css" media="screen">
      .viewport {
        width: 700px;
        height: 400px;
        border: 1px solid red;
        overflow: hidden;
        position: relative; }
        .viewport .surface {
          width: 2100px;
          position: absolute;
          left: -700px; }
          .viewport .surface .element {
            height: 98px;
            border: 1px solid black; }
            .viewport .surface .element p {
              width: 10%;
              margin: 0 auto; }
              
      #rolling-pin-vertical-carousel .surface {
        top: -200px; }
      
    </style>
    
    <script type="text/javascript" charset="utf-8">
        var Testbed = {};
        
        Testbed.vertical_carousel = function(event, ui) {
          console.log(ui.position.top);
          if (ui.position.top > -100) {
            var surface = $(event.target);
            surface.find('.element').last().prependTo(surface);
            surface.css('', (ui.position.top - 100) + 'px');
            ui.position.top = ui.position.top - 100;
          }
        }
        
        $(document).ready(function() {
          $('#rolling-pin-vertical-carousel .surface').draggable({
            axis: 'y',
            drw
          });
        });
    </script>
    <link href="/stylesheets/testbed.css?1268643419" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>The rolling pin - vertical carousel</h1>
    <div id='rolling-pin-vertical-carousel'>
      <div class='viewport'>
        <div class='surface'>
          <div class='element'>
            <p>1</p>
          </div>
          <div class='element'>
            <p>2</p>
          </div>
          <div class='element'>
            <p>3</p>
          </div>
          <div class='element'>
            <p>4</p>
          </div>
          <div class='element'>
            <p>5</p>
          </div>
          <div class='element'>
            <p>6</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers