Skip to content

Commit fd75176

Browse files
imakewebthingsimakewebthings
committed
Examples colorization
1 parent ff0ea2c commit fd75176

File tree

3 files changed

+92
-72
lines changed

3 files changed

+92
-72
lines changed

‎examples/dial-controls/index.html

+58-52
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<meta name="description" content="An example of dial controls using the jQuery Waypoints plugin">
88
<meta name="viewport" content="width=480">
99

10+
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono|Lato:400,700|PT+Serif:700' rel='stylesheet' type='text/css'>
1011
<style type="text/css">
1112
* {
1213
margin:0;
@@ -16,10 +17,10 @@
1617
body {
1718
font-size:16px;
1819
line-height:1.5;
19-
color:#000;
20-
background:#fff;
21-
padding-bottom:16px;
22-
font-family:"Helvetica Neue", sans-serif;
20+
color:#6a6272;
21+
background:#d5c5e5;
22+
padding-bottom:16px;
23+
font-family:"Lato", sans-serif;
2324
}
2425

2526
.inner {
@@ -28,24 +29,29 @@
2829
margin:0 auto;
2930
}
3031

32+
h1, h2, h3, h4 {
33+
font-family:"PT Serif", serif;
34+
font-weight:normal;
35+
}
36+
3137
h1 {
32-
font-size:54px;
38+
font-size:53px;
39+
color:#444a50;
3340
}
3441

3542
h2 {
36-
text-align:center;
37-
background:#000;
38-
color:#fff;
39-
font-size:24px;
40-
}
43+
text-align:center;
44+
background:#6a6272;
45+
color:#eae2f2;
46+
font-size:24px;
47+
}
4148

4249
pre {
43-
white-space:pre-wrap;
44-
font-size:12px;
45-
font-family:Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
46-
border:1px solid #000;
47-
padding:10px;
48-
}
50+
white-space:pre-wrap;
51+
font-size:14px;
52+
background:#fff;
53+
padding:10px;
54+
}
4955

