Skip to content

Commit 6d5e087

Browse files
imakewebthingsimakewebthings
committed
Add dial controls example for contexts
1 parent 9e09c89 commit 6d5e087

File tree

2 files changed

+282
-0
lines changed

2 files changed

+282
-0
lines changed

‎examples/dial-controls/index.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en-US">
4+
<head>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6+
<title>Dial Controls with jQuery Waypoints</title>
7+
<meta name="description" content="An example of context aware sticky navigation and back to top links using the jQuery Waypoints plugin">
8+
<meta name="viewport" content="width=480">
9+
<link rel="stylesheet" href="style.css" type="text/css" media="all">
10+
<script src="../modernizr.custom.js"></script>
11+
</head>
12+
<body>
13+
14+
<div id="wrapper">
15+
<hgroup>
16+
<h1>Dial Controls</h1>
17+
<h2>An example of <a href="../">Waypoints</a> within scrollable non-window elements</h2>
18+
</hgroup>
19+
20+
<div data-property="font-size" class="dial first">
21+
<h2>Font Size:</h2>
22+
<ul>
23+
<li data-value="8px">8px</li>
24+
<li data-value="10px">10px</li>
25+
<li data-value="12px">12px</li>
26+
<li data-value="14px">14px</li>
27+
<li data-value="16px">16px</li>
28+
<li data-value="18px">18px</li>
29+
<li data-value="24px">24px</li>
30+
<li data-value="36px">36px</li>
31+
<li data-value="48px">48px</li>
32+
<li data-value="72px">72px</li>
33+
</ul>
34+
<div class="indicator"></div>
35+
</div>
36+
37+
<div data-property="width" class="dial">
38+
<h2>Width:</h2>
39+
<ul>
40+
<li data-value="150px">150px</li>
41+
<li data-value="200px">200px</li>
42+
<li data-value="250px">250px</li>
43+
<li data-value="300px">300px</li>
44+
<li data-value="350px">350px</li>
45+
<li data-value="400px">400px</li>
46+
<li data-value="500px">500px</li>
47+
<li data-value="600px">600px</li>
48+
<li data-value="700px">700px</li>
49+
<li data-value="800px">800px</li>
50+
<li data-value="1024px">1024px</li>
51+
<li data-value="1280px">1280px</li>
52+
</ul>
53+
<div class="indicator"></div>
54+
</div>
55+
56+
<div data-property="background-color" class="dial">
57+
<h2>BG Color:</h2>
58+
<ul>
59+
<li data-value="#fff">#fff</li>
60+
<li data-value="#d1f2a5">#d1f2a5</li>
61+
<li data-value="#effab4">#effab4</li>
62+
<li data-value="#ffc48c">#ffc48c</li>
63+
<li data-value="#ff9f80">#ff9f80</li>
64+
<li data-value="#f56991">#f56991</li>
65+
</ul>
66+
<div class="indicator"></div>
67+
</div>
68+
</div>
69+
70+
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit ultrices rutrum. Cras dignissim purus non purus mattis nec lobortis enim dignissim. Nulla a urna est. Proin volutpat odio id velit tempor sollicitudin. Aliquam lobortis nunc gravida orci fringilla in commodo lectus gravida. In hac habitasse platea dictumst. Maecenas tincidunt pulvinar blandit. Suspendisse a diam ligula. Mauris non tellus nisl, in interdum elit. Etiam rhoncus cursus lectus vel venenatis. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eleifend imperdiet lectus vitae aliquet. Mauris metus lorem, fermentum vitae malesuada quis, pretium id mi.</div>
71+
72+
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
73+
<script src="../../waypoints.js"></script>
74+
75+
<script type="text/javascript">
76+
$(function() {
77+
$('.dial li').waypoint(function(e, direction) {
78+
var $active = $(this);
79+
80+
if (direction === "up") {
81+
$active = $active.prev();
82+
}
83+
if (!$active.length) $active.end();
84+
console.log($active.closest('.dial').data('property'));
85+
86+
$('#main').css($active.closest('.dial').data('property'), $active.data('value'));
87+
}, {
88+
offset: 25,
89+
context: 'ul'
90+
});
91+
});
92+
</script>
93+
94+
</body>
95+
</html>

