JSFiddle - React, Tailwind, and code Playground

Display Form2

by Christopher O

HTML

<script src="https://szimek.github.io/signature_pad/js/signature_pad.js"></script>
<div id="pcontainer">
    <span id="status">&#160;</span><br />
    <span id="presig">&#160;</span>
</div>

<br />
<!-- https://github.com/szimek/signature_pad -->
<button id="buttonC" style="width:150px !important;">Ok2</button>

  <div id="signature-pad" class="m-signature-pad">
    <div class="m-signature-pad--body">
      <canvas></canvas>
    </div>
    <div class="m-signature-pad--footer">
      <div class="description" id="SigDesc">Sign above</div>
      <button type="button" class="button clear" id="SigClear">Clear</button>
      <button type="button" class="button save" id="SigSave">Save</button>
    </div>
  </div>

CSS

body{
	background-color: #aaa;
  padding:8px;
  
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#status {
	/*position: absolute;
	width: 400px;
	height: 20px;
	z-index: 200;
	left: 600px;
	top: 7px;
  */
  margin:5px;
}

#pcontainer{
	background-color: #FFF;
  background-image: url(http://g.foolcdn.com/editorial/images/170301/form_w-9_2005.png);
  background-repeat: repeat-y;
	width: 675px;
	height: 3526px;
	border: 1px solid #999;
	margin: 0 auto;
	
}

.inuse { 
  background: rgba(0, 0, 0, 0.1) !important;
  border: none !important;
 }
 
 .redfix{
   background-color:#f00;
   color:#fff;
 }

.box{
	position: absolute;
	z-index: 1;
	/*border: 2px solid #ccc;*/
  border: 1px solid rgba(0, 0, 0, 0.2);
  overflow:hidden;
  white-space:nowrap;
  display:block;
  font-family:"Courier New", Courier, monospace;
	font-size:14px;
	color:#00C;
  vertical-align:middle;
  background: rgba(0, 255, 0, 0.2);
}

.Clickinitial{
  cursor:default;
}

/* ----------- SIG ------------------- */

.m-signature-pad {
  position: absolute;
  font-size: 10px;
  width: 700px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -350px;
  margin-top: -200px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
  /*z-index: 2;
  display: none;*/
}


.m-signature-pad:before, .m-signature-pad:after {
	position: absolute;
  z-index: -1;
  content: "";
	width: 40%;
	height: 10px;
	left: 20px;
	bottom: 10px;
	background: transparent;
	-webkit-transform: skew(-3deg) rotate(-3deg);
	-moz-transform: skew(-3deg) rotate(-3deg);
	-ms-transform: skew(-3deg) rotate(-3deg);
	-o-transform: skew(-3deg) rotate(-3deg);
	transform: skew(-3deg) rotate(-3deg);
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.m-signature-pad:after {
	left: auto;
	right: 20px;
	-webkit-transform: skew(3deg) rotate(3deg);
	-moz-transform: skew(3deg) rotate(3deg);
	-ms-transform: skew(3deg)...

JavaScript

// update position in status (for testing)
$("#pcontainer").mousemove(function(e){
   var parentOffset = $(this).offset();  // $(this).parent().offset();
   var relX = e.pageX - Math.round(parentOffset.left);
   var relY = e.pageY - Math.round(parentOffset.top);
   $('#status').html('x:' + relX + ', y: '+ relY + ', Docx:' + e.pageX + ', Docy: '+ e.pageY);
});

// ------------------------------------------------------------------------------
var flds = {
	"bX0":{"x":75,"y":92,"w":150,"h":20,"n":"First", "d":"First Name", "t":"text"},
  "bX1":{"x":250,"y":92,"w":200,"h":20,"n":"Last", "d":"Last Name", "t":"text"},
  "bX2":{"x":75,"y":190,"w":250,"h":20,"n":"Phone", "d":"Phone Number", "ro":true, "v":"(813) 555-5555", "t":"text"},
  
  "bX3":{"x":400,"y":190,"w":30,"h":30,"n":"In", "d":"Click to initial", "t":"initial"},
  "bX4":{"x":400,"y":290,"w":30,"h":30,"n":"In", "d":"Click to initial", "t":"initial"},
  "bX5":{"x":400,"y":390,"w":30,"h":30,"n":"In", "d":"Click to initial", "t":"initial"},
};

var initials = 'xx'; // placeholder

// Resize: reposition all boxes
var EvLoaded = false; // was everything loaded already
var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    if(EvLoaded)
    	resizeId = setTimeout(doneResizing, 300);
});
 
 
function doneResizing(){
    pOffset = $("#pcontainer").offset(); // update offset
    //$("#pcontainer").append("<p>Resize</p>");
    for (var key in flds) {
       if (flds.hasOwnProperty(key)) {
           var obj = flds[key];

          $('#'+obj["n"]).css({top: (obj["y"] + pOffset.top), left: (obj["x"] + pOffset.left)});

        }
    }
    
    resizeCanvas();
}

// On load: Create boxes
var pOffset = $("#pcontainer").offset();
//$("#pcontainer").append("<p>pcontainer -> x: " + pOffset.left + ", y: " + pOffset.top + "</p>");

for (var key in flds) {
   if (flds.hasOwnProperty(key)) {
   		var OUTPUT = '';
       var obj = flds[key];
       if(obj["t"] == 'initial'){
				OUTPUT = '<div id="'+ key +'"...