Skip to content

Commit 6b97310

Browse files
frankpaganfrankpagan
committed
formating
1 parent f0d1de1 commit 6b97310

File tree

1 file changed

+124
-87
lines changed

1 file changed

+124
-87
lines changed

‎demo/index.html‎

Lines changed: 124 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,129 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>Overlay Scroll | CoCreateJS</title>
5-
6-
<!-- CoCreate Favicon -->
7-
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8-
<!-- CoCreate CSS CDN -->
9-
<link rel="stylesheet" href="https://cdn.cocreate.app/overlay-scroll/latest/CoCreate-overlay-scroll.min.css" type="text/css" />
10-
<link rel="manifest" href="/manifest.webmanifest">
11-
</head>
12-
<body class="co_overlay-scroll" style="height:2000px;">
13-
14-
<div id="type_example" style="display:flex;flex-wrap:wrap">
15-
<!-- Example: default scrolling -->
16-
<div style="margin: 10px">
17-
<h3>Default</h3>
18-
<div class="co_overlay-scroll" style="width:300px;height:300px">
19-
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"></img>
20-
</div>
3+
<head>
4+
<title>Overlay Scroll | CoCreateJS</title>
5+
6+
<!-- CoCreate Favicon -->
7+
<link
8+
rel="icon"
9+
href="https://cdn.cocreate.app/favicon.ico"
10+
type="image/ico"
11+
sizes="16x16" />
12+
<!-- CoCreate CSS CDN -->
13+
<link
14+
rel="stylesheet"
15+
href="https://cdn.cocreate.app/overlay-scroll/latest/CoCreate-overlay-scroll.min.css"
16+
type="text/css" />
17+
<link rel="manifest" href="/manifest.webmanifest" />
18+
</head>
19+
<body class="co_overlay-scroll" style="height: 2000px">
20+
<div id="type_example" style="display: flex; flex-wrap: wrap">
21+
<!-- Example: default scrolling -->
22+
<div style="margin: 10px">
23+
<h3>Default</h3>
24+
<div
25+
class="co_overlay-scroll"
26+
style="width: 300px; height: 300px">
27+
<img
28+
src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg" />
29+
</div>
30+
</div>
31+
<!-- Example: X-direction scrolling -->
32+
<div style="margin: 10px">
33+
<h3>X-direction ScrollBar</h3>
34+
<div
35+
class="co_overlay-scroll"
36+
data-overlay-scroll_type="scrollX"
37+
style="width: 300px; height: 300px">
38+
<img
39+
src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg" />
40+
</div>
41+
</div>
42+
<!-- Example: Y-direction scrolling -->
43+
<div style="margin: 10px">
44+
<h3>Y-direction ScrollBar</h3>
45+
<div
46+
class="co_overlay-scroll"
47+
data-overlay-scroll_type="scrollY"
48+
style="width: 300px; height: 300px">
49+
<img
50+
src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg" />
51+
</div>
52+
</div>
2153
</div>
22-
<!-- Example: X-direction scrolling -->
23-
<div style="margin: 10px">
24-
<h3>X-direction ScrollBar</h3>
25-
<div class="co_overlay-scroll" data-overlay-scroll_type="scrollX" style="width:300px;height:300px" >
26-
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"></img>
27-
</div>
54+
55+
<div id="position_example" style="display: flex; flex-wrap: wrap">
56+
<!-- Example: default scrolling -->
57+
<div style="margin: 10px">
58+
<h3>Bottom, Left</h3>
59+
<div
60+
class="co_overlay-scroll"
61+
data-overlay-scroll_pos="left"
62+
style="width: 300px; height: 300px">
63+
<img
64+
src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg" />
65+
</div>
66+
</div>
67+
<!-- Example: X-direction scrolling -->
68+
<div style="margin: 10px">
69+
<h3>Top, Right</h3>
70+
<div
71+
class="co_overlay-scroll"
72+
data-overlay-scroll_pos="top"
73+
style="width: 300px; height: 300px">
74+
<img
75+
src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg" />
76+
</div>
77+
</div>
78+
<!-- Example: Y-direction scrolling -->
79+
<div style="margin: 10px">
80+
<h3>Top, Left</h3>
81+
<div
82+
class="co_overlay-scroll"
83+
data-overlay-scroll_pos="top;left"
84+
style="width: 300px; height: 300px">
85+
<img
86+
src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg" />
87+
</div>
88+
</div>
2889
</div>
29-
<!-- Example: Y-direction scrolling -->
30-
<div style="margin: 10px">
31-
<h3>Y-direction ScrollBar</h3>
32-
<div class="co_overlay-scroll" data-overlay-scroll_type="scrollY" style="width:300px;height:300px">
33-
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"></img>
34-
</div>
90+
91+
<div id="visible_example" style="display: flex; flex-wrap: wrap">
92+
<!-- Example: default scroller -->
93+
<div style="margin: 10px">
94+
<h3>Dark Mode</h3>
95+
<div
96+
class="co_overlay-scroll dark-mode"
97+
style="width: 300px; height: 300px">
98+
<img
99+
src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg" />
100+
</div>
101+
</div>
102+
<!-- Example: Top and Left scroller -->
103+
<div style="margin: 10px">
104+
<h3>Hidden ScrollBar</h3>
105+
<div
106+
class="co_overlay-scroll"
107+
data-overlay-scroll_visible="hide"
108+
style="width: 300px; height: 300px">
109+
<img
110+
src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg" />
111+
</div>
112+
</div>
113+
<!-- Example: Top ScrollBar -->
114+
<div style="margin: 10px">
115+
<h3>Auto Hidden ScrollBar</h3>
116+
<div
117+
class="co_overlay-scroll"
118+
data-overlay-scroll_visible="auto"
119+
style="width: 300px; height: 300px">
120+
<img
121+
src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg" />
122+
</div>
123+
</div>
35124
</div>
36-
</div>
37-
38-
<div id="position_example" style="display:flex;flex-wrap:wrap">
39-
<!-- Example: default scrolling -->
40-
<div style="margin: 10px">
41-
<h3>Bottom, Left</h3>
42-
<div class="co_overlay-scroll" data-overlay-scroll_pos="left" style="width:300px;height:300px" >
43-
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"></img>
44-
</div>
45-
</div>
46-
<!-- Example: X-direction scrolling -->
47-
<div style="margin: 10px">
48-
<h3>Top, Right</h3>
49-
<div class="co_overlay-scroll" data-overlay-scroll_pos="top" style="width:300px;height:300px" >
50-
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"></img>
51-
</div>
52-
</div>
53-
<!-- Example: Y-direction scrolling -->
54-
<div style="margin: 10px">
55-
<h3>Top, Left</h3>
56-
<div class="co_overlay-scroll" data-overlay-scroll_pos="top;left" style="width:300px;height:300px">
57-
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"></img>
58-
</div>
59-
</div>
60-
</div>
61-
62-
63-
64-
<div id="visible_example" style="display:flex;flex-wrap:wrap">
65-
<!-- Example: default scroller -->
66-
<div style="margin: 10px">
67-
<h3>Dark Mode</h3>
68-
<div class="co_overlay-scroll dark-mode" style="width:300px;height:300px" >
69-
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"></img>
70-
</div>
71-
</div>
72-
<!-- Example: Top and Left scroller -->
73-
<div style="margin: 10px">
74-
<h3>Hidden ScrollBar</h3>
75-
<div class="co_overlay-scroll" data-overlay-scroll_visible="hide" style="width:300px;height:300px" >
76-
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"></img>
77-
</div>
78-
</div>
79-
<!-- Example: Top ScrollBar -->
80-
<div style="margin: 10px">
81-
<h3>Auto Hidden ScrollBar</h3>
82-
<div class="co_overlay-scroll" data-overlay-scroll_visible="auto" style="width:300px;height:300px">
83-
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"></img>
84-
</div>
85-
</div>
86-
</div>
87-
88-
89-
<!--<script src="../dist/CoCreate-overlay-scroll.js"></script>-->
90-
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
91-
</body>
92-
</html>
125+
126+
<!--<script src="../dist/CoCreate-overlay-scroll.js"></script>-->
127+
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
128+
</body>
129+
</html>

0 commit comments

Comments
 (0)