Click Detection

Detect clicks within an element and place a dot there. Could be used for lots o stuff.

by Victor

HTML

<div class="stage">
    
</div>
<div class="log"></div>

CSS

.drop {
height:10px;
width:10px;
background: #333;
    border-radius:5px;
    position:absolute;
}
.stage {
    width:100%;
    height:100%;
    background: #e3e3e3;
    display:block;
    position:absolute;
}
.log {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
}

JavaScript

$('.stage').click(function (e) { //Default mouse Position 
  //      alert(e.pageX + ' , ' + e.pageY);
     var parentOffset = $(this).parent().offset(); 
    var clickHorz = e.pageX - parentOffset.left - 5;
      var clickVert = e.pageY - parentOffset.top - 5;
    $(this).append('<div class="drop justAdded"></div>');
    $('.justAdded').css({"left": clickHorz + "px", "top": clickVert +"px" }).removeClass('justAdded');
    
$('.log').append(clickHorz +" "+ clickVert +", " +);    
});