‎examples/dial-controls/style.css‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0b2 | 201101
3+
NOTE: THIS IS A BETA VERSION (see previous line)
4+
USE WITH CAUTION AND TEST WITH ABANDON */
5+
html, body, div, span, applet, object, iframe,
6+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7+
a, abbr, acronym, address, big, cite, code,
8+
del, dfn, em, img, ins, kbd, q, s, samp,
9+
small, strike, strong, sub, sup, tt, var,
10+
b, u, i, center,
11+
dl, dt, dd, ol, ul, li,
12+
fieldset, form, label, legend,
13+
table, caption, tbody, tfoot, thead, tr, th, td,
14+
article, aside, canvas, details, embed,
15+
figure, figcaption, footer, header, hgroup,
16+
menu, nav, output, ruby, section, summary,
17+
time, mark, audio, video {
18+
margin: 0;
19+
padding: 0;
20+
border: 0;
21+
font-size: 100%;
22+
font: inherit;
23+
vertical-align: baseline;
24+
}
25+
/* HTML5 display-role reset for older browsers */
26+
article, aside, details, figcaption, figure,
27+
footer, header, hgroup, menu, nav, section {
28+
display: block;
29+
}
30+
body {
31+
line-height: 1;
32+
}
33+
ol, ul {
34+
list-style: none;
35+
}
36+
blockquote, q {
37+
quotes: none;
38+
}
39+
blockquote:before, blockquote:after,
40+
q:before, q:after {
41+
content: '';
42+
content: none;
43+
}
44+
table {
45+
border-collapse: collapse;
46+
border-spacing: 0;
47+
}
48+
/* END MEYER RESET */
49+
50+
.hide {
51+
width:1px;
52+
height:1px;
53+
position:absolute;
54+
text-indent:-9999px;
55+
overflow:hidden;
56+
}
57+
58+
html {
59+
overflow-y:scroll;
60+
}
61+
62+
body {
63+
font-size:16px;
64+
line-height:1.5;
65+
color:#444;
66+
background:#f5f5ff;
67+
font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
68+
}
69+
70+
h1 {
71+
font-size:24px;
72+
font-weight:bold;
73+
margin-top:24px;
74+
}
75+
76+
hgroup {
77+
margin-bottom:24px;
78+
}
79+
80+
hgroup h1 {
81+
color:#222;
82+
font-size:28px;
83+
}
84+
85+
hgroup h2 {
86+
font-size:24px;
87+
color:#666;
88+
}
89+
90+
p {
91+
margin:8px 0 24px 0;
92+
}
93+
94+
#wrapper {
95+
width:460px;
96+
margin:0 auto 24px auto;
97+
overflow:hidden;
98+
}
99+
100+
.dial {
101+
float:left;
102+
width:140px;
103+
margin-left:20px;
104+
position:relative;
105+
}
106+
107+
.dial.first {
108+
margin-left:0;
109+
}
110+
111+
.dial h2 {
112+
font-weight:bold;
113+
}
114+
115+
.dial ul {
116+
background:#fff;
117+
border:1px solid #bbb;
118+
padding:25px 0 114px 0;
119+
height:1px;
120+
overflow-y:scroll;
121+
}
122+
123+
.dial ul:before {
124+
content:"";
125+
border:10px solid #555;
126+
width:1px;
127+
height:1px;
128+
display:block;
129+
position:absolute;
130+
bottom:105px;
131+
left:0;
132+
z-index:3;
133+
border-top-color:transparent;
134+
border-right-color:transparent;
135+
border-bottom-color:transparent;
136+
}
137+
138+
.dial li {
139+
height:20px;
140+
line-height:20px;
141+
padding:10px 10px 10px 20px;
142+
border-bottom:1px solid #ddd;
143+
font-size:20px;
144+
}
145+
146+
.dial li:first-child {
147+
border-top:1px solid #ddd;
148+
}
149+
150+
li[data-value="#fff"] {
151+
background:#fff;
152+
}
153+
li[data-value="#d1f2a5"] {
154+
background:#d1f2a5;
155+
}
156+
li[data-value="#effab4"] {
157+
background:#effab4;
158+
}
159+
li[data-value="#ffc48c"] {
160+
background:#ffc48c;
161+
}
162+
li[data-value="#ff9f80"] {
163+
background:#ff9f80;
164+
}
165+
li[data-value="#f56991"] {
166+
background:#f56991;
167+
}
168+
169+
.indicator {
170+
position:absolute;
171+
bottom:115px;
172+
left:0;
173+
height:1px;
174+
width:120px;
175+
background:red;
176+
}
177+
178+
#main {
179+
font-size:8px;
180+
line-height:1.5;
181+
width:150px;
182+
background:#fff;
183+
border:1px solid #ccc;
184+
margin:0 auto;
185+
padding:10px;
186+
}
187+

0 commit comments

Comments
 (0)