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" />
14 <div class="navigation">
16 <span class="item">DROPBOOK</span>
18 <a class="drop-target" data-constrain="false" data-attach="bottom left">DROP</a>
21 <a class="drop-target" data-constrain="false" data-attach="bottom left">DROP</a>
24 <a class="drop-target" data-constrain="false" data-attach="bottom left">DROP</a>
28 <div class="right-sidebar right-sidebar-top">
30 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
33 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
36 <a class="drop-target" data-constrain="true" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
39 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
42 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
45 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
48 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
51 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
54 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
57 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
60 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
63 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
66 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
69 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
72 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
75 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left top">DROP</a>
78 <div class="right-sidebar right-sidebar-bottom">
80 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
83 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
86 <a class="drop-target" data-constrain="true" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
89 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
92 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
95 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
98 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
101 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
104 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
107 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
110 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
113 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
116 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
119 <a class="drop-target" data-constrain="false" data-class="drop-theme-arrows" data-attach="left bottom">DROP</a>
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/>
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/>
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/>
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/>
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/>
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">
158 <a class="drop-target" data-constrain="true" data-attach="bottom left">DROP</a><br/>
160 <div style="width: 150%; background: #ccc; height: 1px"></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/>
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>
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/>
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/>
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>
192 .drop .drop-content {
198 $('.drop-target').each(function(){
201 className: $(this).data().class || 'drop-theme-default',
202 attach: $(this).data().attach,
203 constrainToScrollParent: $(this).data().constrain,