<html>
<body>
<div id="container">
<div class="random-content">This div is only to add a bit of randomness in the page. The size of the padding is determined randomly to make things more interesting.</div>
<div>This <span id="keyword">word</span> is important in the sentece.</div>
<div class="random-content">A bit more random stuff.</div>
</div>
<input id="broken" type="button" value="Broken button">
<input id="working" type="button" value="Working button">
<div id="pointer">
<span class="glyphicon glyphicon-hand-left" aria-hidden="true"></span>
</div>
</body>
</html>
$(document).ready(function() {
var rand = Math.floor(Math.random() * 30);
$(".random-content").css({"padding": rand});
$('#broken').click(function() {
if(onScreen()) return;
var pos = getPosition();
$('#pointer').offset(pos);
$('#pointer').show();
doAnimation();
});
$('#working').click(function() {
if(onScreen()) return;
var pos = getPosition();
$('#pointer').show();
$('#pointer').offset(pos);
doAnimation();
});
});
/**
* Function which ensures that the animation is
* not attempted again if it is already running
*/
function onScreen() {
if ($("#pointer").css('display') !== 'none') {
return true;
} else {
return false;
}
}
/**
* Get the position of the #keyword
*/
function getPosition() {
var pos = $('#keyword').offset();
pos.left = pos.left + 104 + $('#keyword').width();
pos.top = pos.top - 5;
return pos;
}
/**
* A bit of animation
*/
function doAnimation() {
$('#pointer').animate({
left: '-=100px'
}, "slow", function() {
$('#pointer').fadeOut("slow");
});
}
