Skip to content

Commit f6df4e6

Browse files
frankpaganfrankpagan
committed
fix: Update to readme, demo, added cdn scripts
1 parent fdd8d5d commit f6df4e6

File tree

3 files changed

+86
-319
lines changed

3 files changed

+86
-319
lines changed

‎demo/index.html‎

Lines changed: 47 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,55 @@
1-
21
<!DOCTYPE html>
32
<html>
43
<head>
5-
<meta charset="utf-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="description" content="Instantly create a start-up or manage and grow an existing business, all-in-one Realtime callobrative solution complete with many automation's and a customizable website.">
8-
<meta name="keywords" content="CoCreate, app landing, responsive">
9-
<meta name="viewport" content="width=device-width, initial-scale=1">
10-
<title>CoCreate - Build your business in minutes.</title>
11-
12-
<!-- CoCreate UI -->
4+
<title>Scroll | CoCreateJS</title>
135

14-
<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css"/>
15-
<!--<link rel="stylesheet" href="https://server.cocreate.app/CoCreate-components/CoCreate-overlay-scroll/CoCreate-overlay-scroll.css" type="text/css" />-->
16-
17-
18-
19-
<!-- Animate CSS -->
20-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
21-
</head>
22-
23-
<style>
24-
.overlay-scroll {
25-
overflow: overlay!important;
26-
position: relative;
27-
overflow-anchor: none;
28-
-ms-overflow-style: none;
29-
touch-action: auto;
30-
-ms-touch-action: auto;
31-
}
32-
33-
::-webkit-scrollbar {
34-
width: 5px;
35-
height:5px;
36-
}
37-
::-webkit-scrollbar-thumb:hover {
38-
background: #3790ff!important;
39-
}
40-
::-webkit-scrollbar-thumb{
41-
background: rgba(0, 0, 0, 0.08)!important;
42-
}
43-
::-webkit-scrollbar-track{
44-
background: rgba(0, 0, 0, 0.06)!important;
45-
}
46-
47-
.hidden {
48-
display: none;
49-
}
50-
51-
.scrolling {
52-
background-color: gray;
53-
}
54-
55-
.scroll_bottom {
56-
background-color: blue;
57-
}
58-
59-
.scroll_top {
60-
background-color: red;
61-
}
6+
<!-- CoCreate Favicon -->
7+
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8+
<!-- Custom CSS -->
9+
<style>
10+
.overlay-scroll {
11+
overflow: overlay!important;
12+
position: relative;
13+
overflow-anchor: none;
14+
-ms-overflow-style: none;
15+
touch-scroll: auto;
16+
-ms-touch-scroll: auto;
17+
}
18+
19+
::-webkit-scrollbar {
20+
width: 5px;
21+
height:5px;
22+
}
23+
::-webkit-scrollbar-thumb:hover {
24+
background: #3790ff!important;
25+
}
26+
::-webkit-scrollbar-thumb{
27+
background: rgba(0, 0, 0, 0.08)!important;
28+
}
29+
::-webkit-scrollbar-track{
30+
background: rgba(0, 0, 0, 0.06)!important;
31+
}
32+
33+
.hidden {
34+
display: none;
35+
}
36+
37+
.scrolling {
38+
background-color: gray;
39+
}
40+
41+
.scroll_bottom {
42+
background-color: blue;
43+
}
44+
45+
.scroll_top {
46+
background-color: red;
47+
}
6248

63-
</style>
49+
</style>
50+
</head>
6451
<body>
65-
<!-- Navbar -->
66-
<div class="display:flex flex-wrap:wrap justify-content:space-between flex-direction:row padding-top:10px padding-bottom:10px width:100% nav"
67-
data-main_content_id="content"
68-
data-scroll="hidden, sticky-nav"
69-
data-scrolling="scrolling"
70-
data-scroll_top="scroll_top"
71-
data-scroll_bottom="scroll_bottom"
72-
data-scroll_up="10"
73-
data-scroll_down="5">
7452

