Created
January 2, 2015 10:37
-
-
Save hardikpandya/9d76128814547cc8f166 to your computer and use it in GitHub Desktop.
Interactive Download Button in jQuery // source http://jsbin.com/xowiha
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>Interactive Download Button in jQuery</title> | |
| <style id="jsbin-css"> | |
| .download-button { | |
| font-size: 85%; | |
| background-color: #4786f1; | |
| color: #fefefe; | |
| font-family: Helvetica, sans-serif; | |
| text-decoration: none; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| padding: 8px 10px; | |
| } | |
| .download-button:hover { | |
| background-color: #275AB0; | |
| color: #fefefe; | |
| text-decoration: none; | |
| } | |
| .button1 { | |
| margin-top: 150px; | |
| } | |
| .button2 { | |
| margin-top: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button1"> | |
| <center><a href="{{ site.url }}/downloads/twitterdarkmode.sketch" class = "download-button">Download Item 1</a></center></div> | |
| <div class="button2"><center><a href="{{ site.url }}/downloads/twitterdarkmodeprofile.sketch" class = "download-button">Download Item 2</a></center></div> | |
| <script id="jsbin-javascript"> | |
| var $button = $("a.download-button"); //finding the matching buttons on the DOM | |
| $button.on('click', function(){ // adding click event handler to the buttons | |
| var $clickedButton = $(this); // storing the current button so we can reference to it later in timeout fn | |
| var $href = $(this).attr("href"); | |
| $clickedButton.text("Downloading..."); | |
| $clickedButton.css("background-color", "#275AB0"); | |
| setTimeout(function(){ | |
| $clickedButton.removeAttr("href"); // remove href so further clicks don't trigger download | |
| }, 50); | |
| setTimeout(function(){ | |
| $clickedButton.text("Downloaded."); | |
| $clickedButton.css("background-color", "#aaa"); | |
| },1500); // this executes 1.5 seconds after click event | |
| $clickedButton.off(); // remove the event listener so further clicks aren't listened to | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>Interactive Download Button in jQuery</title> | |
| </head> | |
| <body> | |
| <div class="button1"> | |
| <center><a href="{{ site.url }}/downloads/twitterdarkmode.sketch" class = "download-button">Download Item 1</a></center></div> | |
| <div class="button2"><center><a href="{{ site.url }}/downloads/twitterdarkmodeprofile.sketch" class = "download-button">Download Item 2</a></center></div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">.download-button { | |
| font-size: 85%; | |
| background-color: #4786f1; | |
| color: #fefefe; | |
| font-family: Helvetica, sans-serif; | |
| text-decoration: none; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| padding: 8px 10px; | |
| } | |
| .download-button:hover { | |
| background-color: #275AB0; | |
| color: #fefefe; | |
| text-decoration: none; | |
| } | |
| .button1 { | |
| margin-top: 150px; | |
| } | |
| .button2 { | |
| margin-top: 30px; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| var $button = $("a.download-button"); //finding the matching buttons on the DOM | |
| $button.on('click', function(){ // adding click event handler to the buttons | |
| var $clickedButton = $(this); // storing the current button so we can reference to it later in timeout fn | |
| var $href = $(this).attr("href"); | |
| $clickedButton.text("Downloading..."); | |
| $clickedButton.css("background-color", "#275AB0"); | |
| setTimeout(function(){ | |
| $clickedButton.removeAttr("href"); // remove href so further clicks don't trigger download | |
| }, 50); | |
| setTimeout(function(){ | |
| $clickedButton.text("Downloaded."); | |
| $clickedButton.css("background-color", "#aaa"); | |
| },1500); // this executes 1.5 seconds after click event | |
| $clickedButton.off(); // remove the event listener so further clicks aren't listened to | |
| }); | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .download-button { | |
| font-size: 85%; | |
| background-color: #4786f1; | |
| color: #fefefe; | |
| font-family: Helvetica, sans-serif; | |
| text-decoration: none; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| padding: 8px 10px; | |
| } | |
| .download-button:hover { | |
| background-color: #275AB0; | |
| color: #fefefe; | |
| text-decoration: none; | |
| } | |
| .button1 { | |
| margin-top: 150px; | |
| } | |
| .button2 { | |
| margin-top: 30px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var $button = $("a.download-button"); //finding the matching buttons on the DOM | |
| $button.on('click', function(){ // adding click event handler to the buttons | |
| var $clickedButton = $(this); // storing the current button so we can reference to it later in timeout fn | |
| var $href = $(this).attr("href"); | |
| $clickedButton.text("Downloading..."); | |
| $clickedButton.css("background-color", "#275AB0"); | |
| setTimeout(function(){ | |
| $clickedButton.removeAttr("href"); // remove href so further clicks don't trigger download | |
| }, 50); | |
| setTimeout(function(){ | |
| $clickedButton.text("Downloaded."); | |
| $clickedButton.css("background-color", "#aaa"); | |
| },1500); // this executes 1.5 seconds after click event | |
| $clickedButton.off(); // remove the event listener so further clicks aren't listened to | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment