MarkupMaster Website Home PageAdjust3

by greatCar

HTML

<div style = "position: absolute; top: 270px; left:5px; height:210px; width:575px; border: solid; border-width: 2px; border-color:black;" ></div>


<div style="font-family:arial; font-size: 24px; ">




<div id='segment0' style='position:absolute; xmargin-top:-1px; pointer-events:none; left:307px; top:388px;  height:3px; width:180px; background-color:red;' class='segment0'></div>
<div class='arrow-up' style='display:none; position:absolute; top:483.415px;  left:96px; '></div>

<div style='top: 253px; position:absolute;  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:absolute; top:261.415px;  left:96px; '></div>

<div id='segment2' style=' top: 253px; position:absolute; xmargin-top:-1px; 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 xo-insert-text-label data-insert-text-orientation='2' display-attach-point-y='252.48125000000002' display-attach-point-x='27.755102040816325' class='insertText' id='insertText'style='font-style: italic; font-weight: bold; padding-left: 2px; padding-right: 2px; white-space: nowrap; position:absolute; pointer-events:auto; border: solid; border-width: 1px; border-color:red; left:27.755102040816325px; transform-origin: 0% 0%; transform: rotate(270deg);'>MarkupMaster</label>

<span style = "display:none; color:black;position: absolute; margin-left: 100px; margin-top:238px">In this document, you may strikeout and enter replacement text.</span>

<span style = "position: absolute; margin-left: 100px; margin-top:338px">Need to change a few words<br/>
in a contract? Use a graphics editor to<br/>
strikeout and enter replacement text.


</span>
  </div>
  
    
  <span style="position:absolute: top:200px;...

CSS

.insertText {
  top: 153px;
}


.segment2 {
   left: 56px;
}
.segment1 {
   width: 14px;
}



.arrow-up {
    top: 253px;
}

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','')) - 14)+'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',''));
 
 
segment2.style.top = segment1.style.top;
segment2.style.width = (segment0left - 55) + 'px';


}

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