75-
<!--<a href="#" class="logo">Navbar</a>-->
76-
<div class="margin:0px_15px display:flex flex-wrap:wrap justify-content:space-between flex-direction:row align-items:center width:100%">
77-
<div class="logo-box">
78-
<a href="/">
79-
<img src="https://server.cocreate.app/CoCreate-website/images/logo.png"/>
80-
</a>
81-
</div>
82-
83-
<a class="nav-toggle menu_icon--hamburger show-on-phone-only" data-toggle_sidenav="menuL">
84-
<span></span>
85-
<span></span>
86-
<span></span>
87-
</a>
88-
89-
<div class="display:flex align-items:center show-on-tablet-and-up">
90-
<div class="">
91-
<a href="">Home</a>
92-
</div>
93-
<div class="margin-left:25px">
94-
<a href="">Features</a>
95-
</div>
96-
<div class="margin-left:25px">
97-
<a href="https://server.cocreate.app/documentation/">Documentation</a>
98-
</div>
99-
<div class="margin-left:25px">
100-
<a href="">Pricing</a>
101-
</div>
102-
<div class="margin-left:25px">
103-
<a href="#spreadtheword">Spread the word</a>
104-
</div>
105-
<div class="margin-left:25px">
106-
<a class="border:1px_black_solid border-radius:50px padding:10px" href="">Get Started <i class="fas fa-chevron-right"></i></a>
107-
</div>
108-
</div>
109-
</div>
110-
</div>
11153
<section class="padding-top:80px padding-bottom:40px ">
11254
<div class=" max-width:90% margin:0px_auto">
11355
<div class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
@@ -202,31 +144,6 @@ <h1 class="text-align:center padding-bottom:20px">SPREAD THE WORD!</h1>
202144
</div>
203145
</footer>
204146

205-
<div id="menuL" class="cocreate-sidenav background:lightgrey"
206-
data-main_content="canvas,navbar"
207-
sidenav-default_desktop="offcanvas"
208-
sidenav-default_tablet="offcanvas"
209-
sidenav-default_phone="offcanvas"
210-
sidenav-expanded_width="300px">
211-
<ul class="cocreate-scroll">
212-
<div class="margin-left:25px">
213-
<a href="">Home</a>
214-
</div>
215-
<div class=" margin-left:25px">
216-
<a href="">Features</a>
217-
</div>
218-
<div class=" margin-left:25px">
219-
<a href="">Demo</a>
220-
</div>
221-
<div class=" margin-left:25px">
222-
<a href="">Pricing</a>
223-
</div>
224-
<div class=" margin-left:25px">
225-
<a href="">Spread the word</a>
226-
</div>
227-
<div class="resizeHandler"></div>
228-
</ul>
229-
</div>
230147

231148
<script>
232149
var config = {
@@ -235,12 +152,8 @@ <h1 class="text-align:center padding-bottom:20px">SPREAD THE WORD!</h1>
235152
}
236153
</script>
237154

238-
239-
<!--CoCreateJS-->
240-
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
241-
<!--<script src="https://server.cocreate.app/CoCreate-components/CoCreate-scroll/src/CoCreate-scroll.js"></script>-->
242-
<!--<script src="https://server.cocreate.app/CoCreate-components/CoCreate-overlay-scroll/CoCreate-overlay-scroll.js"></script>-->
243-
155+
<!-- CoCreate JS CDN -->
156+
<script src="https://cdn.cocreate.app/scroll/latest/CoCreate-scroll.min.js" ></script>
244157
</body>
245158
</html>
246159

‎docs/index.html‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@
1313

1414
<!-- CoCreate CSS -->
1515
<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css"/>
16-
<link rel="stylesheet" href="https://ws.cocreate.app/docs.css" data-collection="apples" data-document_id="6069ff5042ef8ff5175a5c8d" name="css" type="text/css" />
1716
</head>
18-
1917
<body>
18+
2019
<nav class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px" data-main_content_id="content" data-scroll="sticky-nav,hide-nav" data-scroll_up="10" data-scroll_down="10" data-collection="components" data-document_id="60395ef42b3ac232657040fd" name="html">
2120
</nav>
2221
<sidenav id="menuL" class="cocreate-sidenav background:whitesmoke" data-main_content="content" sidenav-default_desktop="expanded" sidenav-default_tablet="offcanvas" sidenav-ontoggle_desktop="offcanvas" sidenav-ontoggle_tablet="expanded">
@@ -43,7 +42,7 @@ <h2>CoCreate-scroll</h2>
4342
<p class="max-width:500px margin:20px_10px line-height:1.5">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</p>
4443
<div id="scroll-section" class="display:flex flex-wrap:wrap">
4544
<div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
46-
<div id="scroll-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-install-section">
45+
<div id="scroll-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#scroll-install-section">
4746
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#scroll-install"]'>
4847
<h2 class="padding:5px_0px">Install</h2>
4948
<a class="margin-left:10px display:none" href="#scroll-install"><i class="fas fa-link"></i></a>
@@ -53,7 +52,7 @@ <h2 class="padding:5px_0px">Install</h2>
5352
<p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p>
5453
<pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/scroll/latest/CoCreate-scroll.min.js&lt;/script&gt;</code></pre>
5554

