Skip to content

Commit 8eaa924

Browse files
author
Adrian
committed
Merge branch 'master' of https://github.com/greathansen/Summit 
2 parents 6c9ee88 + 89cb325 commit 8eaa924

File tree

6 files changed

+309
-13
lines changed

6 files changed

+309
-13
lines changed

‎Images/letsCode.jpg

7.21 KB
Loading

‎Scripts/MusicPlayer.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var myPlayerMusic = $('#myPlayerMusic');
1+
var myMusicPlayer = $('#myMusicPlayer');
22
var myPlayList = $('#myPlayList');
33
var tracks = myPlayList.find('li a');
44
var playListIndex = 0;
@@ -15,7 +15,7 @@ myPlayList.find('a').click(function(e)
1515
play(link);
1616
});
1717

18-
myPlayerMusic[0].addEventListener('ended', function()
18+
myMusicPlayer[0].addEventListener('ended', function()
1919
{
2020
var link;
2121
playListIndex++;
@@ -53,10 +53,10 @@ myPlayerMusic[0].addEventListener('ended', function()
5353
function play(link)
5454
{
5555
changeImage();
56-
myPlayerMusic[0].src = link.attr('href');
56+
myMusicPlayer[0].src = link.attr('href');
5757
link.parent().addClass('selected').siblings().removeClass('selected');
58-
myPlayerMusic[0].load();
59-
myPlayerMusic[0].play();
58+
myMusicPlayer[0].load();
59+
myMusicPlayer[0].play();
6060
}
6161

6262
function changeImage()

‎Styles/Master.css

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,20 @@ a {
4747

4848
.gitHubIcon {
4949
position: absolute;
50-
top: 25%;
51-
left: 5%;
52-
height: 70px;
50+
top: 5%;
51+
right: 5%;
52+
height: 72px;
5353
width: 70px;
5454
}
5555

5656
a.gitHubIcon:hover {
5757
margin-top: 10px;
5858
}
5959

60+
li a:hover {
61+
background: #f4907f;
62+
}
63+
6064
footer {
6165
position: absolute;
6266
bottom: 0px;

‎Views/LiveDemo.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
</head>
4747

4848
<body>
49-
<div style="position: absolute; top: 20px; left: 280px;">
49+
<div>
5050
<table>
5151
<tr>
5252
<td>
@@ -74,24 +74,23 @@
7474
</ul>
7575
</td>
7676
<td>
77-
<div style="position: absolute; left:250px; top:10px; height: 120px;">
77+
<div style="position: absolute; left:250px; top:20px; height: 120px;">
7878
<img id="image" src="..\Images\1.jpg" alt="..\Images\html5OrangeLogo.jpg" style="height: 120px;" />
7979
</div>
8080
</td>
8181
</tr>
8282
<tr>
8383
<td>
84-
<audio id="myPlayerMusic" preload="auto" tabindex="0" controls="">
84+
<audio id="myMusicPlayer" preload="auto" tabindex="0" controls="">
8585
<source src="..\Music\Fixed Frequencies.mp3" type="audio/mpeg" />
8686
</audio>
8787
<td>
8888
</tr>
8989
</table>
9090
</div>
91-
91+
<iframe src="../Views/Tutorial.html" style="height:63%; width:99%;"></iframe>
9292
<script src="../Scripts/jquery-1.9.0.js" type="text/javascript"></script>
9393
<script src="../Scripts/MusicPlayer.js" type="text/javascript"></script>
94-
9594
<script>
9695
$(document).ready(function ()
9796
{

‎Views/LoggedIn.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title></title>
6+
</head>
7+
<body>
8+
<audio id="myMusicPlayer" preload="auto" tabindex="0" controls="">
9+
<source src="..\Music\Fixed Frequencies.mp3" type="audio/mpeg" />
10+
11+
</audio>
12+
13+
<ul id="myPlayList">
14+
<li>
15+
<a href="..\Music\Fixed Frequencies.mp3">Fixed Frequencies</a>
16+
</li>
17+
18+
<li>
19+
<a href="..\Music\The Mercenary.mp3">The Mercenary</a>
20+
</li>
21+
</ul>
22+
<script src="../Scripts/jquery-1.9.0.js" type="text/javascript"></script>
23+
<script>
24+
25+
var myPlayList = $('#myPlayList');
26+
var playListIndex = 0;
27+
myPlayList.find('a').click(function(e)
28+
{
29+
e.preventDefault();
30+
var link = $(this);
31+
playListIndex = link.parent().index();
32+
play(link); // we have to create the function play.
33+
});
34+
35+
var myMusicPlayer = $('#myMusicPlayer');
36+
function play(link)
37+
{
38+
myMusicPlayer[0].src = link.attr('href');
39+
myMusicPlayer[0].load();
40+
myMusicPlayer[0].play();
41+
}
42+
43+
var tracks = myPlayList.find('li a');
44+
var playListLength = tracks.length;
45+
myMusicPlayer[0].addEventListener('ended', function()
46+
{
47+
var link; playListIndex++;
48+
if (playListIndex >= playListLength){ playListIndex = 0;
49+
link = myPlayList.find('a')[0]; }
50+
else { link = myPlayList.find('a')[playListIndex];}
51+
play($(link));});
52+
53+
$('a').addClass('dragout');
54+
$('a').attr('draggable', 'true');
55+
56+
(function() {
57+
var files = document.querySelectorAll('a.dragout');
58+
59+
for (var i = 0, file; file = files[i]; ++i) {
60+
61+
file.addEventListener('dragstart', function(e) {
62+
63+
var strippedUrl = document.location.toString().split("Views");
64+
var href = this.getAttribute('href');
65+
66+
var dataDownloadUrl = 'audio/mpeg:' + href.substring(9, href.length).replace(' ', '%20') + ':' + strippedUrl[0].toString() + href.substring(3, href.length).replace('\\','/').replace(' ', '%20');
67+
e.dataTransfer.setData('DownloadURL', dataDownloadUrl);
68+
}, false);
69+
}
70+
})();
71+
</script>
72+
</body>
73+
</html>

‎Views/Tutorial.html

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8" />
4+
<link href="../Styles/prettify.css" rel="stylesheet" type="text/css" />
5+
<link href="../Styles/desert.css" rel="stylesheet" type="text/css">
6+
<link href="../Styles/styles.css" rel="stylesheet" type="text/css" />
7+
<style type="text/css">
8+
.centerTitle
9+
{
10+
margin-left: auto;
11+
margin-right: auto;
12+
width: 90%;
13+
background-color: #b0e0e6;
14+
text-align: center;
15+
height: 50px;
16+
font-size: xx-large;
17+
}
18+
.centerImage
19+
{
20+
margin-left: auto;
21+
margin-right: auto;
22+
width: 100%;
23+
margin-top: 25px;
24+
}
25+
</style>
26+
</head>
27+
<body onload="prettyPrint()">
28+
<header>
29+
<h1>
30+
Live Demo Steps
31+
</h1>
32+
<nav>
33+
<ul>
34+
<li>
35+
<button id="prev-btn" title="Previous slide">
36+
Previous Slide</button></li>
37+
<li><span id="slide-number"></span>/<span id="slide-total"></span></li>
38+
<li>
39+
<button id="next-btn" title="Next Slide">
40+
Next Slide</button></li>
41+
</ul>
42+
</nav>
43+
</header>
44+
<div id="deck">
45+
<!-- Begin slides -->
46+
<section>
47+
<center> <h1>
48+
Let's Code!!!</h1></center>
49+
<img src="../Images/letsCode.jpg" alt="#">
50+
51+
</section>
52+
53+
<section>
54+
<h2>
55+
Start:</h2>
56+
<ul>
57+
<li>We need to create a html document with the default tags</li>
58+
</ul>
59+
<pre class="prettyprint">
60+
<span class="tag">&lt;!DOCTYPE html></span>
61+
<span class="tag">&lt;html lang="en"></span>
62+
<span class="tag">&lt;head></span>
63+
<span class="tag">&lt;meta charset="utf-8" /></span>
64+
<span class="tag">&lt;title><span class="tag">&lt;/title></span></span>
65+
<span class="tag">&lt;/head></span>
66+
<span class="tag">&lt;body></span><span class="tag">&lt;/body></span>
67+
<span class="tag">&lt;/html></span>
68+
</pre>
69+
</section>
70+
71+
72+
<section>
73+
<h2>
74+
Step 1:</h2>
75+
<ul>
76+
<li>Add the HTML element audio.</li>
77+
<li>We add the source that has the song path.</li>
78+
</ul>
79+
80+
<pre class="prettyprint">
81+
<span class="tag">&lt;audio</span> id="myMusicPlayer" preload="auto" tabindex="0" controls="">
82+
<span class="tag">&lt;source</span> src="..\Music\Fixed Frequencies.mp3"
83+
type="audio/mpeg" />
84+
<span class="tag">&lt;/audio</span>>
85+
</pre>
86+
</section>
87+
88+
<section>
89+
<h2>
90+
Step 2:</h2>
91+
<ul>
92+
<li>Create the list with the songs.</li>
93+
<li>For this we add a unordered list and inside an anchor element with the song path.</li>
94+
</ul>
95+
<pre class="prettyprint">
96+
<span class="tag">&lt;ul id="myPlayList"></span>
97+
<span class="tag">&lt;li></span>
98+
<span class="tag">&lt;a href="..\Music\Fixed Frequencies.mp3">Fixed Frequencies<span class="tag">&lt;/a></span></span>
99+
<span class="tag">&lt;/li></span>
100+
...
101+
<span class="tag">&lt;/ul></span>
102+
</pre>
103+
</section>
104+
105+
<section>
106+
<h2>
107+
Step 3:</h2>
108+
<ul>
109+
<li>We need the jquery library.</li>
110+
</ul>
111+
<pre class="prettyprint">
112+
<span class="tag">&lt;script src="../Scripts/jquery-1.9.0.js" type="text/javascript">
113+
<span class="tag">&lt;/script></span></span></pre>
114+
<ul>
115+
<li>We have to asociate the anchor click event with the audio element.</li>
116+
<li>We have to add some javascript code.<br></li>
117+
<li>When we click on an anchor link the song should be loaded.</li>
118+
</ul>
119+
</section>
120+
121+
<section>
122+
<h2>Step 3:</h2>
123+
<pre class="prettyprint">
124+
var myPlayList = $('#myPlayList');
125+
var playListIndex = 0;
126+
myPlayList.find('a').click(function(e)
127+
{
128+
e.preventDefault();
129+
var link = $(this);
130+
playListIndex = link.parent().index();
131+
play(link); // we have to create the function play.
132+
});
133+
</pre>
134+
</section>
135+
136+
<section>
137+
<h2>Step 4:</h2>
138+
<ul>
139+
</br>
140+
<li>We will create the function play.</li>
141+
<li>The function play first assign the source of the audio element with the value of the link(in this case is the song path)<br></li>
142+
<li>Then it's loading the song in the audio element</li>
143+
<li>Finally,it executes the play function for starting reproduce the song.</li>
144+
</ul>
145+
</section>
146+
<section>
147+
<h2>Step 4: Create the function play</h2>
148+
</br>
149+
<pre class="prettyprint">
150+
var myMusicPlayer = $('#myMusicPlayer');
151+
function play(link)
152+
{
153+
myMusicPlayer[0].src = link.attr('href');
154+
myMusicPlayer[0].load();
155+
myMusicPlayer[0].play();
156+
} </pre>
157+
</section>
158+
159+
<section>
160+
<h2>Step 5:</h2>
161+
<ul></br>
162+
<li>Now we have to add a function for reproduce the next song when the current finish.</li>
163+
<li>For this, we will add a javascript eventlistener to the audio element when executes the 'ended' function. </li>
164+
<li>We search the next item in the playlist, and then we call the play function.</li>
165+
</ul>
166+
</section>
167+
168+
<section>
169+
<h2>Step 5: Adding EventListener</h2>
170+
<pre class="prettyprint">
171+
var tracks = myPlayList.find('li a');
172+
var playListLength = tracks.length;
173+
myMusicPlayer[0].addEventListener('ended', function()
174+
{
175+
var link; playListIndex++;
176+
if (playListIndex >= playListLength){ playListIndex = 0;
177+
link = myPlayList.find('a')[0]; }
178+
else { link = myPlayList.find('a')[playListIndex];}
179+
play($(link));});
180+
</pre>
181+
</section>
182+
183+
184+
<section>
185+
<h2>Step 6:Adding drag and drop</h2>
186+
<ul></br>
187+
<li>We will add the ability to drag a song to the desktop. </li>
188+
<li>For this we need to add the property draggable to the anchor element and add a class to identify them </li>
189+
</ul>
190+
<pre class="prettyprint">$('a').addClass('dragout');
191+
$('a').attr('draggable', 'true'); </pre>
192+
<ul><li>Now we have to create a funtion in javascript to handler the events that the draggable property allows to do in the anchor element. </li></ul>
193+
</section>
194+
195+
<section>
196+
<h2>Step 6:Adding drag and drop</h2>
197+
<pre class="prettyprint">
198+
(function() {
199+
var files = document.querySelectorAll('a.dragout');
200+
for (var i = 0, file; file = files[i]; ++i) {
201+
file.addEventListener('dragstart', function(e) {
202+
var strippedUrl = document.location.toString().split("Views");
203+
var href = this.getAttribute('href');
204+
var dataDownloadUrl = 'audio/mpeg:' + href.substring(9, href.length).replace(' ', '%20') + ':' + strippedUrl[0].toString() + href.substring(3, href.length).replace('\\','/').replace(' ', '%20');
205+
e.dataTransfer.setData('DownloadURL', dataDownloadUrl);
206+
}, false);}})();
207+
</pre>
208+
</section>
209+
</div>
210+
<script type="text/javascript" src="../Scripts/jquery-1.9.0.js"></script>
211+
<script type="text/javascript" src="../Scripts/prettify.js"></script>
212+
<script type="text/javascript" src="../Scripts/htmlSlides.js"></script>
213+
<script type="text/javascript" src="../Scripts/jquery.jswipe-0.1.2.js"></script>
214+
<script type="text/javascript">
215+
$(function () {
216+
htmlSlides.init();
217+
});
218+
</script>
219+
</body>
220+
</html>

0 commit comments

Comments
 (0)