Diagonal line inside DRAG TESTING

by greatCar

HTML

<div id="backing" class="backing">


<div id="rectangle" class="rectangle">
    <div  id="diagonal"  class="diagonal"></div>
</div>
<div id="rectDraw" class="rectDraw">
    <div  id="diagonal"  class="diagonal"></div>
</div>


</div>

CSS

html, body {
  height: 100%;
}
.rectangle
{   
    width: 300px;
    height: 200px;
    background-color: yellow;
    
}

.rectDraw
{   

    background-color: yellow;
    
}
.backing
{   
    width:100%;
    height: 100%;
    background-color: lightgreen;
padding: 0;

margin: 0;
}
.diagonal
{

    height: 1px;
    background-color: black;
  transform-origin: 0% 0%;
            /* transform: rotate(45deg);*/
   /*  -ms-transform: rotate(45deg); /* IE 9 */
  /*   -webkit-transform: rotate(45deg); /* Safari and Chrome */

       
}

JavaScript

//http://jsfiddle.net/LWAKn/
var e =  document.getElementById('rectangle'); 
var line =  document.getElementById('diagonal'); 

//alert(e.id);


var w= e.offsetWidth;//width
var h = e.offsetHeight;//height
var diagonalWidth = function(w, h){
return Math.sqrt(Math.pow(h,2) + Math.pow(w,2))
}
//var angle = Math.asin(h/Math.sqrt(Math.pow(h,2) + Math.pow(w,2)))
var angle =  (180 / Math.PI) *  Math.asin(h/diagonalWidth(w, h));
line.style.width = diagonalWidth(w, h) + 'px';

//NG:
//$('line').css(newCss)
//$('#line').rotate({angle:20})
 
 //this works:
 //var rotateCSS = 'rotate(' + angle + 'deg)';
//     $('#diagonal').css({
  //    rotateCSS,
   //   '-webkit-transform': rotateCSS
   // });
    
 //OK with jquery:
$('#diagonal').css({'transform': 'rotate(' + angle + 'deg)'});


//window.onresize = function(){
e.onmousemove = function(){
e.style.width = "100px";

w= e.offsetWidth;//width
h = e.offsetHeight;//height
var diagW=diagonalWidth(w, h);

angle =  (180 / Math.PI) *  Math.asin(h/diagW);

line.style.width = diagW + 'px';

$('#diagonal').css({'transform': 'rotate(' + angle + 'deg)'});
}

//ok, but may need prefixes
//line.style.transform = 'rotate(' + angle + 'deg)';

backing.onmousedown = function(ev){
alert (ev.clientX);
}



backing.onmouseup = function(event){
alert (event.clientX);
}