56-
<div id="scroll-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-usage-section">
55+
<div id="scroll-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#scroll-usage-section">
5756
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#scroll-usage"]'>
5857
<h2 class="padding:5px_0px">Usage</h2>
5958
<a class="margin-left:10px display:none" href="#scroll-usage"><i class="fas fa-link"></i></a>
@@ -63,32 +62,55 @@ <h2 class="padding:5px_0px">Usage</h2>
6362
<p class="padding:10px_0px line-height:1.5">This is scroll usage</p>
6463

6564
<div class="flex-grow:1 min-width:300px width:100%">
66-
<pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
65+
<pre>
66+
<code class="language-html">
67+
&lt;div data-scroll_up_class="up" data-scroll_down_class="down" data-scroll_ing_class="scrolling" data-scroll_range_class="range" data-scroll_range_begin="1000" data-scroll_range_end="1500" data-scroll_intersect="intersect"&gt;</code>
68+
</pre>
6769
</div>
6870
<p class="padding:10px_0px line-height:1.5">This is scroll usage</p>
6971
<p class="padding:10px_0px line-height:1.5">This is scroll usage</p>
7072
</div>
71-
<div id="scroll-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-attributes-section">
73+
<div id="scroll-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#scroll-attributes-section">
7274
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#scroll-attributes"]'>
7375
<h2 class="padding:5px_0px">Attributes</h2>
7476
<a class="margin-left:10px display:none" href="#scroll-attributes"><i class="fas fa-link"></i></a>
7577
</span>
7678
</div>
7779
<ul class="list-style-type:none ">
7880
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
79-
<h4><span>data-scroll</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
80-
<p>scroll-attribute</p>
81+
<h4><span>data-scroll_up_class</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
82+
<p>Scroll-Up-Class</p>
83+
</li>
84+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
85+
<h4><span>data-scroll_down_class</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
86+
<p>Scroll-Down-Class</p>
8187
</li>
8288
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
83-
<h4><span>data-scroll</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
84-
<p>scroll-attribute</p>
89+
<h4><span>data-scroll_ing_class</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
90+
<p>Scroll-Range-Class</p>
91+
</li>
92+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
93+
<h4><span>data-scroll_range_class</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
94+
<p>Scroll-Range-Class</p>
95+
</li>
96+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
97+
<h4><span>data-scroll_range_begin</span> <span class="cocreate-badge success">number</span> <span class="cocreate-badge warning">optional</span></h4>
98+
<p>Scroll-Range-Begin</p>
99+
</li>
100+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
101+
<h4><span>data-scroll_range_end</span> <span class="cocreate-badge success">number</span> <span class="cocreate-badge warning">optional</span></h4>
102+
<p>Scroll-Range-End</p>
103+
</li>
104+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
105+
<h4><span>data-scroll_intersect</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
106+
<p>Scroll-Intersect</p>
85107
</li>
86108
</ul>
87109
</div>
88110

89111
<div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
90112
<!-- SandBox -->
91-
<div id="scroll-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-demo-section">
113+
<div id="scroll-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#scroll-demo-section">
92114
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#scroll-demo"]'>
93115
<h2 class="padding:5px_0px">Demo</h2>
94116
<a class="margin-left:10px display:none" href="#scroll-demo"><i class="fas fa-link"></i></a>
@@ -143,15 +165,19 @@ <h2 class="padding:5px_0px">Demo</h2>
143165
</div>
144166

145167
</div>
146-
</main>
168+
<button href="https://github.com/CoCreate-app/CoCreate-scroll/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue grow-hover border-radius:50%">
169+
<i class="fas fa-pencil-alt"></i>
170+
</button>
171+
</main>
172+
147173
<script>
148174
var config = {
149175
apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
150176
organization_Id: '5de0387b12e200ea63204d6c'
151177
}
152178
</script>
153179

154-
<!--CoCreateJS-->
180+
<!--CoCreateJS CDN-->
155181
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
156182
</body>
157183
</html>

0 commit comments

Comments
 (0)