-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript.html
589 lines (518 loc) · 29 KB
/
javascript.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
<!doctype html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/favicons/apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/favicons/apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/favicons/apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="img/favicons/apple-touch-icon-precomposed.png">
<link rel="icon" href="img/favicons/favicon.ico" type="image/x-icon">
<title>Foundation Docs: Javascript</title>
<link rel="stylesheet" href="/assets/normalize.css" />
<link rel="stylesheet" href="/assets/docs.css" />
<script src="/assets/vendor/custom.modernizr.js"></script>
</head>
<body class="antialiased off-canvas hide-extras">
<nav class="top-bar hide-for-small">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="/">Foundation</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li><a href="/grid.php">Features</a></li>
<li class="divider"></li>
<li><a href="/templates.php">Add-ons</a></li>
<li class="divider"></li>
<li><a href="/case-jacquelinewest.php">Case Studies</a></li>
<li class="divider"></li>
<li><a href="/docs/">Docs</a></li>
<li class="divider"></li>
<li><a href="/training.php">Training</a></li>
<li class="divider"></li>
<li class="has-form">
<a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
</li>
</ul>
</section>
</nav>
<section class="main">
<header class="show-for-small">
<a class='sidebar-button show-for-small' id="sidebarButton" href="#sidebar" ><img src="/assets/offcanvas/menu-wht.png" alt="ZURB Menu"><h4>Foundation</h4></a>
</header>
<div class="row">
<div class="large-12 columns">
<h1 class="docs header"><a href="http://foundation.zurb.com/docs/">Foundation 4 Documentation</a></h1>
<h6 class="docs subheader"><a href="http://foundation.zurb.com/old-docs/f3">Want F3 Docs?</a></h6>
<hr>
</div>
</div>
<div class="row">
<div class="large-9 push-3 columns">
<div class="row">
<div class="large-12 columns">
<h2>Javascript</h2>
<h4 class="subheader">Foundation 4 streamlines the implementation of the Foundation plugins by combining them all into a single plugin under the <code>$.fn.foundation()</code> Zepto/jQuery namespace.</h4>
<hr>
<h2>Installation</h2>
<p>Foundation JavaScript was designed to work with <a href="http://zeptojs.com/" title="Zepto Docs">Zepto</a> and <a href="http://jquery.com/" title="jQuery Docs">jQuery</a> right out of the gate. Zepto is not supported by all browsers, so as suggested in the Zepto documentation, you should test for compatibility and load Zepto or jQuery as necessary.</p>
<h5>Include Libraries</h5>
<p>In the <code>head</code> section of your page add Modernizr. Modernizr acts as a shim for HTML5 elements for older browsers as well as detection for mobile devices.</p>
<div class='html'><div class='highlight'><pre class="">
<span class="nt"><script </span><span class="na">src=</span><span class="s">"/js/custom.modernizr.js"</span><span class="nt">></script></span>
</pre></div></div>
<p>Before the closing <code>body</code> tag, insert the following JavaScript.</p>
<div class='html'><div class='highlight'><pre class="">
<span class="c"><!-- Check for Zepto support, load jQuery if necessary --></span>
<span class="nt"><script></span>
<span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">'<script src=/js/vendor/'</span>
<span class="o">+</span> <span class="p">(</span><span class="s1">'__proto__'</span> <span class="k">in</span> <span class="p">{}</span> <span class="p">?</span> <span class="s1">'zepto'</span> <span class="p">:</span> <span class="s1">'jquery'</span><span class="p">)</span>
<span class="o">+</span> <span class="s1">'.js><\/script>'</span><span class="p">);</span>
<span class="nt"></script></span>
</pre></div></div>
<p>Then include either <code>foundation.min.js</code>, which includes Foundation Core and all JavaScript plugins or you can load them individually. The minified version is not available in the Compass version.</p>
<div class='html'><div class='highlight'><pre class="">
<span class="nt"><script </span><span class="na">src=</span><span class="s">"/js/foundation.min.js"</span><span class="nt">></script></span>
<span class="c"><!-- or individually --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"/js/foundation.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"/js/foundation.alerts.js"</span><span class="nt">></script></span>
<span class="c"><!-- ... --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"/js/foundation.dropdown.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"/js/foundation.section.js"</span><span class="nt">></script></span>
</pre></div></div>
<h5>Initialize Foundation</h5>
<p>After you have included the Foundation JavaScript, just add a simple call to initialize all plugins on your page.</p>
<p>It is recommended that you initialize Foundation at the end of the page <code><body></code>.</p>
<div class='html'><div class='highlight'><pre class="">
<span class="nt"><script></span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">();</span>
<span class="nt"></script></span>
</pre></div></div>
<p><strong>Note:</strong> We include tested versions of jQuery and Zepto in the Foundation repo to get you started quickly. If you want to build your own version of Zepto, Foundation employs the <i>event</i>, <i>fx_methods</i>, <i>assets</i>, <i>data</i>, <i>selector</i>, and <i>stack</i> modules.</p>
<hr>
<h2>Configuration</h2>
<p>Foundation accepts a myriad of options for initialization. By default, calling <code>$('#scope').foundation();</code> will initialize all available plugins on the page. Alternatively, you can pass individual plugins along with configuration options and a callback. This will allow you to select specific plugins to start on your page, even if their source is included. You can take a look at the call here:</p>
<div class='js'><div class='highlight'><pre class="">
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">(</span><span class="s1">'section'</span><span class="p">,</span> <span class="p">{</span><span class="na">deep_linking</span><span class="p">:</span> <span class="kc">true</span><span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">});</span>
</pre></div></div>
<p>The call will initialize the Section plugin on the page with deep linking enabled and pass back a response object with any errors that may have occurred.</p>
<p>You can initialize multiple libraries within the same call as well. Here are a few ways this can be done:</p>
<div class='js'><div class='highlight'><pre class="">
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">(</span><span class="s1">'section dropdown alerts'</span><span class="p">,</span> <span class="p">{</span><span class="na">callback</span><span class="p">:</span> <span class="nx">myCallbackFunction</span><span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// alternative, no configuration
</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">(</span><span class="s1">'section dropdown alerts'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// alternative, all plugins, only callback
</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// alternative, only plugin, no config or callback
</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">(</span><span class="s1">'section'</span><span class="p">);</span>
</pre></div></div>
<p>Keep in mind, if you initialize multiple plugins at one time and pass a configuration object that object will get passed to all plugins that were initialized. So in the first example: section, dropdown, and alerts will all get passed the <code>myCallbackFunction</code> on initialization.</p>
<p>What if you wanted to pass the <code>myCallbackFunction</code> only to Section and still initialize the other plugins as well? You could do the following.</p>
<div class='js'><div class='highlight'><pre class="">
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">)</span>
<span class="p">.</span><span class="nx">foundation</span><span class="p">(</span><span class="s1">'dropdown alerts'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">foundation</span><span class="p">(</span><span class="s1">'section'</span><span class="p">,</span> <span class="p">{</span><span class="na">callback</span><span class="p">:</span> <span class="nx">myCallbackFunction</span><span class="p">});</span>
</pre></div></div>
<hr>
<h2>Calling Internal Methods</h2>
<p>Foundation 4 JavaScript allows you call internal plugin methods by passing the method name as the second argument. This is necessary for plugins like Joyride, since they are not initialized on page load by default.</p>
<p>This will fire the <code>start</code> method on Joyride:</p>
<div class='js'><div class='highlight'><pre class="">
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">(</span><span class="s1">'joyride'</span><span class="p">,</span> <span class="s1">'start'</span><span class="p">);</span>
</pre></div></div>
<h5>Unbind Events</h5>
<p>All plugins can be unbound from the DOM by firing the <code>off</code> event either on that plugin or globally to unbind all Foundation events.</p>
<div class='js'><div class='highlight'><pre class="">
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">(</span><span class="s1">'tooltips'</span><span class="p">,</span> <span class="s1">'off'</span><span class="p">);</span>
<span class="c1">// or globally
</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">(</span><span class="s1">'off'</span><span class="p">);</span>
</pre></div></div>
</div>
</div>
</div>
<div class="large-3 pull-9 columns">
<div class="docs section-container accordion" data-section="accordion" data-options="one_up: false">
<section class="section active">
<p class="title"><a href="#">Using Foundation</a></p>
<div class="content">
<ul class="side-nav">
<li><a class="" href="index.html">Get Started</a></li>
<li><a class="active" href="javascript.html">Javascript</a></li>
<li><a class="" href="sass.html">Sass</a></li>
<li><a class="" href="rails.html">Rails</a></li>
<li><a class="" href="media-queries.html">Media Queries</a></li>
<li><a href="components/visibility.html">Visibility Classes</a></li>
<li><a class="" href="rtl.html">Right-to-Left Support</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Grid</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/grid.html">Grid</a></li>
<li><a href="components/block-grid.html">Block Grid</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Navigation</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/pagination.html">Pagination</a></li>
<li><a href="components/side-nav.html">Side Nav</a></li>
<li><a href="components/sub-nav.html">Sub Nav</a></li>
<li><a href="components/top-bar.html">Top Bar</a></li>
<li><a href="components/breadcrumbs.html">Breadcrumbs</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Buttons</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/buttons.html">Buttons</a></li>
<li><a href="components/button-groups.html">Button Groups</a></li>
<li><a href="components/dropdown-buttons.html">Dropdown Buttons</a></li>
<li><a href="components/split-buttons.html">Split Buttons</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Forms</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/forms.html">Forms</a></li>
<li><a href="components/custom-forms.html">Custom Forms</a></li>
<li><a href="components/switch.html">Switch</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Typography</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/type.html">Type</a></li>
<li><a href="components/inline-lists.html">Inline Lists</a></li>
<li><a href="components/labels.html">Labels</a></li>
<li><a href="components/keystrokes.html">Keystrokes</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">CSS Components</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/global.html">Global Styles</a></li>
<li><a href="components/alert-boxes.html">Alert Boxes</a></li>
<li><a href="components/panels.html">Panels</a></li>
<li><a href="components/pricing-tables.html">Pricing Tables</a></li>
<li><a href="components/progress-bars.html">Progress Bars</a></li>
<li><a href="components/tables.html">Tables</a></li>
<li><a href="components/thumbnails.html">Thumbnails</a></li>
<li><a href="components/flex-video.html">Flex Video</a></li>
<li class="divider"></li>
<li><a target="_blank" style="font-style: italic" href="components/kitchen-sink.html">Kitchen Sink</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Javascript</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/abide.html">Abide</a></li>
<li><a href="components/clearing.html">Clearing</a></li>
<li><a href="components/dropdown.html">Dropdown</a></li>
<li><a href="components/interchange.html">Interchange</a></li>
<li><a href="components/joyride.html">Joyride</a></li>
<li><a href="components/magellan.html">Magellan</a></li>
<li><a href="components/orbit.html">Orbit</a></li>
<li><a href="components/reveal.html">Reveal</a></li>
<li><a href="components/section.html">Section</a></li>
<li><a href="components/tooltips.html">Tooltips</a></li>
</ul>
</div>
</section>
<section class="section ">
<p class="title"><a href="faq.html">FAQ</a></p>
</section>
<section class="section ">
<p class="title"><a href="support.html">Support</a></p>
</section>
</div>
<p><a href="http://foundation.zurb.com/download.php" class="button expand" style="margin-bottom: 0;">Download Foundation 4</a></p>
<div class="jobs hide-for-small">
<h5>Awesome product jobs:</h5>
<div id="zurbJobsWidget"></div>
<a id="via" href="http://zurbjobs.com">via <span class="jobs-link">ZURBjobs</span></a>
</div>
</div>
</div>
<br>
<div class="zurb-footer-top bg-blue">
<div class="row property">
<div class="large-4 columns">
<div class="property-info">
<h3><a href="http://foundation.zurb.com/">Foundation</a></h3>
<p>Foundation is made by <a href="http://www.zurb.com/">ZURB</a>, a product design company in Campbell, California. We've put more than 15 years of experience building web products, services and websites into this framework.</p>
</div>
</div>
<div class="large-8 columns">
<div class="row collapse">
<div class="large-4 columns">
<div class="learn-links">
<h4 class="hide-for-small">Want More?</h4>
<ul>
<li><a href="http://zurb.com/expo/foundation-intro">Foundation Training</a></li>
<li><a href="http://zurb.com/expo/custom">Responsive</a></li>
<li><a href="http://zurb.com/services/our-work">Our Work</a></li>
<li><a href="http://zurb.com/apps">ZURB Apps</a></li>
</ul>
</div>
</div>
<div class="large-4 columns">
<div class="support-links">
<h4 class="hide-for-small">Talk to us</h4>
<p>Call us at <strong>(408) 341-0600</strong></p>
<p>Not a big talker? Email us at <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="large-4 columns">
<div class="connect-links">
<h4 class="hide-for-small">Stay in touch</h4>
<p>Keep up with the latest on Foundation. Find us on Github.</p>
<a href="https://github.com/zurb/foundation" target="_blank" class="small button">Stay Connected</a>
</div>
</div>
</div>
</div>
</div>
<div class="row global">
<div class="large-3 small-6 columns">
<a href="http://zurb.com/services" class="footer-link-block services">
<span class="title">Services</span>
<span>Helping more than 200 startups succeed since 1998.</span>
</a>
</div>
<div class="large-3 small-6 columns">
<a href="http://foundation.zurb.com/" class="footer-link-block foundation">
<span class="title">Foundation</span>
<span>The most advanced front-end framework in the world.</span>
</a>
</div>
<div class="large-3 small-6 columns">
<a href="http://zurb.com/apps" class="footer-link-block apps">
<span class="title">Products</span>
<span>Prototype, iterate and collect feedback on your products.</span>
</a>
</div>
<div class="large-3 small-6 columns">
<a href="http://zurb.com/expo" class="footer-link-block expo">
<span class="title">Expo</span>
<span>Ideas, thoughts and design resources shared with you.</span>
</a>
</div>
</div>
</div>
<div class="zurb-footer-bottom">
<div class="row">
<div class="large-4 push-8 columns">
<ul class="home-social">
<li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
<li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
<li><a href="http://zurb.com/contact" class="mail"></a></li>
</ul>
</div>
<div class="large-8 pull-4 columns">
<a href="http://www.zurb.com" class="zurb-logo regular"></a>
<ul class="zurb-links">
<li><a href="http://zurb.com/about">About</a></li>
<li><a href="http://zurb.com/blog">Blog</a></li>
<li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
<li><a href="http://zurb.com/contact">Contact</a></li>
<li><a href="http://zurb.com/sitemap">Sitemap</a></li>
</ul>
<p class="copyright">© 1998–2020 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
<div class="joyride-modal-bg"></div>
</section>
<aside id="sidebar" role="complementary">
<!-- For Future Use
<div id="passport">
<a id="user" href="#">
<h5>Firstname LastName</h5><br>
<p>sign out</p>
</a>
<a id="ava" href="#">
<div class="avatar"><img src="placehold.it/75x75"></div>
</a>
</div>
-->
<!-- This is the apps main navigation -->
<div class="main-menu">
<h6>Foundation</h6>
<nav id="sideMenu" role="navigation">
<ul id="sideMainNav" class="nav-bar">
<li class="show-for-small">
<a href="index.html">Home</a>
</li>
<li>
<a href="http://foundation.zurb.com/grid.php">Features</a>
</li>
<li>
<a href="http://foundation.zurb.com/templates.php">Add-ons</a>
</li>
<li>
<a href="http://foundation.zurb.com/case-jacquelinewest.php">Case Studies</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/">Docs</a>
</li>
<li>
<a href="http://foundation.zurb.com/training.php">Training</a>
</li>
</ul>
</nav>
</div>
<hr>
<!-- These links will vary depending on what app it is -->
<div class="more-goodness">
<h6>More ZURB Goodness</h6>
<nav role="navigation">
<ul id="secondarySideMainNav" class="nav-bar goodness">
<li><a href="http://zurb.com/expo/foundation-intro">Foundation Training</a></li>
<li><a href="http://zurb.com/services/our-work">Our Work</a></li>
<li><a href="http://zurb.com/apps">ZURB Apps</a></li>
</ul>
</nav>
</div>
<hr>
<!-- These links will be the same across all of our proprties & apps -->
<div class="zurb-links">
<ul class="top">
<li class="logo"><a href="http://zurb.com"><img src="/assets/offcanvas/zurb-logo.png" alt="ZURB"></a></li>
<li><a href="http://zurb.com/about">About</a></li>
<li><a href="http://zurb.com/blog">Blog</a></li>
<li><a href="http://zurb.com/contact">Contact</a></li>
</ul>
<ul class="pillars">
<li>
<a href="http://www.zurb.com/services" class="footer-link-block services">
<span class="title">Studios</span>
<span>Helping startups win since '98.</span>
</a>
</li>
<li>
<a href="http://foundation.zurb.com/" class="footer-link-block foundation">
<span class="title">Foundation</span>
<span>World's most advanced responsive framework.</span>
</a>
</li>
<li>
<a href="http://zurb.com/apps" class="footer-link-block apps">
<span class="title">ZURB Apps</span>
<span>Tools to rapidly prototype and iterate.</span>
</a>
</li>
<li>
<a href="http://zurb.com/expo" class="footer-link-block expo">
<span class="title">Expo</span>
<span>Online training for smarter product design.</span>
</a>
</li>
</ul>
</div>
</aside>
<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal">
<h2>This is a modal.</h2>
<p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
<p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
<p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
<a class="close-reveal-modal">×</a>
</div>
<div id="secondModal" class="reveal-modal">
<h2>This is a second modal.</h2>
<p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="videoModal" class="reveal-modal large">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
</div>
<a class="close-reveal-modal">×</a>
</div>
<!-- Reveal Modals end -->
<script>
// Google Analytics
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-2195009-2'],
['_trackPageview'],
['b._setAccount', 'UA-2195009-27'],
['b._trackPageview']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
document.write('<script src="/assets/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js"><\/script>');
</script>
<script src="/assets/docs.js"></script>
<script>
$(document)
.foundation();
$.ajax({
url: '//zurb.com/jobs/widgets/jobs.json?limit=3',
dataType: 'jsonp',
success: function(data) {
var list = $("<ul></ul>");
$.each(data.jobs, function(idx, job) {
var item = "<li><a href='"+job.url+"' target='_blank'>" +
"<span class='positionTitle'>"+job.title+"</span>" +
"<span class='location'><span class='companyName'>"+job.company_name+"</span> in "+job.location+"</span>" +
"</a>" +
"</li>";
list.append(item);
});
// Customize This
$("#zurbJobsWidget").html(list);
}
});
// For Kitchen Sink Page
$('#start-jr').on('click', function() {
$(document).foundation('joyride','start');
});
</script>
</body>
</html>