-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.html
601 lines (533 loc) · 23.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
<!DOCTYPE html>
<html>
<head>
<title>Quovolver - a simple jQuery plugin for revolving quotes</title>
<link rel="stylesheet" href="bd.styles.css">
<!-- CSS Test Zone -->
<style>
/**
* Item Styles
*/
.quovolve {
margin: 20px 0;
}
.quovolve blockquote {
margin: 0;
}
.quovolve blockquote p {
margin: 10px 0;
}
.quotes ul {
list-style: none;
}
/**
* General Navigation Styles
*/
.quovolve-nav:before, .quovolve-nav:after {
content: "\0020"; display: block; height: 0; visibility: hidden;
}
.quovolve-nav:after { clear: both; }
.quovolve-nav {
margin: 20px 0;
line-height: 30px;
zoom: 1;
}
.quovolve-nav span {
float: left;
margin-right: 5px;
}
.quovolve-nav a {
background: #aaa;
line-height: 20px;
color: #fff;
display: block;
padding: 5px 15px;
border: 0 none;
text-align: center;
/* Border Radius */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* Box Shadow */
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
}
.quovolve-nav a:hover {
background: #dd390d;
}
/**
* Numbered Navigation
*/
.nav-numbers {
list-style: none; margin: 0;
float: right;
}
.nav-numbers li {
float: left;
margin: 0 0 0 5px;
}
.nav-numbers li a {
padding-left: 0; padding-right: 0;
width: 30px;
}
.nav-numbers li.active a, .nav-numbers li a:hover {
background: #dd390d;
}
/**
* Navigation Description
*/
.nav-text {
margin-left: 30px;
color: #aaa;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="page">
<nav class="nav">
<ul>
<li><a href="http://sebnitu.com">About the Author</a></li>
<li><a href="https://github.com/sebnitu/Quovolver/">Documentation</a></li>
<li class="download"><a href="https://github.com/sebnitu/Quovolver/zipball/master"><img src="bd.download.png" alt=""> Download</a></li>
</ul>
</nav>
<header class="header">
<h1>Quovolver</h1>
<p>Quovolver is a jQuery plugin for revolving multiple testimonials or quotes in your document. Although, it can also be used to cycle through any group of elements.<p>
<div class="custom-nav"></div>
</header>
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="demo" id="demo-one">
<div class="description">
<h2>Example One</h2>
<p>This is the most basic usage of Quovolver with the default settings being used. See the full documentation for details on all available parameters.</p>
</div><!-- .description -->
<nav class="subnav tabs">
<ul>
<li class="active"><a href="#panel-1">Demo</a></li>
<li><a href="#panel-2">JavaScript</a></li>
<li><a href="#panel-3">HTML</a></li>
<li><a href="#panel-4">CSS</a></li>
</ul>
</nav>
<div class="panels">
<div class="panel" id="panel-1">
<div class="quotes">
<blockquote>
<p>“That which can be asserted without evidence, can be dismissed without evidence.”</p>
<p>— Christopher Hitchens (Quote 1)</p>
</blockquote>
<blockquote>
<p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p>
<p>— Christopher Hitchens (Quote 2)</p>
</blockquote>
<blockquote>
<p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p>
<p>— Christopher Hitchens (Quote 3)</p>
</blockquote>
<blockquote>
<p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p>
<p>— Christopher Hitchens (Quote 4)</p>
</blockquote>
<blockquote>
<p>“Human decency is not derived from religion. It precedes it.”</p>
<p>— Christopher Hitchens (Quote 5)</p>
</blockquote>
<blockquote>
<p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p>
<p>— Christopher Hitchens (Quote 6)</p>
</blockquote>
</div><!-- .quotes -->
</div><!-- .panel -->
<div class="panel" id="panel-2">
<pre>// When document is ready...
$(document).ready(function() {
// Call Quovolver on the '.quotes' object
$('#demo-one .quotes').quovolver();
});</pre>
</div><!-- .panel -->
<div class="panel" id="panel-3">
<pre><div class="quotes">
<blockquote>
<p>“That which can be asserted without evidence, can be dismissed without evidence.”</p>
<p>— Christopher Hitchens (Quote 1)</p>
</blockquote>
<blockquote>
<p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p>
<p>— Christopher Hitchens (Quote 2)</p>
</blockquote>
<blockquote>
<p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p>
<p>— Christopher Hitchens (Quote 3)</p>
</blockquote>
<blockquote>
<p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p>
<p>— Christopher Hitchens (Quote 4)</p>
</blockquote>
<blockquote>
<p>“Human decency is not derived from religion. It precedes it.”</p>
<p>— Christopher Hitchens (Quote 5)</p>
</blockquote>
<blockquote>
<p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p>
<p>— Christopher Hitchens (Quote 6)</p>
</blockquote>
</div><!-- .quotes --></pre>
</div><!-- .panel -->
<div class="panel" id="panel-4">
<pre>No specific styles are required for this plugin to work :)</pre>
</div><!-- .panel -->
</div><!-- .panels -->
</div><!-- .demo -->
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="demo" id="demo-two">
<div class="description">
<h2>Example Two</h2>
<p>In this example, we are taking advantage of some of the available options. We've turned off the auto rotating feature and enabled all of the navigation features. We also changed the speed of the animation and which elements are being targeted since we aren't wanting to rotate the direct children of the selected object (view the HTML tab for more details).</p>
</div><!-- .description -->
<nav class="subnav tabs">
<ul>
<li class="active"><a href="#panel-5">Demo</a></li>
<li><a href="#panel-6">JavaScript</a></li>
<li><a href="#panel-7">HTML</a></li>
<li><a href="#panel-8">CSS</a></li>
</ul>
</nav>
<div class="panels">
<div class="panel" id="panel-5">
<div class="quotes">
<ul>
<li>
<blockquote>
<p>“That which can be asserted without evidence, can be dismissed without evidence.”</p>
<p>— Christopher Hitchens (Quote 1)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p>
<p>— Christopher Hitchens (Quote 2)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p>
<p>— Christopher Hitchens (Quote 3)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p>
<p>— Christopher Hitchens (Quote 4)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Human decency is not derived from religion. It precedes it.”</p>
<p>— Christopher Hitchens (Quote 5)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p>
<p>— Christopher Hitchens (Quote 6)</p>
</blockquote>
</li>
</ul>
</div><!-- .quotes -->
</div><!-- .panel -->
<div class="panel" id="panel-6">
<pre>// When document is ready...
$(document).ready(function() {
// Call Quovolver on the '.quotes' object
$('#demo-two .quotes').quovolver({
children : 'li',
transitionSpeed : 600,
autoPlay : false,
equalHeight : false,
navPosition : 'above',
navPrev : true,
navNext : true,
navNum : true,
navText : true,
navTextContent : 'Quote @a of @b'
});
});</pre>
</div><!-- .panel -->
<div class="panel" id="panel-7">
<p>This is an example of when we are targeting an item who's elements we want to rotate are not it's direct children. In this case, they are list items in an unordered list. So we use the "child" property and give it a value of "li" (just like if we were targeting them with CSS).</p>
<pre><div class="quotes">
<ul>
<li>
<blockquote>
<p>“That which can be asserted without evidence, can be dismissed without evidence.”</p>
<p>— Christopher Hitchens (Quote 1)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p>
<p>— Christopher Hitchens (Quote 2)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p>
<p>— Christopher Hitchens (Quote 3)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p>
<p>— Christopher Hitchens (Quote 4)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Human decency is not derived from religion. It precedes it.”</p>
<p>— Christopher Hitchens (Quote 5)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p>
<p>— Christopher Hitchens (Quote 6)</p>
</blockquote>
</li>
</ul>
</div><!-- .quotes --></pre>
</div><!-- .panel -->
<div class="panel" id="panel-8">
<p>These styles are not required for the plugin to work. They are only to demonstrate how you could style the navigation that is generated by Quovolver.</p>
<pre>/**
* General Navigation Styles
*/
.quovolve-nav:before, .quovolve-nav:after {
content: "\0020"; display: block; height: 0; visibility: hidden;
}
.quovolve-nav:after { clear: both; }
.quovolve-nav {
margin: 10px 0;
line-height: 30px;
zoom: 1;
}
.quovolve-nav-above {
margin-bottom: 20px;
}
.quovolve-nav-below {
margin-top: 20px;
}
.quovolve-nav span {
float: left;
margin-right: 5px;
}
.quovolve-nav a {
background: #aaa;
line-height: 20px;
color: #fff;
display: block;
padding: 5px 15px;
border: 0 none;
text-align: center;
/* Border Radius */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* Box Shadow */
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
}
.quovolve-nav a:hover {
background: #dd390d;
}
/**
* Numbered Navigation
*/
.nav-numbers {
list-style: none; margin: 0;
float: right;
}
.nav-numbers li {
float: left;
margin: 0 0 0 5px;
}
.nav-numbers li a {
padding-left: 0; padding-right: 0;
width: 30px;
}
.nav-numbers li.active a, .nav-numbers li a:hover {
background: #dd390d;
}
/**
* Navigation Description
*/
.nav-text {
margin-left: 30px;
color: #aaa;
}</pre>
</div><!-- .panel -->
</div><!-- .panels -->
</div><!-- .demo -->
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="options">
<div class="description">
<h2>Available Options</h2>
<p>You can pass options as key/value object to the quovolver() function or modify them at the bottom of jquery.quovolver.js file.</p>
</div><!-- .description -->
<div class="table-wrap">
<table width="100%" class="options-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="20%">Key</th>
<th width="18%">Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>children</td>
<td>null</td>
<td>If selector is provided, we will use the find method to get the group of items, otherwise we'll grab the children of the selected element.</td>
</tr>
<tr>
<td>transition</td>
<td>'fade'</td>
<td>The style of the transition. Currently there are only two available options, fade and basic. More transitions will be added in the future or you can create your own by passing in your own function name. A JSON object will be passed to your function to work with.</td>
</tr>
<tr>
<td>transitionSpeed</td>
<td>300</td>
<td>This is the speed that each animation will take, not the entire transition. There may be multiple animations in any given transition but each animation will run at this set speed.</td>
</tr>
<tr>
<td>autoPlay</td>
<td>true</td>
<td>Toggle auto rotate.</td>
</tr>
<tr>
<td>autoPlaySpeed</td>
<td>6000</td>
<td>Duration before each transition. Time is in mili-seconds so 6000 ends up being 6 seconds.</td>
</tr>
<tr>
<td>pauseOnHover</td>
<td>true</td>
<td>Whether the auto play feature should pause when the object is hovered over. Auto rotate would resume when hovered off.</td>
</tr>
<tr>
<td>stopOnHover</td>
<td>false</td>
<td>Whether the auto play feature should stop when the object is hovered over.</td>
</tr>
<tr>
<td>equalHeight</td>
<td>true</td>
<td>Whether every item should have equal heights.</td>
</tr>
<tr>
<td>navPosition</td>
<td>'above'</td>
<td>Where the enabled navigation elements will be output. Can be set to 'above', 'below', 'both' or 'custom' (must provide custom selector for placement).</td>
</tr>
<tr>
<td>navPositionCustom</td>
<td>null</td>
<td>The selector of the custom element where the enabled navigation elements will be output.</td>
</tr>
<tr>
<td>navPrev</td>
<td>false</td>
<td>Toggle the "previous" button.</td>
</tr>
<tr>
<td>navNext</td>
<td>false</td>
<td>Toggle the "next" button.</td>
</tr>
<tr>
<td>navNum</td>
<td>false</td>
<td>Toggle numbered navigation. This outputs a "1, 2, 3, 4..." that links to their corresponding element.</td>
</tr>
<tr>
<td>navText</td>
<td>false</td>
<td>Toggle navigation description (e.g. display current item # and total item #).</td>
</tr>
<tr>
<td>navPrevText</td>
<td>'Prev'</td>
<td>Text for the "previous" button.</td>
</tr>
<tr>
<td>navNextText</td>
<td>'Next'</td>
<td>Text for the "next" button.</td>
</tr>
<tr>
<td>navTextContent</td>
<td>'@a / @b'</td>
<td>The text that will display for the navigation description. '@a' will be replaced with current item number and '@b' with total number.</td>
</tr>
</tbody>
</table>
</div><!-- .table-wrap -->
</div><!-- .options -->
<div class="options">
<div class="description">
<h2>Public Methods</h2>
<p>Quovolver's functions that you can play with. More coming soon.</p>
</div><!-- .description -->
<div class="table-wrap">
<table width="100%" class="options-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="20%">Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>$('elementWeCalledQuovolverOn').trigger('goto', itemNumber);</td>
<td>A public interface to move to transition to a specific item.</td>
</tr>
</tbody>
</table>
</div><!-- .table-wrap -->
</div><!-- .options -->
</div><!-- .page -->
<footer class="footer">
<p>Quovolver is built and maintained by <a href="http://sebnitu.com">Sebastian Nitu</a> and is licensed under the MIT License (MIT). Follow me on <a href="https://twitter.com/sebnitu">Twitter</a>, <a href="https://github.com/sebnitu">GitHub</a> and <a href="http://dribbble.com/sebnitu">Dribbble</a>.</p>
</footer>
</div><!-- .wrapper -->
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="bd.jquery.min.js"%3E%3C/script%3E'))</script>
<!-- JavaScript -->
<script src="bd.ui.js"></script>
<script src="jquery.quovolver.min.js"></script>
<!-- JavaScript Test Zone -->
<script>
$(document).ready(function() {
// Example One
$('#demo-one .quotes').quovolver();
// Example Two
$('#demo-two .quotes').quovolver({
children : 'li',
transitionSpeed : 600,
autoPlay : false,
equalHeight : false,
navPosition : 'above',
navPrev : true,
navNext : true,
navNum : true,
navText : true,
navTextContent : 'Quote @a of @b'
});
});
</script>
</body>
</html>