MarkupMaster Website Home PageAdjust

by greatCar

HTML

<div style="font-family:arial; font-size: 24px; border: solid; border-width: 1px; border-color:red; ">

<div id='segment0' id='39793aab-b3ba-e96e-3c0e-9e99879dd64a' style='position:absolute; xmargin-top:-1px; pointer-events:none; left:307px; top:390px;  height:3px; width:180px; background-color:red;' class='segment0 be36a317-68a9-7fa3-94f3-6b078539d749'></div>
<div class='arrow-up' style='display:none; position:absolute; top:483.415px;  left:96px; '></div>

<div style='top: 253px; position:absolute; xmargin-top:-1px; pointer-events:none; left:295px;  height:2px;  background-color:red;  transform-origin: 0% 0%; transform: rotate(90deg)' id='segment1' class='segment1 be36a317-68a9-7fa3-94f3-6b078539d749 connector1be36a317-68a9-7fa3-94f3-6b078539d749'></div>
<div class='arrow-up' style='display:none; position:absolute; top:261.415px;  left:96px; '></div>

<div id='segment2' style=' top: 253px; position:absolute; margin-top:-1px; pointer-events:none; Xleft:27.755102040816325px;  height:2px; width:266.266px; background-color:red;' class='segment2 be36a317-68a9-7fa3-94f3-6b078539d749 connector2be36a317-68a9-7fa3-94f3-6b078539d749'></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' segment-direction='2' class='insertText noSelect singleLineInput' id='insertText'
  xo-name='be36a317-68a9-7fa3-94f3-6b078539d749' 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 = "color:white;position: absolute; margin-left: 100px; margin-top:238px">In this document, you may strikeout and enter replacement text.</span>

<span...

CSS

.insertText {
  top: 153px;
}


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



.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','')) - 13)+'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 - 56) + 'px';


}