MarkupMaster Website Home Page No JS for Adusted for SVG

by greatCar

HTML

<script src="ttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>





<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=' z-index: -100;position:relative; pointer-events:none; left:277px; top:100px;  height:3px; width:183px; background-color:black;' 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:279px;  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;  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: 4px; 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 {
  top: 190px;
}


.segment2 {
    top: 82px;
  width: 222px;
  left: 57px;
  }

.segment1 {
   width: 16px;
   top: 85px;
}


.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';
 
 console.log('seg0top: ' + segment0.style.top);
 console.log('seg1top: seg0top-15');
 
 
 //segment1.style.left=segment0.style.left;
 segment1.style.left=(Number(segment0.style.left.replace('px','')) + 1)+'px';
 
  console.log('seg0left: ' + segment0.style.left);
 console.log('seg1left: seg0left + 1');
   insertText.style.top=(Number(segment1.style.top.replace('px','')) + 85)+'px';
 console.log('insertTextTop: seg1top + 85');
  
  
 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';

 console.log('seg2top: seg1top - 2');

segment2.style.width = (segment0left - 55) + 'px';
 console.log('seg2width: seg0left - 55');

}

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