Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 10, 2014 23:46
Show Gist options
  • Save anonymous/18ca32739706dc9eefdf to your computer and use it in GitHub Desktop.
Save anonymous/18ca32739706dc9eefdf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
Raw
jsbin.qiqopaqefaza.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;
}
Raw
jsbin.qiqopaqefaza.js
$(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);
});
});
@colynb
Copy link

colynb commented Sep 10, 2014

Banner clicker

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment