JSFiddle - React, Tailwind, and code Playground

by Emad Elpurgy

HTML

<input type="button" value="split2" id="splitBtn">
<input type="button" value="One View" id="onView">
<div id="contaner">
  <div id="content">
  </div>
  <div id="top_left"></div>
  <div id="top_right"></div>
  <div id="bottom_left"></div>
  <div id="bottom_right"></div>
</div>

CSS

#contaner
{
  position: relative;
}
#content
{
  width:350px;
  height:200px;
  overflow-x:scroll;
  border:1px solid black;
}
#top_left
{
  border:1px solid red;
  display:none;
  position: absolute;
}
#top_right
{
  border:1px solid blue;
  display:none;
  position: absolute;
}
#bottom_left
{
  border:1px solid green;
  display:none;
  position: absolute;
}
#bottom_right
{
  border:1px solid yellow;
  display:none;
  position: absolute;
}

JavaScript

function init(){
//generate data for testing
//creatre table
var table = document.createElement("TABLE");
//table header tr
var header = table.insertRow(0);
//header cells 
for(c = 0; c < 5; c++){
    var cell = header.insertCell(c);
    cell.innerHTML = "Header "+c;
    cell.style.backgroundColor = "#EAEAEA";
  }
//table data generate add 100 row after header
for(r = 1; r <= 100; r++){
    var row = table.insertRow(r);
    //15 cell for each row
    for(c = 0; c < 5; c++){
      var cell = row.insertCell(c);
      cell.innerHTML = '<input type="text" style="width:50px">';
    }
  }
  //delete content
  document.getElementById("content").innerHTML = "";
  // append testing table to content div 
  document.getElementById("content").appendChild(table);
  //set button on click
document.getElementById("splitBtn").onclick=splitView2;
document.getElementById("onView").onclick=oneView;
}

function splitView2(){
// this function split the view into 2 parts 
	//element - the div hold the data
  //part1 , part2 ,part3 and part4 is the divs will hold the splitted view
	var content = document.getElementById("content");
  var part1 = document.getElementById("top_left");
  var part2 = document.getElementById("top_right");
  var part3 = document.getElementById("bottom_left");
  var part4 = document.getElementById("bottom_right");
  //clone the content to be added view parts
  //the upper view
  var contentClone1 = content.cloneNode(true);
  contentClone1.id = "contentClone1";
  //keyup is function for representing cascade changes between views
  contentClone1.onkeyup = keyUp;
  //the lower view
  var contentClone2 = content.cloneNode(true);
  contentClone2.id = "contentClone2";
  contentClone2.onkeyup = keyUp;
  //set upper view dimensions and position 
  part1.style.width=content.offsetWidth + "px";
  part1.style.height=(content.offsetHeight/2) + "px";
  part1.style.top = "0px";
  part1.style.left = "0px";
  //i used ofer flow scroll to represent scrolling
 ...