Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
.rectangle {
border: 1px solid #FF0000;
position: absolute;
}
-->
</style>
<script type="text/JavaScript">
var d;var posx;var posy;var initx=false;var inity=false; var initclickflag=true;
function getMouse(obj,e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//Moz:IE
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers
var target = (e && e.target) || (event && event.srcElement);
if(target.id=='Canvas'){
  if(initclickflag){
obj.onclick=function(){
initx=posx; inity=posy;
d = document.createElement('div');
d.className='rectangle'
d.style.left=initx+'px';d.style.top=inity+'px';
document.getElementsByTagName('body')[0].appendChild(d)
}
  }
obj.onmouseup=function(){initx=false;inity=false;}
if(initx){
d.style.width=Math.abs(posx-initx)+'px';d.style.height=Math.abs(posy-inity)+'px';
d.style.left=posx-initx<0?posx+'px':initx+'px';
d.style.top=posy-inity<0?posy+'px':inity+'px';
}
}
else{return false}
}
document.onmousemove=function(event){
getMouse(document,event);
}
</script>
</head>
<body>
<div id="Canvas" style="width:2000px; height:2000px; border: 10px solid transparent;"></div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers