Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Minor updates to the js, added episode titles to demo markup

  • Loading branch information...
commit 1a369ab839b8b61c9937e07e5ac58412dae02ee9 1 parent de6f11f
@tonyjcamp authored
Showing with 256 additions and 33 deletions.
  1. +2 −2 README.markdown
  2. +237 −17 index.html
  3. +17 −14 js/mediaChapters.js
View
4 README.markdown
@@ -1,11 +1,11 @@
# HTML5 Media Chapters <http://tonycamp.com/html5-media-chapters/>
-(Currently only working in Google Chrome)
+Currently only working in Google Chrome, Safari and FireFox
## Summary
The beginnings of a jQuery plugin that will allow you to time stamp an element, attach an event handler to it which will load an audio file, and jump to the specified time stamp.
-I chose to use the yayQuery podcasts as a demo because they taught me so much. Learn, and share. Thanks Rebecca Murphey, Adam Sontag, Alex Slexton, Paul Irish. Follow these people on github and twitter. You will learn a ton.
+I chose to use the yayQuery podcasts as a demo because they taught me so much. Learn, and share. Thanks Rebecca Murphey, Adam Sontag, Alex Sexton, Paul Irish. Follow these people on github and twitter. You will learn a ton.
## How To Use
View
254 index.html
@@ -9,7 +9,7 @@
<audio class="myaudio" controls></audio>
<ul id="episodes">
<li>
- <span class="episode_title" data-filename="yayquery_0">Episode 0</span>
+ <span class="episode_title" data-filename="yayquery_0">Episode 0 | Inaugural Zero-Indexed Episode</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -22,7 +22,7 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_1">Episode 1</span>
+ <span class="episode_title" data-filename="yayquery_1">Episode 1 | Dear &lt;canvas&gt;, meet bacon.</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -39,7 +39,7 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_2">Episode 2</span>
+ <span class="episode_title" data-filename="yayquery_2">Episode 2 | Third Time's a Charm!</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -58,7 +58,7 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_3">Episode 3</span>
+ <span class="episode_title" data-filename="yayquery_3">Episode 3 | $("#turkey").contents() === new Stuffing(); </span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -78,7 +78,7 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_4">Episode 4</span>
+ <span class="episode_title" data-filename="yayquery_4">Episode 4 | I Once Mixed Sprite and Cappuccino, It Was Disgusting</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -97,7 +97,7 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_5">Episode 5</span>
+ <span class="episode_title" data-filename="yayquery_5">Episode 5 | ...More Like jQuery 1.MORE, Amirite?!</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -128,7 +128,7 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_6">Episode 6</span>
+ <span class="episode_title" data-filename="yayquery_6">Episode 6 | Nay is for Norses</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -154,7 +154,7 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_7">Episode 7</span>
+ <span class="episode_title" data-filename="yayquery_7">Episode 7 | Jingle All The Yay</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -177,25 +177,62 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_8">Episode 8, 9, 10</span>
+ <span class="episode_title" data-filename="yayquery_10">Episode 10 | Happy Birthday jQuery!</span>
<div class="segments">
<p>Segments</p>
<ul>
- <li>Coming Soon</li>
+ <li><a href="#" class="loader" data-timestamp="0:35">Welcome back</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:00">jQuery News</a></li>
+ <li><a href="#" class="loader" data-timestamp="2:16">What will be in 1.4, jQuery Proxy</a></li>
+ <li><a href="#" class="loader" data-timestamp="4:55">JSON Parsing, Format with double quotes</a></li>
+ <li><a href="#" class="loader" data-timestamp="8:20">Crockford's object.create()</a></li>
+ <li><a href="#" class="loader" data-timestamp="10:49">Give your setter a function</a></li>
+ <li><a href="#" class="loader" data-timestamp="13:38">jQuery UI 1.8.2 Alpha Release</a></li>
+ <li><a href="#" class="loader" data-timestamp="16:35">jQuery 1.5 roadmap</a></li>
+ <li><a href="#" class="loader" data-timestamp="18:04">Blogs - phpied</a></li>
+ <li><a href="#" class="loader" data-timestamp="20:55">yayQuery Beginner's Corner - bind to more than one event at a time</a></li>
+ <li><a href="#" class="loader" data-timestamp="23:09">Anti-Pattern for Performance - .html('&lt;this&gt;&lt;is&gt;&lt;bad&gt;&lt;mmmkay?!&gt;')</a></li>
+ <li><a href="#" class="loader" data-timestamp="28:57">Plugin of the week - auto suggest by Drew Wilson</a></li>
+ <li><a href="#" class="loader" data-timestamp="30:57">Three Dots Plugin</a></li>
+ <li><a href="#" class="loader" data-timestamp="31:35">&amp;shy; &amp;shy;, hush hush, IUI</a></li>
+ <li><a href="#" class="loader" data-timestamp="33:15">CSS Reset</a></li>
</ul>
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_9">Episode 11</span>
+ <span class="episode_title" data-filename="yayquery_11">Episode 11 | 14 Days of Yaymes Padolsey</span>
<div class="segments">
<p>Segments</p>
<ul>
- <li>Coming Soon</li>
+ <li><a href="#" class="loader" data-timestamp="0:30">Embarrassing Video Talk</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:50">1.4 Released woo hoo</a></li>
+ <li><a href="#" class="loader" data-timestamp="2:55">What's in 1.4</a></li>
+ <li><a href="#" class="loader" data-timestamp="5:00">Paul joins jQuery team and Paul's bet</a></li>
+ <li><a href="#" class="loader" data-timestamp="7:00">.live() isn't default</a></li>
+ <li><a href="#" class="loader" data-timestamp="10:33">nwevents plugin</a></li>
+ <li><a href="#" class="loader" data-timestamp="11:10">forum.support.com</a></li>
+ <li><a href="#" class="loader" data-timestamp="13:27">14 days goodie</a></li>
+ <li><a href="#" class="loader" data-timestamp="14:18">jQUery UI to github</a></li>
+ <li><a href="#" class="loader" data-timestamp="15:07">jQUery Beginners Corn(ify)er - Set multiple properties at once</a></li>
+ <li><a href="#" class="loader" data-timestamp="16:20">Element creation syntax in 1.4</a></li>
+ <li><a href="#" class="loader" data-timestamp="17:55">Hiddenhancements - $.ajax() context and XHR object</a></li>
+ <li><a href="#" class="loader" data-timestamp="21:09">James Padolsey</a></li>
+ <li><a href="#" class="loader" data-timestamp="22:27">jQuery Lint</a></li>
+ <li><a href="#" class="loader" data-timestamp="24:55">How do I use jQuery Lint?</a></li>
+ <li><a href="#" class="loader" data-timestamp="26:23">Perhaps a use case?</a></li>
+ <li><a href="#" class="loader" data-timestamp="28:42">Does jQuery Lint Pass jQuery Lint?</a></li>
+ <li><a href="#" class="loader" data-timestamp="31:44">Yames's jQuery core contribution - per property easing</a></li>
+ <li><a href="#" class="loader" data-timestamp="33:33">Yames gets git, let him explain it to you</a></li>
+ <li><a href="#" class="loader" data-timestamp="39:43">Self executing anonymous functions or self-invoked anonymous functions</a></li>
+ <li><a href="#" class="loader" data-timestamp="43:47">Going over the top of chaining anti-pattern</a></li>
+ <li><a href="#" class="loader" data-timestamp="46:49">.parent().parent() discussion</a></li>
+ <li><a href="#" class="loader" data-timestamp="48:55">Thanks Yaymes!</a></li>
+ <li><a href="#" class="loader" data-timestamp="50:37">Plugin of the Week - Plugin of the Week Badge!</a></li>
</ul>
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_12">Episode 12</span>
+ <span class="episode_title" data-filename="yayquery_12">Episode 12 | The Complete Bunny's Guide to jQuery</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -220,7 +257,7 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_13">Episode 13</span>
+ <span class="episode_title" data-filename="yayquery_13">Episode 13 | Gotta Try to Catch 'Em All</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -243,7 +280,7 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_12">Episode ??? - SXSW</span>
+ <span class="episode_title" data-filename="yayquery_sxsw">Episode ??? - SXSW</span>
<div class="segments">
<p>Segments</p>
<ul>
@@ -256,11 +293,194 @@
</div>
</li>
<li>
- <span class="episode_title" data-filename="yayquery_13">Episode 13</span>
+ <span class="episode_title" data-filename="yayquery_16">Episode 16 - A Gource of the Source, Of Course, Of Course</span>
<div class="segments">
<p>Segments</p>
<ul>
- <li>Coming Soon</li>
+ <li><a href="#" class="loader" data-timestamp="0:45">Intro - jKweeeerie</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:33">News starts up</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:53">Favorites of jQuery UI 1.8</a></li>
+ <li><a href="#" class="loader" data-timestamp="4:03">IEcss.com - WTF IE?</a></li>
+ <li><a href="#" class="loader" data-timestamp="7:15">css3please - help writing css3</a></li>
+ <li><a href="#" class="loader" data-timestamp="8:07">Speaking of Conferences</a></li>
+ <li><a href="#" class="loader" data-timestamp="10:15">jQuery Templating</a></li>
+ <li><a href="#" class="loader" data-timestamp="16:17">HTML5 Video</a></li>
+ <li><a href="#" class="loader" data-timestamp="19:05">Gource - GIT Graphic Visualization</a></li>
+ <li><a href="#" class="loader" data-timestamp="20:20">jQuery Gource - Video / Song / Magic / &lt;3</a></li>
+ <li><a href="#" class="loader" data-timestamp="23:42">jQuery Source in .chm format</a></li>
+ <li><a href="#" class="loader" data-timestamp="25:00">Plugin of the Week - JS Plumb</a></li>
+ <li><a href="#" class="loader" data-timestamp="25:40">Dependency Management - Modulr</a></li>
+ <li><a href="#" class="loader" data-timestamp="28:05">MooTools OO Classes w/ jQuery</a></li>
+ <li><a href="#" class="loader" data-timestamp="29:55">YayQuery Throwdown - === Threequals</a></li>
+ <li><a href="#" class="loader" data-timestamp="32:41">Plupload - ajax uploader</a></li>
+ <li><a href="#" class="loader" data-timestamp="34:07">Hiddenhancement - Wrapping jQuery around any object</a></li>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <span class="episode_title" data-filename="yayquery_16">Episode 17 - SPRING BREAK! WOOOO!!</span>
+ <div class="segments">
+ <p>Segments</p>
+ <ul>
+ <li><a href="#" class="loader" data-timestamp="0:30">Intro</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:32">Conference Chatter</a></li>
+ <li><a href="#" class="loader" data-timestamp="2:45">Papa Crock hates HTML5!?</a></li>
+ <li><a href="#" class="loader" data-timestamp="4:03">Brendan Eich</a></li>
+ <li><a href="#" class="loader" data-timestamp="5:19">Brendan + Papa Crock === '&lt;3'</a></li>
+ <li><a href="#" class="loader" data-timestamp="5:32">Facebook's (who?) Like Button</a></li>
+ <li><a href="#" class="loader" data-timestamp="8:00">Souders + jsConf === '&lt;3'</a></li>
+ <li><a href="#" class="loader" data-timestamp="10:00">Dmitry Baranovskiy's Raphael</a></li>
+ <li><a href="#" class="loader" data-timestamp="10:30">oh nos!! Tech difficulty</a></li>
+ <li><a href="#" class="loader" data-timestamp="11:30">Prank call Skype BIOTCH!</a></li>
+ <li><a href="#" class="loader" data-timestamp="12:30">Dmitry Baranovskiy's Raphael Part Deux</a></li>
+ <li><a href="#" class="loader" data-timestamp="13:30">Toby Taylor - Gordon swf to svg</a></li>
+ <li><a href="#" class="loader" data-timestamp="13:47">Billy Hoffman - All the fucking scary security shit</a></li>
+ <li><a href="#" class="loader" data-timestamp="16:09">Aaron Quint - Macon' Bacon</a></li>
+ <li><a href="#" class="loader" data-timestamp="17:30">yayQuery Pillow Talk - Alex Russell</a></li>
+ <li><a href="#" class="loader" data-timestamp="18:38">jsConf Lunchtime Special</a></li>
+ <li><a href="#" class="loader" data-timestamp="21:35">jQCon Recap</a></li>
+ <li><a href="#" class="loader" data-timestamp="30:30">Widget Factory jQuery UI</a></li>
+ <li><a href="#" class="loader" data-timestamp="31:30">TXjs Conference</a></li>
+ <li><a href="#" class="loader" data-timestamp="34:11">Paul Irish Standards doc, must read</a></li>
+ <li><a href="#" class="loader" data-timestamp="38:56">Plugin of the Week - Slick Grid</a></li>
+ <li><a href="#" class="loader" data-timestamp="39:50">Fin</a></li>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <span class="episode_title" data-filename="yayquery_18">Episode 18 - I Dreamed A Dream</span>
+ <div class="segments">
+ <p>Segments</p>
+ <ul>
+ <li><a href="#" class="loader" data-timestamp="0:27">OMG 1337 John Resig Intro</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:20">Unicorns are dead to me now</a></li>
+ <li><a href="#" class="loader" data-timestamp="3:10">Gmail Apps in jQuery</a></li>
+ <li><a href="#" class="loader" data-timestamp="3:50">require.js updates</a></li>
+ <li><a href="#" class="loader" data-timestamp="5:20">John Resig Dream Continues</a></li>
+ <li><a href="#" class="loader" data-timestamp="5:55">jQuery History / Fun Fact</a></li>
+ <li><a href="#" class="loader" data-timestamp="6:58">Triple Threat Question</a></li>
+ <li><a href="#" class="loader" data-timestamp="8:27">How many active contributors?</a></li>
+ <li><a href="#" class="loader" data-timestamp="9:35">jQuery gets another award</a></li>
+ <li><a href="#" class="loader" data-timestamp="10:55">What's going on with jQuery and Mobile</a></li>
+ <li><a href="#" class="loader" data-timestamp="16:50">Show me the mo...bile devices</a></li>
+ <li><a href="#" class="loader" data-timestamp="19:26">Most popular mobile OS</a></li>
+ <li><a href="#" class="loader" data-timestamp="22:35">How can jQuery handle this mobile mess</a></li>
+ <li><a href="#" class="loader" data-timestamp="25:30">Why did the plan change?</a></li>
+ <li><a href="#" class="loader" data-timestamp="30:42">Common UI library goal, cross mobile platform?</a></li>
+ <li><a href="#" class="loader" data-timestamp="32:20">How does this relate to jQuery UI?</a></li>
+ <li><a href="#" class="loader" data-timestamp="34:45">Which mobile browsers will jQ support?</a></li>
+ <li><a href="#" class="loader" data-timestamp="37:28">Hiddenhancements - $.contains()</a></li>
+ <li><a href="#" class="loader" data-timestamp="39:11">Plugin of the Week - autoNumeric</a></li>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <span class="episode_title" data-filename="yayquery_19">Episode 19 - HTML5Locks, Stocks, & Tw…BZZZZZZZZZZZr</span>
+ <div class="segments">
+ <p>Segments</p>
+ <ul>
+ <li><a href="#" class="loader" data-timestamp="0:00">yayQuery... OK</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:30">and.... begin</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:51">Paul gets googed</a></li>
+ <li><a href="#" class="loader" data-timestamp="2:47">html5rocks</a></li>
+ <li><a href="#" class="loader" data-timestamp="4:55">html5cawks</a></li>
+ <li><a href="#" class="loader" data-timestamp="6:20">tx.js</a></li>
+ <li><a href="#" class="loader" data-timestamp="8:56">Sponsor tx.js</a></li>
+ <li><a href="#" class="loader" data-timestamp="10:03">ie9 updates</a></li>
+ <li><a href="#" class="loader" data-timestamp="12:16">ie9 javascript shiz</a></li>
+ <li><a href="#" class="loader" data-timestamp="13:51">jscript 9 details</a></li>
+ <li><a href="#" class="loader" data-timestamp="15:24">Interview Question - Host Objects??</a></li>
+ <li><a href="#" class="loader" data-timestamp="17:25">What's that smell? ie9 sniffing</a></li>
+ <li><a href="#" class="loader" data-timestamp="18:30">sencha sweet suite</a></li>
+ <li><a href="#" class="loader" data-timestamp="21:40">Rebecca's book jqfundamentals</a></li>
+ <li><a href="#" class="loader" data-timestamp="24:48">Plugin of the Week - Validity</a></li>
+ <li><a href="#" class="loader" data-timestamp="27:00">Tracekit</a></li>
+ <li><a href="#" class="loader" data-timestamp="28:35">Hiddenhancements - event constructor</a></li>
+ <li><a href="#" class="loader" data-timestamp="29:13">return false;</a></li>
+ <li><a href="#" class="loader" data-timestamp="34:28">Resig Dream cont...</a></li>
+ <li><a href="#" class="loader" data-timestamp="34:51">m$ helping jQ</a></li>
+ <li><a href="#" class="loader" data-timestamp="39:23">Quizzing John</a></li>
+ <li><a href="#" class="loader" data-timestamp="42:11">Best Practice for Loadin'</a></li>
+ <li><a href="#" class="loader" data-timestamp="45:36">Fin!</a></li>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <span class="episode_title" data-filename="yayquery_20">Episode 20 - One-Year Reun-oween</span>
+ <div class="segments">
+ <p>Segments</p>
+ <ul>
+ <li><a href="#" class="loader" data-timestamp="0:00">Gentlemen of yayQuery</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:12">The Intro Song</a></li>
+ <li><a href="#" class="loader" data-timestamp="2:11">Excuses!</a></li>
+ <li><a href="#" class="loader" data-timestamp="2:40">Plenty o'News</a></li>
+ <li><a href="#" class="loader" data-timestamp="5:12">PubSub</a></li>
+ <li><a href="#" class="loader" data-timestamp="6:12">Ben Alman, plugin master, is a peck... uh...</a></li>
+ <li><a href="#" class="loader" data-timestamp="7:04">Yahuda Katz Typing Techniques</a></li>
+ <li><a href="#" class="loader" data-timestamp="8:24">wijmo jQUery UI Widgets</a></li>
+ <li><a href="#" class="loader" data-timestamp="11:15">jQuery Mobile</a></li>
+ <li><a href="#" class="loader" data-timestamp="13:58">jQuery 1.4.3 &lt; rundown</a></li>
+ <li><a href="#" class="loader" data-timestamp="16:53">.data() or .dada()?</a></li>
+ <li><a href="#" class="loader" data-timestamp="20:14">jQuery bug tracker reenergized</a></li>
+ <li><a href="#" class="loader" data-timestamp="22:23">Hiddenhancements - return false shortcut</a></li>
+ <li><a href="#" class="loader" data-timestamp="23:33">#jquery temp01</a></li>
+ <li><a href="#" class="loader" data-timestamp="24:00">Ice Cube Refactoring</a></li>
+ <li><a href="#" class="loader" data-timestamp="26:30">Plugin of the week - templ &amp; datalinking</a></li>
+ <li><a href="#" class="loader" data-timestamp="26:30">Plugin of the week - templ &amp; datalinking</a></li>
+ <li><a href="#" class="loader" data-timestamp="31:12">ajpiano's 1st grade blog</a></li>
+ <li><a href="#" class="loader" data-timestamp="31:38">jQuery Team Members UNITE!</a></li>
+ <li><a href="#" class="loader" data-timestamp="34:12">yayQuery pillow talk - James Burke</a></li>
+ <li><a href="#" class="loader" data-timestamp="35:05">jsperf</a></li>
+ <li><a href="#" class="loader" data-timestamp="36:49">Top 10 jQuery Talks</a></li>
+ <li><a href="#" class="loader" data-timestamp="37:52">matchesselector()</a></li>
+ <li><a href="#" class="loader" data-timestamp="39:14">AreWeFastYet</a></li>
+ <li><a href="#" class="loader" data-timestamp="39:53">AreWeFirstYet - PromoteJS</a></li>
+ <li><a href="#" class="loader" data-timestamp="40:45">hasjs</a></li>
+ <li><a href="#" class="loader" data-timestamp="43:40">I'm sorry Mr. Eich</a></li>
+ <li><a href="#" class="loader" data-timestamp="45:11">Fin</a></li>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <span class="episode_title" data-filename="yayquery_21">Episode 21 - </span>
+ <div class="segments">
+ <p>Segments</p>
+ <ul>
+ <li><a href="#" class="loader" data-timestamp="0:27">Welcome</a></li>
+ <li><a href="#" class="loader" data-timestamp="0:52">jQuery 1.5 'n da werks</a></li>
+ <li><a href="#" class="loader" data-timestamp="1:41">jQuery 1.5 .ajax() rewrite details</a></li>
+ <li><a href="#" class="loader" data-timestamp="4:58">Julian Jaubourg answers the abort question</a></li>
+ <li><a href="#" class="loader" data-timestamp="7:23">Another question for Shoeleean - Sockets</a></li>
+ <li><a href="#" class="loader" data-timestamp="8:37">What did 1.5 make better?</a></li>
+ <li><a href="#" class="loader" data-timestamp="9:35">Die Fledermaus?</a></li>
+ <li><a href="#" class="loader" data-timestamp="11:11">Shit's broke dawg</a></li>
+ <li><a href="#" class="loader" data-timestamp="12:17">jQuery UI Tooltip coming</a></li>
+ <li><a href="#" class="loader" data-timestamp="13:10">Deferred - deferred.hawt(iPromise) in jQuery</a></li>
+ <li><a href="#" class="loader" data-timestamp="16:40">Alex needs Colin in a bad way</a></li>
+ <li><a href="#" class="loader" data-timestamp="17:47">How promise and defer are different...</a></li>
+ <li><a href="#" class="loader" data-timestamp="18:31">jQuery tmpl() not till later</a></li>
+ <li><a href="#" class="loader" data-timestamp="19:16">New functions $.sub()</a></li>
+ <li><a href="#" class="loader" data-timestamp="21:52">Buffer and Browser reflows</a></li>
+ <li><a href="#" class="loader" data-timestamp="24:15">How to check out the most recent jQuery</a></li>
+ <li><a href="#" class="loader" data-timestamp="25:15">jQuery Weekly Status Meeting</a></li>
+ <li><a href="#" class="loader" data-timestamp="25:45">Alex hates you</a></li>
+ <li><a href="#" class="loader" data-timestamp="26:18">Bay Conf</a></li>
+ <li><a href="#" class="loader" data-timestamp="27:10">Another, NEW compiler - Uglify JS</a></li>
+ <li><a href="#" class="loader" data-timestamp="28:48">UglifUI - UglifyJS in browser</a></li>
+ <li><a href="#" class="loader" data-timestamp="29:20">Modernizr w/ Uglify</a></li>
+ <li><a href="#" class="loader" data-timestamp="30:14">$alex.plugify(), plug away - YepNope</a></li>
+ <li><a href="#" class="loader" data-timestamp="31:10">Plugin of the Week - David Desandro's isotope</a></li>
+ <li><a href="#" class="loader" data-timestamp="32:52">Plugin of the Week Runnerup - jQuery Peelback Ad</a></li>
+ <li><a href="#" class="loader" data-timestamp="33:41">What's YepNope.js?</a></li>
+ <li><a href="#" class="loader" data-timestamp="34:02">ajpiano has leveled up</a></li>
+ <li><a href="#" class="loader" data-timestamp="35:00">jQuery UI ToolTip event delegation</a></li>
+ <li><a href="#" class="loader" data-timestamp="36:03">JavaScript Patterns, W3Fools.com, ECMA Script Harmony... OMG TOO MUCH</a></li>
+ <li><a href="#" class="loader" data-timestamp="37:07">JSLint Fork</a></li>
+ <li><a href="#" class="loader" data-timestamp="37:07">JSLint Fork... JustSayin Hint ;)</a></li>
+ <li><a href="#" class="loader" data-timestamp="37:50">TXJS June 11th 2011</a></li>
+ <li><a href="#" class="loader" data-timestamp="38:41">11 more things I learned from jQuery source by Douche</a></li>
+ <li><a href="#" class="loader" data-timestamp="40:00">Fin</a></li>
+ <li><a href="#" class="loader" data-timestamp="40:18">Dirty durty</a></li>
</ul>
</div>
</li>
View
31 js/mediaChapters.js
@@ -4,24 +4,27 @@
// create object to store variables
var mediaChapters = {
- audioElement: $('.audio'), // Default audio player that will load the audio file
- audioChapter: $('.loader'), // Default element that will have the data-timestamp for the chapter
- audioDirectory: 'mp3', // Directory where audio files live
- },
- bool = !!mediaChapters.audioElement.canPlayType;
+ audioElement: $('.audio'), // Default audio player that will load the audio file
+ audioChapter: $('.loader'), // Default element that will have the data-timestamp for the chapter
+ audioDirectory: 'mp3'// Directory where audio files live
+ },
+ bool = !!mediaChapters.audioElement.canPlayType,
+ _this = $(this),
+ extension;
// Modernizr's audio file compatibility check
// http://www.modernizr.com/
if (bool){
- bool = new Boolean(bool);
- bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"');
- bool.mp3 = elem.canPlayType('audio/mpeg;');
- }
+ bool = new Boolean(bool);
+ bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"');
+ bool.mp3 = elem.canPlayType('audio/mpeg;');
+ }
+ // set audio extension based on file type the browser can play
if(bool.mp3) {
- var extension = '.mp3';
+ extension = '.mp3';
} else {
- var extension = '.ogg';
+ extension = '.ogg';
}
if(options) {
@@ -29,7 +32,7 @@
}
// Click on the specified element to load .mp3 into audio tag
- $(this).live('click', function() {
+ _this.live('click', function() {
var episode = $(this).data('filename');
// Load the audio file for the selected episode
@@ -47,8 +50,8 @@
// Click on Segment, Set timestamp in audioplayer - autoplay
mediaChapters.audioChapter.live('click', function() {
var timestamp = $(this).data('timestamp').split(':'),
- minutes = parseInt(timestamp[0] * 60),
- seconds = parseInt(timestamp[1]);
+ minutes = parseInt(timestamp[0] * 60, 10),
+ seconds = parseInt(timestamp[1], 10);
// Give the audio player the timestamp of the segment
mediaChapters.audioElement.attr({
Please sign in to comment.
Something went wrong with that request. Please try again.