HTML


<div id="x-y"></div>
<div id="crosshair-h"
	 class="hair">
</div>
<div id="crosshair-v"
	 class="hair">
</div>


CSS


/*
**
**
*/
* {
	overflow: hidden;
    cursor: crosshair;
}
body {
	height: 100vh;
	width: 100%;
	margin: 0;
}
body:before {
	content: 'Pos. X - Y';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #eee;
	font-size: 10vw;
}
#x-y {
	position: absolute;
	color: purple; /* Prince */
	margin: 5px;
}
#crosshair-h{
    width: 100%;
    height: 1px;
    margin-top: 0;
}
#crosshair-v{
    height: 100%;
    width: 1px;
    margin-left: 0;
}
.hair{    
    position: fixed;
    background-color: slategrey;
    box-shadow: 0 0 10px rgb(100,100,100);
}


JS


function getMouse(e) {
	
	var mouse =
	document.getElementById('x-y'),
			aXis = $('#x-y'),
			offset = $('html, #x-y').offset(),
   		relativeX = e.pageX - offset.left,
	 		relativeY = e.pageY - offset.top,
   		wide = $('html').width(),
	 		HD = $('html').height(),
   		percentX = (relativeX*100)/ wide + '%',
	 		percentY = (relativeY*100) / HD + '%';
	
	var a = relativeX *100 / wide;
	var b = relativeY *100 / HD;

	mouse.innerHTML = a.toPrecision(5) +'%' + '<br/>' + b.toPrecision(5) + '%';
	
	//mouse.innerHTML = percentX + '<br/>' + percentY;
	
	aXis.css('top',e.pageY);
  	aXis.css('left',e.pageX);
  
  	  if ( a > 95 ) {
			$('#x-y').css( 'margin-left', '-75px' );		
		} else if ( b > 90 ) {
			$('#x-y').css('margin-top', '-45px');
		} else {	  
	  $('#x-y').css('margin', '');
	}

	
}
window.onload = function() {
  this.addEventListener('mousemove', moveMouse);
}
var cH = $('#crosshair-h'),
    cV = $('#crosshair-v');
function moveMouse(e) {
    var get = getMouse(e),
				axis = document.getElementById("x-y");	
	//axis.innerHTML = get.percentX + get.percentY;
	
	cH.css('top',e.pageY);
  cV.css('left',e.pageX);
}


CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now