afb-client/bower_components/tether/examples/content-visible/index.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <link rel="stylesheet" href="../resources/css/base.css" />
   5     </head>
   6     <body>
   7
   8     <div class="instructions">Scroll the page</div>
   9
  10     <style>
  11       .instructions {
  12         width: 100%;
  13         text-align: center;
  14         font-size: 24px;
  15         padding: 15px;
  16         background-color: rgba(210, 180, 140, 0.4);
  17       }
  18
  19       * {
  20         box-sizing: border-box;
  21       }
  22       body {
  23         min-height: 1200vh;
  24         height: 100%;
  25       }
  26
  27       .content-box {
  28         width: 600px;
  29         border: 10px solid #999;
  30         height: 600vh;
  31         background-color: #439CCC;
  32         margin: 200vh auto;
  33       }
  34       .element {
  35         border: 10px solid #999;
  36         background-color: #FFDC00;
  37         width: 300px;
  38         height: 200px;
  39         padding: 0 15px;
  40         font-size: 20px;
  41         font-weight: bold;
  42       }
  43     </style>
  44
  45     <div class="content-box">
  46       <div class="element">
  47         <p>This is some sort of crazy dialog.</p>
  48
  49         <p>It's setup to align with the center of the visible part of the blue area.</p>
  50       </div>
  51     </div>
  52
  53     <script src="../../tether.js"></script>
  54     <script>
  55       new Tether({
  56         element: '.element',
  57         target: '.content-box',
  58         attachment: 'middle center',
  59         targetAttachment: 'middle center',
  60         targetModifier: 'visible'
  61       });
  62     </script>
  63   </body>
  64 </html>