Commits

Anonymous committed 2efe227

added song count and place holder to the music search

  • Participants
  • Parent commits 6534aaf

Comments (0)

Files changed (1)

sfgeek/apps/s3songs/templates/s3songs/search.html

     <title>Search S3</title>
 
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
 </head>
 <body>
+<h1>Marc's Music Sharing Site</h1>
+<p>Your browser should give you the options to either download or play the music.</p>
+<p id='song-count'></p>
 <form  id="music-search-form">
-    <input id='music-query' name='music-query'></input>
+    <input id='music-query' name='music-query'  placeholder="Type an Artist, Album, or Song" size=30></input>
     <input type="submit"></input>
 </form>
 <div id='music-search-result-list'><ul></ul></div>
     $.get("/static/music.json", function( data ) {
       song_dict =  data ;
       console.log( "Load was performed." );
+      $('p#song-count').html(song_dict.length + ' songs available');
     });
     $("#music-search-form").submit(function(e)
     {
                 if (entry.key.toLowerCase().indexOf(query.toLowerCase()) != -1){
                     //console.log(entry.key + ' Matched');
                     //console.log(entry);
-                    $("#music-search-result-list ul").append('<li><a href="'+entry.value+'"><span class="tab">'+entry.key+'</span></a></li>');
+                    $("#music-search-result-list ul").append('<li><a target="_blank" href="'+entry.value+'"><span class="tab">'+entry.key+'</span></a></li>');
                 }
             });
         }
 
 
     });
+    /*
+    make placeholders work with older browsers
+     */
+    if(!Modernizr.input.placeholder){
+
+        $('[placeholder]').focus(function() {
+          var input = $(this);
+          if (input.val() == input.attr('placeholder')) {
+            input.val('');
+            input.removeClass('placeholder');
+          }
+        }).blur(function() {
+          var input = $(this);
+          if (input.val() == '' || input.val() == input.attr('placeholder')) {
+            input.addClass('placeholder');
+            input.val(input.attr('placeholder'));
+          }
+        }).blur();
+        $('[placeholder]').parents('form').submit(function() {
+          $(this).find('[placeholder]').each(function() {
+            var input = $(this);
+            if (input.val() == input.attr('placeholder')) {
+              input.val('');
+            }
+          })
+        });
+
+    }
 });
 </script>