5056
.header {
5157
margin-bottom:24px;
@@ -73,7 +79,7 @@
7379

7480
.dial ul {
7581
background:#fff;
76-
border:1px solid #bbb;
82+
border:1px solid #eae2f2;
7783
padding:25px 0 114px 0;
7884
height:1px;
7985
overflow-y:scroll;
@@ -107,6 +113,10 @@
107113
border-top:1px solid #ddd;
108114
}
109115

116+
.text-color-dial li {
117+
color:#fff;
118+
}
119+
110120
li[data-value="8px"] {
111121
font-size:8px;
112122
}
@@ -128,20 +138,20 @@
128138
li[data-value="14px"] {
129139
font-size:14px;
130140
}
131-
li[data-value="#fff"] {
132-
background:#fff;
141+
li[data-value="#000"] {
142+
background:#000;
133143
}
134-
li[data-value="#eee"] {
135-
background:#eee;
144+
li[data-value="#222"] {
145+
background:#222;
136146
}
137-
li[data-value="#ddd"] {
138-
background:#ddd;
147+
li[data-value="#444"] {
148+
background:#444;
139149
}
140-
li[data-value="#ccc"] {
141-
background:#ccc;
150+
li[data-value="#666"] {
151+
background:#666;
142152
}
143-
li[data-value="#bbb"] {
144-
background:#bbb;
153+
li[data-value="#888"] {
154+
background:#888;
145155
}
146156
li[data-value="#aaa"] {
147157
background:#aaa;
@@ -157,8 +167,6 @@
157167
}
158168

159169
#example-target {
160-
background:#000;
161-
color:#fff;
162170
margin-top:32px;
163171
}
164172
</style>
@@ -201,14 +209,14 @@ <h3>Line Height:</h3>
201209
<div class="indicator"></div>
202210
</div>
203211

204-
<div data-property="color" class="dial">
212+
<div data-property="color" class="dial text-color-dial">
205213
<h3>Text Color:</h3>
206214
<ul>
207-
<li data-value="#fff">#fff</li>
208-
<li data-value="#eee">#eee</li>
209-
<li data-value="#ddd">#ddd</li>
210-
<li data-value="#ccc">#ccc</li>
211-
<li data-value="#bbb">#bbb</li>
215+
<li data-value="#000">#000</li>
216+
<li data-value="#222">#222</li>
217+
<li data-value="#444">#444</li>
218+
<li data-value="#666">#666</li>
219+
<li data-value="#888">#888</li>
212220
<li data-value="#aaa">#aaa</li>
213221
</ul>
214222
<div class="indicator"></div>
@@ -219,26 +227,25 @@ <h3>Text Color:</h3>
219227
var $active = $(this);
220228
var property, value;
221229

222-
/* The waypoint is triggered at the top of each list item representing a dial section. When triggering in the down direction we want to use the dial section the waypoint is attached to. But in the up direction we want to use the previous dial section. */
223-
if (direction === "up") {
224-
$active = $active.waypoint('prev', 'vertical', 'ul');
225-
}
230+
/* The waypoint is triggered at the top of each list item representing a dial section. When triggering in the down direction we want to use the dial section the waypoint is attached to. But in the up direction we want to use the previous dial section. */
231+
if (direction === "up") {
232+
$active = $active.prev();
233+
}
226234

227-
/* If we triggered in the up direction and the result from 'prev' came back with an empty set of elements, it means we were on the first element in the list, and we should just use the original element. */
228-
if (!$active.length) {
229-
$active = $(this);
230-
}
235+
/* If we triggered in the up direction and the result from 'prev' came back with an empty set of elements, it means we were on the first element in the list, and we should just use the original element. */
236+
if (!$active.length) {
237+
$active = $(this);
238+
}
231239

232-
/* The property the dial controls is a data attribute on the ul. */
233-
property = $active.closest('.dial').data('property');
240+
/* The property the dial controls is a data attribute on the ul. */
241+
property = $active.closest('.dial').data('property');
234242

235-
/* The value for that property is a data attribute on each li. */
236-
value = $active.data('value');
243+
/* The value for that property is a data attribute on each li. */
244+
value = $active.data('value');
237245

238-
$('#example-target').css(property, value);
246+
$('#example-target').css(property, value);
239247
}, {
240-
offset: 25, // How far the indicator is from the top of the ul.
241-
context: 'ul' // Make the scroll context the nearest ul.
248+
context: 'ul' // Make the scroll context the nearest ul.
242249
});</code></pre>
243250
</div>
244251

@@ -256,7 +263,7 @@ <h3>Text Color:</h3>
256263
the dial section the waypoint is attached to. But in the up direction
257264
we want to use the previous dial section. */
258265
if (direction === "up") {
259-
$active = $active.waypoint('prev', 'vertical', 'ul');
266+
$active = $active.prev();
260267
}
261268

262269
/* If we triggered in the up direction and the result from 'prev' came
@@ -274,7 +281,6 @@ <h3>Text Color:</h3>
274281

275282
$('#example-target').css(property, value);
276283
}, {
277-
offset: 26, // How far the indicator is from the top of the ul.
278284
context: 'ul' // Make the scroll context the nearest ul.
279285
});
280286

‎examples/scroll-analytics/index.html

+27-20
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<meta name="description" content="An example of how to use the jQuery Waypoints plugin to track ad views more accurately and respond to engaged users when they reach the end of content">
88
<meta name="viewport" content="width=480">
99

10+
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono|Lato:400,700|PT+Serif:700' rel='stylesheet' type='text/css'>
1011
<style type="text/css">
1112
* {
1213
margin:0;
@@ -16,10 +17,10 @@
1617
body {
1718
font-size:16px;
1819
line-height:1.5;
19-
color:#000;
20-
background:#fff;
21-
padding-bottom:16px;
22-
font-family:"Helvetica Neue", sans-serif;
20+
color:#6a6272;
21+
background:#d5c5e5;
22+
padding-bottom:16px;
23+
font-family:"Lato", sans-serif;
2324
}
2425

2526
.inner {
@@ -28,16 +29,22 @@
2829
margin:0 auto;
2930
}
3031

31-
h1 {
32-
font-size:54px;
33-
}
32+
h1, h2, h3, h4 {
33+
font-family:"PT Serif", serif;
34+
font-weight:normal;
35+
}
3436

35-
h2 {
36-
text-align:center;
37-
background:#000;
38-
color:#fff;
39-
font-size:24px;
40-
}
37+
h1 {
38+
font-size:53px;
39+
color:#444a50;
40+
}
41+
42+
h2 {
43+
text-align:center;
44+
background:#6a6272;
45+
color:#eae2f2;
46+
font-size:24px;
47+
}
4148

4249
h3 {
4350
font-size:24px;
@@ -73,17 +80,17 @@
7380
.ad-unit {
7481
padding:10px;
7582
margin:16px 0;
76-
border:1px solid #000;
83+
border:1px solid #444a50;
7784
text-transform:uppercase;
78-
color:#000;
85+
color:#eae2f2;
7986
text-align:center;
8087
height:40px;
8188
line-height:40px;
82-
background:#fafad2;
89+
background:#6a6272;
8390
}
8491

8592
.ad-unit.active {
86-
background:#faa7a7;
93+
background:#444a50;
8794
}
8895

8996
#rcol .ad-unit {
@@ -98,9 +105,8 @@
98105

99106
.popup {
100107
position:absolute;
101-
background:#666;
108+
background:#eae2f2;
102109
font-size:11px;
103-
color:#ddd;
104110
padding:20px 5px 5px 5px;
105111
border-radius-:5px 5px 0 0;
106112
}
@@ -123,12 +129,13 @@
123129
}
124130

125131
#article-finished a {
132+
background:#444a50;
126133
color:#fff;
127134
text-decoration:underline;
128135
}
129136

130137
.close {
131-
background:#333;
138+
background:#444a50;
132139
color:#fff;
133140
position:absolute;
134141
right:3px;

‎test/waypoints.coffee

+7
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,13 @@ describe 'jQuery Waypoints', ->
314314
$e.add($f).waypoint({})
315315
expect($f.waypoint('prev')[0]).toEqual $e[0]
316316

317+
it 'can be used in a non-window context', ->
318+
$e = $ '#inner1'
319+
$f = $ '#inner2'
320+
$e.add($f).waypoint
321+
context: '#bottom'
322+
expect($f.waypoint('prev', 'vertical', '#bottom')[0]).toEqual $e[0]
323+
317324
describe '#waypoint("next")', ->
318325
it 'returns jQuery object containing next waypoint', ->
319326
$e = $ '#same1'

0 commit comments

Comments
 (0)