Show content only after the sound is loaded

dorukeker · Dec 15, 2015 · 15e06a9 · 15e06a9
1 parent ce42a04
commit 15e06a9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     <script type="text/javascript" src="forcetouch.js"></script>
   </head>
   <body>
-    <div class="container">
+    <div class="container hidden">
       <div class="col-xs-4">
         <span id="label1" class="current">0.00</span>
       </div>

diff --git a/prank.js b/prank.js
@@ -1,5 +1,9 @@
 var sound = new Howl({
-  urls: ['crack.mp3']
+  urls: ['crack.mp3'],
+  onload: function(){
+    // makes sure the sound is loaded. then shows the html content
+    $('.container').removeClass('hidden');
+  }
 });
 
 

diff --git a/style.css b/style.css
@@ -43,3 +43,7 @@ span.done{
   height: 100%;
   display: none;
 }
+
+.hidden{
+  display: none;
+}