demos/custom-constraint.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jquery.pep custom constraint demo</title>

    <!-- Load local jQuery.  -->
    <script src="../libs/jquery/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

    <!-- Load local lib and tests. -->
    <script src="../src/jquery.pep.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){

          $('.pep-horizontal').pep({
            axis: 'x',
            constrainTo: [0, 0, 0, ($('.pep-horizontal').width() - $('.pep-container-horizontal').width()) * -1]
          });

          $('.pep-vertical').pep({
            axis: 'y',
            constrainTo: [($('.pep-vertical').height() - $('.pep-container-vertical').height()) * -1, 0, 0, 0]
          });

          $('.pep').pep({
            constrainTo: [300, 600, 600, 300]
          })

      });
    </script>

    <style type="text/css">
      .pep-container-horizontal { width: 600px; height: 200px; border: 1px solid blue; overflow: hidden; position: relative; margin-bottom: 20px }
      .pep-horizontal { list-style: none; margin: 0; width: 2510px; padding: 0 }
      .pep-horizontal li { float: left; margin-right: 10px; background: blue; text-align: center; width: 200px; height: 200px; color: #fff }
      .pep-horizontal li:last-child { margin-right: 0; }

      .pep-container-vertical { width: 200px; height: 600px; border: 1px solid red; overflow: hidden; position: relative }
      .pep-vertical { list-style: none; margin: 0; width: 2510px; padding: 0 }
      .pep-vertical li { margin-bottom: 10px; background: red; text-align: center; width: 200px; height: 200px; color: #fff }
      .pep-vertical li:last-child { margin-bottom: 0; }

      .pep{ height: 100px; width: 100px; position: absolute; top: 300px; left: 300px; background: blue }
    </style>

  </head>

  <body>
    <div class="pep-container-horizontal">
      <ul class="pep-horizontal">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
      </ul>
    </div>

    <div class="pep-container-vertical">
      <ul class="pep-vertical">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
      </ul>
    </div>

    <div class='pep'></div>

  </body>

</html>