Created
September 10, 2014 23:46
-
-
Save anonymous/18ca32739706dc9eefdf to your computer and use it in GitHub Desktop.
Revisions
-
Anonymous created this gist
Sep 10, 2014 .There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,157 @@ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <style id="jsbin-css"> .js-banner { padding: 40px; background: #a4b357; /* Old browsers */ background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a4b357), color-stop(100%, #75890c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a4b357 0%, #75890c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a4b357 0%, #75890c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a4b357 0%, #75890c 100%); /* IE10+ */ background: linear-gradient(to bottom, #a4b357 0%, #75890c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a4b357', endColorstr='#75890c', GradientType=0); /* IE6-9 */ cursor: pointer; } .js-banner a { font-weight: bold; font-family: arial; color: #333; text-decoration: none; } .js-banner a:hover { text-decoration: underline; } .js-banner a.action { background: #f9c667; /* Old browsers */ background: -moz-linear-gradient(top, #f9c667 0%, #f79621 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9c667), color-stop(100%, #f79621)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f9c667 0%, #f79621 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f9c667 0%, #f79621 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f9c667 0%, #f79621 100%); /* IE10+ */ background: linear-gradient(to bottom, #f9c667 0%, #f79621 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9c667', endColorstr='#f79621', GradientType=0); /* IE6-9 */ border-bottom: solid 4px #a60; padding: 10px 20px; } </style> </head> <body> <div class="js-banner"> <a href="http://www.google.com" class="action" target="_blank" data-some-tracking-code="1234">Act Now!</a> <a href="http://www.google.com" target="_blank" data-some-tracking-code="1234">Cancel</a> </div> <script id="jsbin-javascript"> $(document).ready(function(){ $('.js-banner').on('click', function(e){ if (e.target.className === 'js-banner') { $(this).find('a.action')[0].click(); } }); $('.js-banner').on('mouseover', function(e){ if (e.target.className === 'js-banner') { $(this).find('a.action').data('old-border', $(this).find('a.action').css('border')); $(this).find('a.action').css('border', 'solid 1px #fff'); } }); $('.js-banner').on('mouseout', function(e){ if (e.target.className === 'js-banner') { $(this).find('a.action').css('border', $(this).find('a.action').data('old-border')); } }); $('[data-some-tracking-code]').on('click', function(e){ var somedata = $(this).data('some-tracking-code'); alert('Tracking Code: ' + somedata); }); }); </script> <script id="jsbin-source-css" type="text/css">.js-banner { padding: 40px; background: #a4b357; /* Old browsers */ background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a4b357 0%,#75890c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a4b357 0%,#75890c 100%); /* IE10+ */ background: linear-gradient(to bottom, #a4b357 0%,#75890c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */ cursor: pointer; a { font-weight: bold; font-family: arial; color: #333; text-decoration: none; &:hover { text-decoration: underline; } } a.action { background: #f9c667; /* Old browsers */ background: -moz-linear-gradient(top, #f9c667 0%, #f79621 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9c667), color-stop(100%,#f79621)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f9c667 0%,#f79621 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f9c667 0%,#f79621 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f9c667 0%,#f79621 100%); /* IE10+ */ background: linear-gradient(to bottom, #f9c667 0%,#f79621 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=0 ); /* IE6-9 */ border-bottom: solid 4px #a60; padding: 10px 20px; } }</script> <script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){ $('.js-banner').on('click', function(e){ if (e.target.className === 'js-banner') { $(this).find('a.action')[0].click(); } }); $('.js-banner').on('mouseover', function(e){ if (e.target.className === 'js-banner') { $(this).find('a.action').data('old-border', $(this).find('a.action').css('border')); $(this).find('a.action').css('border', 'solid 1px #fff'); } }); $('.js-banner').on('mouseout', function(e){ if (e.target.className === 'js-banner') { $(this).find('a.action').css('border', $(this).find('a.action').data('old-border')); } }); $('[data-some-tracking-code]').on('click', function(e){ var somedata = $(this).data('some-tracking-code'); alert('Tracking Code: ' + somedata); }); });</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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,49 @@ .js-banner { padding: 40px; background: #a4b357; /* Old browsers */ background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a4b357), color-stop(100%, #75890c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a4b357 0%, #75890c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a4b357 0%, #75890c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a4b357 0%, #75890c 100%); /* IE10+ */ background: linear-gradient(to bottom, #a4b357 0%, #75890c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a4b357', endColorstr='#75890c', GradientType=0); /* IE6-9 */ cursor: pointer; } .js-banner a { font-weight: bold; font-family: arial; color: #333; text-decoration: none; } .js-banner a:hover { text-decoration: underline; } .js-banner a.action { background: #f9c667; /* Old browsers */ background: -moz-linear-gradient(top, #f9c667 0%, #f79621 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9c667), color-stop(100%, #f79621)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f9c667 0%, #f79621 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f9c667 0%, #f79621 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f9c667 0%, #f79621 100%); /* IE10+ */ background: linear-gradient(to bottom, #f9c667 0%, #f79621 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9c667', endColorstr='#f79621', GradientType=0); /* IE6-9 */ border-bottom: solid 4px #a60; padding: 10px 20px; } 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,25 @@ $(document).ready(function(){ $('.js-banner').on('click', function(e){ if (e.target.className === 'js-banner') { $(this).find('a.action')[0].click(); } }); $('.js-banner').on('mouseover', function(e){ if (e.target.className === 'js-banner') { $(this).find('a.action').data('old-border', $(this).find('a.action').css('border')); $(this).find('a.action').css('border', 'solid 1px #fff'); } }); $('.js-banner').on('mouseout', function(e){ if (e.target.className === 'js-banner') { $(this).find('a.action').css('border', $(this).find('a.action').data('old-border')); } }); $('[data-some-tracking-code]').on('click', function(e){ var somedata = $(this).data('some-tracking-code'); alert('Tracking Code: ' + somedata); }); });