afb-client/bower_components/tether/examples/facebook/index.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <meta charset="utf-8">
   5         <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   7         <link rel="stylesheet" href="../../css/drop.css" />
   8         <link rel="stylesheet" href="../../css/drop-theme-default.css" />
   9         <link rel="stylesheet" href="../../css/drop-theme-arrows.css" />
  10         <link rel="stylesheet" href="../resources/css/base.css" />
  11         <link rel="stylesheet" href="facebook.css" />
  12     </head>
  13     <body>
  14         <div class="navigation">
  15             <div class="page">
  16                 <span class="item">DROPBOOK</span>
  17                 <span class="item">
  18                     <a class="drop-target" data-constrain="false" data-attach="bottom left">DROP</a>
  19                 </span>
  20                 <span class="item">
  21                     <a class="drop-target" data-constrain="false" data-attach="bottom left">DROP</a>
  22                 </span>
  23                 <span class="item">
  24                     <a class="drop-target" data-constrain="false" data-attach="bottom left">DROP</a>
  25                 </span>
  26             </div>
  27         </div>
  28         <div class="right-sidebar right-sidebar-top">
  29             <div class="item">
  30                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  31             </div>
  32             <div class="item">
  33                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  34             </div>
  35             <div class="item">
  36                 <a class="drop-target" data-constrain="true" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  37             </div>
  38             <div class="item">
  39                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  40             </div>
  41             <div class="item">
  42                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  43             </div>
  44             <div class="item">
  45                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  46             </div>
  47             <div class="item">
  48                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  49             </div>
  50             <div class="item">
  51                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  52             </div>
  53             <div class="item">
  54                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  55             </div>
  56             <div class="item">
  57                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  58             </div>
  59             <div class="item">
  60                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  61             </div>
  62             <div class="item">
  63                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  64             </div>
  65             <div class="item">
  66                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  67             </div>
  68             <div class="item">
  69                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  70             </div>
  71             <div class="item">
  72                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  73             </div>
  74             <div class="item">
  75                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
  76             </div>
  77         </div>
  78         <div class="right-sidebar right-sidebar-bottom">
  79             <div class="item">
  80                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
  81             </div>
  82             <div class="item">
  83                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
  84             </div>
  85             <div class="item">
  86                 <a class="drop-target" data-constrain="true" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
  87             </div>
  88             <div class="item">
  89                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
  90             </div>
  91             <div class="item">
  92                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
  93             </div>
  94             <div class="item">
  95                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
  96             </div>
  97             <div class="item">
  98                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
  99             </div>
 100             <div class="item">
 101                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
 102             </div>
 103             <div class="item">
 104                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
 105             </div>
 106             <div class="item">
 107                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
 108             </div>
 109             <div class="item">
 110                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
 111             </div>
 112             <div class="item">
 113                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
 114             </div>
 115             <div class="item">
 116                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
 117             </div>
 118             <div class="item">
 119                 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
 120             </div>
 121         </div>
 122         <div class="body">
 123             <div class="page">
 124                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br/>
 125                 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud<br/>
 126                 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/><br/>
 127
 128                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br/>
 129                 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud<br/>
 130                 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/><br/>
 131
 132                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br/>
 133                 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud<br/>
 134                 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/><br/>
 135
 136                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br/>
 137                 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud<br/>
 138                 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/><br/>
 139
 140                 <a class="drop-target" data-constrain="true" data-attach="bottom left">DROP</a><br/><br/>
 141                 <div class="scroll-container">
 142                   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 143                   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 144                   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 145                   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 146                   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 147                   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 148                   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 149                   <br/><br/><a class="drop-target" data-constrain="true" data-attach="bottom left">DROP</a><br/><br/> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
 150                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
 151                 </div>
 152                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br/>
 153                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br/>
 154                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br/>
 155                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br/>
 156                 <div class="scroll-container">
 157                     <br/>
 158                     <a class="drop-target" data-constrain="true" data-attach="bottom left">DROP</a><br/>
 159                     <br/>
 160                     <div style="width: 150%; background: #ccc; height: 1px"></div>
 161                 </div>
 162                 <div class="scroll-container">
 163                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
 164                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
 165                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
 166                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
 167                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
 168                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
 169                     <br/><br/>
 170                     <div style="width: 150%; background: #ccc; height: 1px">
 171                         <div style="margin-left: 100%">
 172                             <a class="drop-target" data-constrain="true" data-attach="bottom left">DROP</a>
 173                         </div>
 174                     </div>
 175                     <br/><br/>
 176                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
 177                 </div>
 178                 <div class="scroll-container absolute-container">
 179                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br/><br/><a class="drop-target" data-constrain="false" data-attach="left top">DROP</a><br/><br/> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
 180                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
 181                 </div>
 182             </div>
 183         </div>
 184
 185         <script src="../resources/js/log.js"></script>
 186         <script src="../resources/js/jquery.js"></script>
 187         <script src="../../utils.js"></script>
 188         <script src="../../tether.js"></script>
 189         <script src="../../drop.js"></script>
 190         <script src="../../constraint.js"></script>
 191         <style>
 192             .drop .drop-content {
 193                 min-height: 100px;
 194                 min-width: 100px;
 195             }
 196         </style>
 197         <script>
 198             $('.drop-target').each(function(){
 199                 new Drop({
 200                     target: this,
 201                     className: $(this).data().class || 'drop-theme-default',
 202                     attach: $(this).data().attach,
 203                     constrainToScrollParent: $(this).data().constrain,
 204                     openOn: 'click'
 205                 });
 206             });
 207         </script>
 208     </body>
 209 </html>