add fallback in non-supporting browser

0067 · Apr 25, 2015 · 850d709 · 850d709
1 parent e7ab190
commit 850d709
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/index.html b/index.html
@@ -16,7 +16,6 @@ <h1>HTML5 Download Attribute</h1>
         <div class="site-content cf">
            <a class="btn btn-download" href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a>
         </div>
-
-        <script src="js/scripts.min.js"></script>
+        <script src="js/scripts.js"></script>
     </body>
 </html>
diff --git a/js/scripts.js b/js/scripts.js
@@ -1,6 +1,20 @@
 (function($) {
   'use strict';
 
-
+  if ( ! Modernizr.adownload ) {
+
+  	var $link = $('a');
+
+  	$link.each(function() {
+  		var $download = $(this).attr('download');
+
+  		if (typeof $download !== typeof undefined && $download !== false) {
+        var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');
+        $el.insertAfter($(this));
+			}
+
+  	});
+
+  }
 
 })(jQuery);
diff --git a/js/scripts.min.js b/js/scripts.min.js
diff --git a/less/style.less b/less/style.less
@@ -157,6 +157,11 @@ mark {
     background-color: lighten(#00539F, 5%);
   }
 }
+.download-instruction {
+  font-size: 12px;
+  margin-top: 20px;
+  color: darken(@body-bg, 30%);
+}
 
 
 @media screen and (min-width: 630px) {