<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TrackpadScrollEmulator demo</title>
  <link rel="stylesheet" href="../css/trackpad-scroll-emulator.css" />
  <link rel="stylesheet" href="css/demo.css" />
  <noscript>
    <style>
      /**
       * Reinstate scrolling for non-JS clients
       * 
       * You coud do this in a regular stylesheet, but be aware that
       * even in JS-enabled clients the browser scrollbars may be visible
       * briefly until JS kicks in. This is especially noticeable in IE.
       * Wrapping these rules in a noscript tag ensures that never happens.
       */
      .tse-scrollable {
        overflow-y: scroll;
      }
      .tse-scrollable.horizontal {
        overflow-x: scroll;
        overflow-y: hidden;
      }
    </style>
  </noscript>
</head>
<body>
  <h1>TrackpadScrollEmulator demo</h1>
  <p>A jQuery plugin that emulates OSX Lion trackpad-style scrollbars in any browser or platform. Based on the scrollbars in the Rdio app.</p>
  <p>Modern browsers get a very accurate emulation, while less capable browsers miss out on a few bells and whistles.</p>
  <p><a href="https://github.com/jnicol/trackpad-scroll-emulator/zipball/master">Download</a> / <a href="http://f6design.com/journal/2012/06/10/trackpad-scroll-emulator-jquery-plugin/">Blog post</a> / <a href="https://github.com/jnicol/trackpad-scroll-emulator">Github</a></p>
  <a href="https://github.com/jnicol/trackpad-scroll-emulator"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
  <div class="demo1-col">
    <h2>Vertical scroller</h2>
    <div class="tse-scrollable demo1">
      <div class="tse-content">
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
        <p class="odd">Some content</p>
        <p>Some more content</p>
      </div>
    </div>
    <a class="btn add-more" href="#">Add content</a>
    <a class="btn toggle-height" href="#">Toggle height</a>
  </div>

  <div class="demo2-col">
    <h2>Horizontal scroller</h2>
    <div class="tse-scrollable horizontal demo2">
      <div class="tse-content">
        <div class="boxes">
           <div class="box">1</div>
          <div class="box">2</div>
          <div class="box">3</div>
          <div class="box">4</div>
          <div class="box">5</div>
          <div class="box">6</div>
          <div class="box">7</div>
          <div class="box">8</div>
          <div class="box">9</div>
          <div class="box">10</div>
        </div>
      </div>
    </div>
    <a class="btn add-more-horiz" href="#">Add content</a>
    <a class="btn toggle-width" href="#">Toggle width</a>
  </div>

  <!-- JavaScript -->
  <script src="js/lib/jquery-1.7.1.min.js"></script>
  <script src="../jquery.trackpad-scroll-emulator.min.js"></script>
  <script>
  $(document).ready(function() {
    // Initialize scrollers.
    $('.demo1').TrackpadScrollEmulator();
    $('.demo2').TrackpadScrollEmulator();
    // Demonstration of changing the vertical scroller content and dimensions.
    $('.add-more').on('click', function(e){
      e.preventDefault();
      $('.demo1 .tse-content').append('<p class="odd">Additional content 1</p><p>Additional content 2</p><p p class="odd">Additional content 3</p><p>Additional content 4</p>');
      $('.demo1').TrackpadScrollEmulator('recalculate');
    });
    $('.toggle-height').on('click', function(e){
      e.preventDefault();
      if ($('.demo1').height() === 400) {
        $('.demo1').height(300);
      } else {
        $('.demo1').height(400);
      }
      $('.demo1').TrackpadScrollEmulator('recalculate');
    });
    // Demonstration of changing the horizontal scroller content and dimensions.
    $('.add-more-horiz').on('click', function(e){
      e.preventDefault();
      $('.demo2 .tse-content .boxes').append('<div class="box">A</div><div class="box">B</div><div class="box">C</div><div class="box">D</div>');
      $('.demo2').TrackpadScrollEmulator('recalculate');
    });
    $('.toggle-width').on('click', function(e){
      e.preventDefault();
      if ($('.demo2').width() === 600) {
        $('.demo2').width(500);
      } else {
        $('.demo2').width(600);
      }
      $('.demo2').TrackpadScrollEmulator('recalculate');
    });
  });
  </script>
</body>
</html>