JSFiddle - React, Tailwind, and code Playground

Display Form

by Christopher O

HTML

<div id="pcontainer">
    <span id="status">&#160;</span>
</div>

<br />
<!-- https://github.com/szimek/signature_pad -->
<a href="http://szimek.github.io/signature_pad/">signature_pad demo</a>

CSS

body{
	background-color: #aaa;
  padding:8px;
}
#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: no-repeat;
	width: 700px;
	height:800px;
	border: 1px solid #999;
	margin: 0 auto;
	/*background: rgba(242,246,248,1);
background: -moz-linear-gradient(-45deg, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(242,246,248,1)), color-stop(50%, rgba(216,225,231,1)), color-stop(51%, rgba(181,198,208,1)), color-stop(100%, rgba(224,239,249,1)));
background: -webkit-linear-gradient(-45deg, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
background: -o-linear-gradient(-45deg, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
background: linear-gradient(135deg, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=1 );*/
}

.inuse { 
  background: rgba(0, 0, 0, 0.1) !important;
  border: none !important;
 }

.box{
	position: absolute;
	z-index: 5;
	/*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;
}

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)});

        }
    }
}

// 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 +'" class="box...