Getting Viewport/Window Block Coordinates and Size/Height/Width

Click and get the block full size height/width, window height/width and click position coordinates.

by Aqeel Malik

HTML

<!--
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
-->
<div class="block"></div>
<p class="window"></p>
<p class="coordinates"></p>
<p class="block-position"></p>

CSS

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
* {margin: 5px;padding:5px;}
.block {
    width: 200px; 
    height: 200px;
    border: 1px solid #666;
}

JavaScript

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
$(".block").click(function(e) {

  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
	
  $('.window').html('window size : ' + $(window).height());
  $('.coordinates').html('coordinates : ' + 'X: ' + relativeX + '  Y: ' + relativeY);
  
	if(($(this).height()/2) < relativeY){
  	$('.block-position').html('block-position : greater than {total-height/2}');
  } else { $('.block-position').html('block-position : less than {total-height/2}'); }
  
});