forked from Dogfalo/materialize
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript.html
More file actions
795 lines (742 loc) · 41 KB
/
javascript.html
File metadata and controls
795 lines (742 loc) · 41 KB
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
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<meta name="description" content="Learn how to use our JavaScript components to add meaningful animations and transitions to your website."/>
<title>JavaScript - Materialize</title>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png"/>
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png"/>
<link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32"/>
<!-- Android 5 Chrome Color -->
<meta name="theme-color" content="#EE6E73"/>
<!-- CSS -->
<link href="css/prism.css" rel="stylesheet"/>
<link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css"/>
<script>
window.liveSettings = {
api_key: "a0b49b34b93844c38eaee15690d86413",
picker: "bottom-right",
detectlang: true,
dynamic: true,
autocollect: true
};
</script>
<script src="//cdn.transifex.com/live.js"> </script>
</head>
<body>
<!-- Buy sell ads-->
<script>
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<header>
<nav id="">
<div class="container">
<div class="nav-wrapper"><a href="http://materializecss.com/" class="brand-logo">Materialize</a>
<ul id="nav-mobile" class="right side-nav">
<li><a href="http://materializecss.com/about.html">About</a></li>
<li><a href="http://materializecss.com/getting-started.html">Getting Started</a></li>
<li><a href="http://materializecss.com/sass.html">Sass</a></li>
<li><a href="http://materializecss.com/components.html">Components</a></li>
<li class="active"><a href="http://materializecss.com/javascript.html">JavaScript</a></li>
<li><a href="http://materializecss.com/mobile.html">Mobile</a></li>
</ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</div>
</div>
</nav>
</header>
<main><div class="tabs-wrapper">
<div class="row white z-depth-1">
<div class="container">
<ul class="tabs">
<li class="tab"><a href="#tab1">Dialogs</a></li>
<li class="tab"><a href="#tab2">Navigation</a></li>
<li class="tab"><a href="#tab3">Waves</a></li>
<li class="tab"><a href="#tab4">Media</a></li>
<li class="tab"><a href="#tab5">Collapsible</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- Toasts Section -->
<div id="tab1" class="row">
<div class="col hide-on-small-only m3 l2">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#toast">Toasts</a></li>
<li><a href="#tooltip">Tooltips</a></li>
<li><a href="#modal">Modals</a></li>
<li><a href="#dropdown">Dropdowns</a></li>
</ul>
</div>
</div>
<!-- Dialog Section -->
<div class="col s12 m9 l10">
<div id="toast" class="section scrollspy">
<h2 class="header">Dialogs</h2>
<p class="caption">Dialogs are content that are not original visible on a page but show up with extra information if needed. The transitions should make the appearance of the dialog make sense and not jarring to the user. </p>
<h3 class="header">Toasts</h3>
<div class="row">
<div class="col s12">
<p>Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively, try it out by clicking the button below on different device sizes.</p>
<a class="waves-effect waves-light btn" onclick="toast('I am a toast', 4000)">Toast!</a>
</div>
</div>
<div class="row">
<div class="col s12">
<p>To do this, call the toast() function programatically in JavaScript.</p>
<pre><code class="language-javascript">
// toast(message, displayLength, className, completeCallback);
toast('I am a toast!', 4000) // 4000 is the duration of the toast
</code></pre>
<p>One way to add this into your application is to add this as an onclick event to a button</p>
<pre><code class="language-markup">
<a class="btn" onclick="toast('I am a toast', 4000)">Toast!</a>
</code></pre>
<h4>Custom HTML</h4>
<p>You can pass in an HTML String as the first argument as well. Take a look at the example below, where we pass in text as well as a flat button. If you call an external function instead of in-line JavaScript, you will not need to escape quotation marks. </p>
<a class="waves-effect waves-light btn" onclick="toast('<span>Item Deleted</span><a class="btn-flat yellow-text" href="#1">Undo</a>', 5000)">Toast with Action</a>
<pre><code class="language-javascript">
<a class="waves-effect waves-light btn" onclick="toast('<span>Item Deleted</span><a class=<xmp>"</xmp>btn-flat yellow-text<xmp>"</xmp> href=<xmp>"</xmp>#!<xmp>"</xmp>>Undo<a>', 5000)">Toast!</a>
</code></pre>
<h4>Callback</h4>
<p>You can have the toast callback a function when it has been dismissed</p>
<a class="btn" onclick="toast('I am a toast', 4000,'',function(){alert('Your toast was dismissed')})">Toast!</a>
<pre><code class="language-markup">
<a class="btn" onclick="toast('I am a toast', 4000,'',function(){alert('Your toast was dismissed')})">Toast!</a>
</code></pre>
<h4>Styling Toasts</h4>
<p>We've added the ability to customize your toasts easily. You can pass in classes as an optional parameter into the toast functions like this: <code class="language-javascript">toast('I am a rounded toast', 2000, 'rounded')</code>. We've added a rounded class for you, but you can create your own CSS classes and apply them to toasts. Checkout out our full example below.</p>
<a class="waves-effect waves-light btn" onclick="toast('I am a toast!', 3000, 'rounded')">Round Toast!</a>
<pre><code class="language-javascript">
toast('I am a toast!', 3000, 'rounded') // 'rounded' is the class I'm applying to the toast
</code></pre>
</div>
</div>
</div>
<div id="tooltip" class="scrollspy">
<h3 class="header">Tooltips</h3>
<div class="row">
<div class="col s12">
<p>Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.</p>
<a class="btn tooltipped" data-position="bottom" data-tooltip="I am tooltip"> SHOW me TOOLTIP</a>
<br>
</div>
</div>
<div class="row">
<div class="col s12">
Add the Tooltipped class to your element and add either top, bottom, left, right on data-tooltip to control the position
<pre><code class="language-markup">
<a class="btn tooltipped" data-position="bottom" data-tooltip="I am tooltip"> SHOW me TOOLTIP</a>
</code></pre>
<br>
Then add this to your jQuery file, with the hover delay you want as the option
<pre><code class="language-javascript">
$(document).ready(function(){
$('.tooltipped').tooltip({"delay": 50});
});
</code></pre>
</div>
</div>
</div>
<div id="modal" class="section scrollspy">
<h3 class="header">Modals</h3>
<div class="row">
<div class="col s12">
<p>Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class <code class="language-css">.modal-close</code> to your button.</p>
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
</div>
</div>
<div id="modal1" class="modal">
<h4>Modal Header</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<a href="#" class="waves-effect btn-flat modal-action modal-close">Agree</a>
</div>
<div class="row">
<div class="col s12">
<h4>Modals HTML Structure</h4>
<pre><code class="language-markup">
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<h4>Modal Header</h4>
<p>A bunch of text</p>
<a href="#" class="waves-effect btn-flat modal-close">Agree</a>
</div>
</code></pre>
</div>
</div>
<div class="row">
<div class="col s12">
<h4>jQuery Plugin Initialization</h4>
<p>To open a modal using a trigger:</p>
<pre><code class="language-javascript">
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</code></pre>
<p>You can also open modals programatically, the below code will make your modal open on document ready:</p>
<pre><code class="language-javascript">
$(document).ready(function(){
$('#modal1').openModal();
});
</code></pre>
<p>You can also close them programatically:</p>
<pre><code class="language-javascript">
$(document).ready(function(){
$('#modal1').closeModal();
});
</code></pre>
</div>
<div class="row">
<div class="col s12">
<h4>Options</h4>
<p>You can customize the behavior of each modal using these options. For example, you can call a custom function to run when a modal is dismissed. To do this, just place your function in the intialization code as shown below.</p>
<pre><code class="language-javascript">
$('.modal-trigger').leanModal({
opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration
ready: function() { alert('Ready'); }, // Callback for Modal open
complete: function() { alert('Closed'); } // Callback for Modal close
}
);
</code></pre>
</div>
</div>
</div>
</div>
<div id="dropdown" class="scrollspy">
<h3 class="header">Dropdowns</h3>
<div class="row">
<div class="col s12">
<p>Add a dropdown list to any button. Make sure that the <code class="language-markup">data-activates</code> attribute matches the id in the <code class="language-markup"><ul></code> tag. </p>
<p>You can add a divider with the <code class="language-markup"><li class="divider"></li></code> tag. </p>
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<pre><code class="language-markup">
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
</code></pre>
</div>
</div>
<div class="row">
<div class="col s12">
<h4>jQuery Plugin Initialization</h4>
<pre><code class="language-javascript">
$(document).ready(function(){
$('.dropdown-button').dropdown();
});
</code></pre>
</div>
</div>
<div class="row">
<div class="col s12">
<h4>Options</h4>
<p>The default behavior of dropdown is to activate on hover. To have it activate on a click, you can pass that as an option.</p>
<pre><code class="language-javascript">
$('.dropdown-button').dropdown({
hover: false, // Activate on click
}
);
</code></pre>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Section -->
<div id="tab2" class="row">
<div class="col hide-on-small-only m3 l2">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#tabs">Tabs</a></li>
<li><a href="#sidebar">Sidebar</a></li>
</ul>
</div>
</div>
<div class="col s12 m9 l10">
<div id="tabs" class="section scrollspy">
<h2 class="header">Navigation</h2>
<p class="caption">
Here you can learn about our different navigation options. These components can help organize and divide your content into easier to read portions.
</p>
<h4>Tabs</h4>
<p>The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.</p>
<ul class="tabs tab-demo z-depth-1">
<li class="tab"><a href="#test1">Test 1</a></li>
<li class="tab"><a href="#test2">Test 2</a></li>
<li class="tab"><a href="#test3">Test 3</a></li>
<li class="tab"><a href="#test4">Test 4</a></li>
</ul>
<div id="test1" class="col s12"><p>Test 1</p></div>
<div id="test2" class="col s12"><p>Test 2</p></div>
<div id="test3" class="col s12"><p>Test 3</p></div>
<div id="test4" class="col s12"><p>Test 4</p></div>
<br>
</div>
<div class="section">
<h5>Tabs HTML Structure</h5>
<pre><code class="language-markup col s12">
<div class="col s12">
<ul class="tabs">
<li class="tab col s2"><a href="#test1">Test 1</a></li>
<li class="tab col s2"><a href="#test2">Test 2</a></li>
<li class="tab col s2"><a href="#test3">Test 3</a></li>
<li class="tab col s2"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</code></pre>
</div>
<div class="section">
<h5>jQuery Plugin Initialization</h5>
<pre><code class="language-javascript col s12">
$(document).ready(function(){
$('ul.tabs').tabs();
});
</code></pre>
</div>
<div id="sidebar" class="section scrollspy">
<h4>Sidebar</h4>
<p>This is a slide out menu. If you want a sidebar that will work on all widths, just add the class <code class="language-markup">full</code> to your sidebar list. You can add a dropdown to your sidebar by using our collapsible component.</p>
<ul id="slide-out" class="side-nav full">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<div class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></div>
<div class="collapsible-body">
<ul>
<li><a href="#!">First Dropdown Link</a></li>
<li><a href="#!">Second Dropdown Link</a></li>
<li><a href="#!">Third Dropdown Link</a></li>
<li><a href="#!">Fourth Dropdown Link</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse btn">Open Sidebar</a>
</div>
<div class="section">
<h5>Tabs HTML Structure</h5>
<pre><code class="language-markup col s12">
<ul id="slide-out" class="side-nav full">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<div class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></div>
<div class="collapsible-body">
<ul>
<li><a href="#!">First Dropdown Link</a></li>
<li><a href="#!">Second Dropdown Link</a></li>
<li><a href="#!">Third Dropdown Link</a></li>
<li><a href="#!">Fourth Dropdown Link</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</code></pre>
</div>
<div class="section">
<h5>jQuery Plugin Initialization</h5>
<pre><code class="language-javascript col s12">
$(".button-collapse").sideNav();
</code></pre>
</div>
</div>
</div>
<!-- Waves Section -->
<div id="tab3">
<div class="section">
<h2 class="header">Waves</h2>
<p class="caption">Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design</p>
<a class="waves-effect waves-light btn" href="#!">Wave</a>
</div>
<div class="section">
<h4>Applying Waves</h4>
<p>To put the waves effect on buttons, you just have to put the class <code class="language-markup">waves-effect</code> on to the buttons. If you want the waves effect to be white instead, add both <code class="language-markup">waves-effect waves-light</code> as classes.</p>
<pre><code class="language-markup col s12">
<a class="waves-effect waves-light btn-large" href="#">Wave</a>
</code></pre>
</div>
<!-- Customization -->
<div class="section">
<h3 class="header">Customization</h3>
<p>There are several ways to customize waves, you can either use pre-created classes, or you can define your own color by creating a new class</p>
<div class="row">
<div class="col s12 m6">
<h4>Available Colors</h4>
<p>To use these, just add the corresponding class to your button. Play around with changing the background color of butons and the waves effect to create something cool!</p>
<pre><code class="language-markup">
<a href="#!" class="btn waves-effect waves-teal">Send</a>
</code></pre>
<div class="collection waves-color-demo">
<div class="collection-item">Default<a href="#!" class="waves-effect btn secondary-content">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-light</code><a href="#!" class="waves-effect waves-light btn secondary-content">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-red</code><a href="#!" class="waves-effect waves-red btn secondary-content">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-yellow</code><a href="#!" class="waves-effect waves-yellow btn secondary-content">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-orange</code><a href="#!" class="waves-effect waves-orange btn secondary-content">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-purple</code><a href="#!" class="waves-effect waves-purple btn secondary-content">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-green</code><a href="#!" class="waves-effect waves-green btn secondary-content">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-teal</code><a href="#!" class="waves-effect waves-teal btn secondary-content">Send</a></div>
</div>
</div>
<div class="col s12 m6">
<h4>Custom Colors</h4>
<p>If the color you want is not already available, you can easily make your own waves color by creating a custom CSS class. Take a look at the example below where we add a waves-brown effect</p>
<pre><code class="language-css">
/*
When creating your CSS selector,
change "brown" to something of your choosing
*/
.waves-effect.waves-brown .waves-ripple {
/* The alpha value allows the text and background color
of the button to still show through. */
background-color: rgba(121, 85, 72, 0.65);
}
</code></pre>
</div>
</div>
</div>
</div>
<!--Material Box Section-->
<div id="tab4" class="section row">
<div class="col hide-on-small-only m3 l2">
<div style="height: 1px;">
<ul class="table-of-contents">
<li><a href="#materialbox">Material Box</a></li>
<li><a href="#slider">Slider</a></li>
<li><a href="#parallax">Parallax</a></li>
</ul>
</div>
</div>
<div class="col s12 m9 l10">
<!-- Material Box Section -->
<div id="materialbox" class="scrollspy">
<h2 class="header">Media</h2>
<p class="caption">
Media components include things that have to do with large media objects like Images, Video, Audio, etc.
</p>
<h3 class="header">Material Box</h3>
<p class="caption">Material box is a material design implementation of the Lightbox plugin. When a user clicks on an image that can be enlarged. Material box centers the image and enlarges it in a smooth, non-jarring manner. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.</p>
<img class="materialboxed" width="650" src="images/sample-1.jpg">
<p>Creating the above image with the effect is as simple as adding a <code class="language-markup">materialboxed</code> class to the image tag.</p>
<pre><code class="language-markup">
<img class="materialboxed" width="650" src="images/sample-1.jpg">
</code></pre>
<p>Next you simply have to add the initialization code </p>
<pre><code class="language-javascript col s12">
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</code></pre>
<h4>Captions</h4>
<p>It is very easy to add a short caption to your photo. Just add the caption as a <code class="language-markup">data-caption</code> attribute.</p>
<img class="materialboxed" data-caption="A picture of some deer and tons of trees" width="250" src="http://th01.deviantart.net/fs70/PRE/i/2013/126/1/e/nature_portrait_by_pw_fotografie-d63tx0n.jpg">
<pre><code class="language-markup">
<img class="materialboxed" data-caption="A picture of some deer and tons of trees" width="250" src="http://th01.deviantart.net/fs70/PRE/i/2013/126/1/e/nature_portrait_by_pw_fotografie-d63tx0n.jpg">
</code></pre>
</div>
<br>
<!-- Slider Section -->
<div id="slider" class="scrollspy">
<h3 class="header">Slider</h3>
<p class="caption">Our slider is a simple and elegant image carousel. You can also have captions that will be transitioned on their own depending on their alignment. You can also have indicators that show up on the bottom of the slider. </p>
<p>Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.</p><br>
<div class="slider">
<ul class="slides">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div><br>
<pre><code class="language-markup">
<div class="slider">
<ul class="slides">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</code></pre>
<p>Next you simply have to add the initialization code </p>
<pre><code class="language-javascript col s12">
$(document).ready(function(){
$('.slider').slider({full_width: true});
});
</code></pre>
</div>
<br><br>
<!-- Parallax Section -->
<div id="parallax" class="scrollspy">
<h3 class="header">Parallax</h3>
<p class="caption">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the demo to get a better idea of it.</p>
<a href="parallax.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a><br><br>
<h4>Parallax HTML Structure</h4>
<pre><code class="language-markup col s12">
<div class="parallax-container">
<div class="parallax"><img src="images/parallax1.jpg"></div>
</div>
</code></pre>
<h4>Parallax Javascript Initialization</h4>
<pre><code class="language-javascript col s12">
$(document).ready(function(){
$('.parallax').parallax();
});
</code></pre>
<h4>Parallax Container CSS</h4>
<p>The parallax container height is what defines how much of the image can be seen. This is set to a default of 500px. You can add your own style to override this.</p>
<pre><code class="language-css col s12">
.parallax-container {
height: "your height here";
}
</code></pre>
</div>
</div>
</div>
<!-- Collapsible Section -->
<div id="tab5" class="section">
<h2 class="header">Collapsible</h2>
<p class="caption">
Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.
</p>
<ul class="collapsible collapsible-accordion">
<li>
<div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</li>
</ul>
<div class="section">
<h4>Collapsible HTML Structure</h4>
<pre><code class="language-markup col s12">
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
</code></pre>
</div>
<div class="section">
<h4>jQuery Plugin Initialization</h4>
<pre><code class="language-javascript col s12">
$(document).ready(function(){
$('.collapsible').collapsible();
});
</code></pre>
</div>
<div class="section">
<h4>Options</h4>
<p>There are two ways a collapsible can behave. It can either allow multiple sections to stay open, or it can only allow one section to stay open at a time, which is called an accordion. See below for a demo of each type</p>
</div>
<div class="row">
<div class="col s12 m3"><h5>Accordion</h5></div>
<div class="col s12 m9">
<ul class="collapsible collapsible-accordion">
<li>
<div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</li>
</ul>
</div>
<div class="col s12 m9 offset-m3">
<pre><code class="language-javascript">
// This behavior is the default, so nothing needs to be done
$(document).ready(function(){
$('.collapsible').collapsible();
});
</code></pre>
</div>
<div class="col s12 m3"><h5>Expandable</h5></div>
<div class="col s12 m9">
<ul class="collapsible collapsible-expandable">
<li>
<div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</li>
</ul>
</div>
<div class="col s12 m9 offset-m3">
<pre><code class="language-javascript">
$(document).ready(function(){
$('.collapsible').collapsible({ "accordion" : false });
});
</code></pre>
</div>
</div>
</div> <!-- End of Container -->
</main> <footer>
<div class="container">
<div class="row">
<div class="col l4 s12">
<h5 class="white-text">Help Materialize Grow</h5>
<p class="grey-text lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
</button>
</form>
</div>
<div class="col l4 s12">
<h5 class="white-text">Join the Discussion</h5>
<p class="grey-text lighten-4">We have a gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
<a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
</div>
<div class="col l4 s12" style="overflow: hidden;">
<h5 class="white-text">Connect</h5>
<iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
<br>
<a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
<br>
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Materialize, All rights reserved.
<a class="grey-text lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery.timeago.min.js"></script>
<script src="js/prism.js"></script>
<script src="bin/materialize.js"></script>
<script src="js/init.js"></script>
<!-- Twitter Button -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- Google Plus Button-->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56218128-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>