From 89cb3257d0b3c814355f52c48018ab1054f02392 Mon Sep 17 00:00:00 2001 From: gustavo hansen Date: Fri, 8 Mar 2013 12:23:37 -0300 Subject: [PATCH] added steps --- Images/letsCode.jpg | Bin 0 -> 7386 bytes Styles/Master.css | 4 ++ Views/LoggedIn.html | 73 ++++++++++++++++++++++++++++++++++++ Views/Tutorial.html | 88 ++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 157 insertions(+), 8 deletions(-) create mode 100644 Images/letsCode.jpg create mode 100644 Views/LoggedIn.html diff --git a/Images/letsCode.jpg b/Images/letsCode.jpg new file mode 100644 index 0000000000000000000000000000000000000000..14d33cead63568e3bca8c87eda9fed2cf6dc3b3f GIT binary patch literal 7386 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 V`F*J6+w>)*a*nF)3;v6V{{X!86R-dP literal 0 HcmV?d00001 diff --git a/Styles/Master.css b/Styles/Master.css index d4dee21..d6ad29f 100644 --- a/Styles/Master.css +++ b/Styles/Master.css @@ -57,6 +57,10 @@ a.gitHubIcon:hover { margin-top: 10px; } +li a:hover { + background: #f4907f; +} + footer { position: absolute; bottom: 0px; diff --git a/Views/LoggedIn.html b/Views/LoggedIn.html new file mode 100644 index 0000000..3bfebe0 --- /dev/null +++ b/Views/LoggedIn.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + diff --git a/Views/Tutorial.html b/Views/Tutorial.html index f54c963..f194ea1 100644 --- a/Views/Tutorial.html +++ b/Views/Tutorial.html @@ -44,12 +44,30 @@

-

- Code Time

- +

+ Let's Code!!!

+ #
+
+

+ Start:

+
    +
  • We need to create a html document with the default tags
    • +
+ 
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+<title></title>
+    </head>
+    <body></body>
+</html>
+
+
+

@@ -88,12 +106,16 @@

Step 3:

    -
    +
  • We need the jquery library.
    • +
+ 
+<script src="../Scripts/jquery-1.9.0.js" type="text/javascript">
+    </script>
+
  • We have to asociate the anchor click event with the audio element.
  • We have to add some javascript code.
  • When we click on an anchor link the song should be loaded.
    • -
  • We need the jquery library.
    • -
+
@@ -131,9 +153,59 @@

Step 4: Create the function play

myMusicPlayer[0].src = link.attr('href'); myMusicPlayer[0].load(); myMusicPlayer[0].play(); -} - +} +
+ +
+

Step 5:

+

    +
  • Now we have to add a function for reproduce the next song when the current finish.
    • +
  • For this, we will add a javascript eventlistener to the audio element when executes the 'ended' function.
    • +
  • We search the next item in the playlist, and then we call the play function.
    • +
+
+ +
+

Step 5: Adding EventListener

+ 
+var tracks = myPlayList.find('li a');
+var playListLength = tracks.length;
+myMusicPlayer[0].addEventListener('ended', function()
+{
+    var link; playListIndex++;
+    if (playListIndex >= playListLength){ playListIndex = 0;
+        link = myPlayList.find('a')[0]; }
+    else { link = myPlayList.find('a')[playListIndex];}
+    play($(link));});
+
+
+ + +
+

Step 6:Adding drag and drop

+

    +
  • We will add the ability to drag a song to the desktop.
    • +
  • For this we need to add the property draggable to the anchor element and add a class to identify them
    • +
+ 
$('a').addClass('dragout');
+$('a').attr('draggable', 'true');
+
  • Now we have to create a funtion in javascript to handler the events that the draggable property allows to do in the anchor element.
+ +
+

Step 6:Adding drag and drop

+ 
+(function() {
+    var files = document.querySelectorAll('a.dragout');
+    for (var i = 0, file; file = files[i]; ++i) {
+    file.addEventListener('dragstart', function(e) {
+    var strippedUrl = document.location.toString().split("Views");
+    var href = this.getAttribute('href');
+    var dataDownloadUrl = 'audio/mpeg:' + href.substring(9, href.length).replace(' ', '%20') + ':' + strippedUrl[0].toString() + href.substring(3, href.length).replace('\\','/').replace(' ', '%20');
+    e.dataTransfer.setData('DownloadURL', dataDownloadUrl);
+        }, false);}})();
+
+