MarkupMaster Website Home PageAdjustRelative

by greatCar

HTML

<div style = "font-family:arial; font-size: 24px;  position: relative; height:210px; width:510px; border: solid; border-width: 2px; border-color:black;" >

 <div id='segment0' style='position:relative; pointer-events:none; left:278px; top:101px;  height:3px; width:182px; background-color:red;' class='segment0'></div>
<div class='arrow-up' style='display:none; position:absolute; top:483.415px;  left:96px; '></div>

<div style='position:relative;  pointer-events:none; left:295px;  height:2px;  background-color:red;  transform-origin: 0% 0%; transform: rotate(90deg)' id='segment1' class='segment1'></div>
<div class='arrow-up' style='display:none; position:relative; top:261.415px;  left:96px; '></div>

<div id='segment2' style=' position:relative; pointer-events:none; height:2px; width:266.266px; background-color:red;' class='segment2'></div>
<div class='arrow-up' style='display:none; position:absolute;   left:24.755102040816325px; '></div>

<label class='insertText rotateInsertText' id='insertText'style='font-style: italic; font-weight: bold; padding-left: 2px; padding-right: 6px; white-space: nowrap; position:absolute; pointer-events:auto; border: solid; border-width: 1px; border-color:red; left:27.755102040816325px; transform-origin: 0% 0%;'>MarkupMaster</label>

<p style = "position: relative; margin-left: 80px; margin-top:52px">Need to change a few words<br/>
in a contract? Use a graphics editor to<br/>
strikeout and enter replacement text.</p> 
  
</div>

<button onclick="test()" style="display:none; margin-left:250px;">
asdf
</button>

CSS

.insertText {
  margin-top: 18px;
}


.segment2 {
   left: 56px;
}

.segment1 {
   width: 14px;
}

.arrow-up {
    top: 253px;
}

.rotateInsertText {
  position: relative;
        transform: rotate(270deg);
        -ms-transform: rotate(270deg); /* IE 9 */
        -webkit-transform: rotate(270deg); /* Safari and Chrome */
}

JavaScript

function test() {

var insertText = document.getElementById('insertText');
var segment0 = document.getElementById('segment0');
var segment1 = document.getElementById('segment1');
var segment2 = document.getElementById('segment2');

    //alert("myclick");
   
 segment1.style.top=(Number(segment0.style.top.replace('px','')) - 15)+'px';
 
 //segment1.style.left=segment0.style.left;
 segment1.style.left=(Number(segment0.style.left.replace('px','')) + 1)+'px';
 
 
   insertText.style.top=(Number(segment1.style.top.replace('px','')) + 85)+'px';
  
  
 let segment0left = Number(segment0.style.left.replace('px',''));
 
 //alert(segment1.style.top);
segment2.style.top = segment1.style.top;

 segment2.style.top=(Number(segment1.style.top.replace('px','')) - 2)+'px';



segment2.style.width = (segment0left - 55) + 'px';


}

$(document).ready(function() {
test();
});