Javascript Split Screen View

Is it possible to make split screen view with javascript in order to view two parts of a website at the same time? I am looking forward to make something like Microsoft Word has wh

Solution 1:

I have found split.js

Split.js is a lightweight, unopinionated utility for creating adjustable split views or panes

HTML:

<div id="a" class="split split-horizontal">
  <div id="c" class="split content"></div>
  <div id="d" class="split content"></div>
</div>
<div id="b" class="split split-horizontal">
  <div id="e" class="split content"></div>
  <div id="f" class="split content"></div>
</div>

Javascript:

Split(['#a', '#b'], {
  gutterSize: 8,
  cursor: 'col-resize'
})
Split(['#c', '#d'], {
  direction: 'vertical',
  sizes: [25, 75],
  gutterSize: 8,
  cursor: 'row-resize'
})
Split(['#e', '#f'], {
  direction: 'vertical',
  sizes: [25, 75],
  gutterSize: 8,
  cursor: 'row-resize'
})

Demo

Solution 2:

You can use frameset tag.

<framesetcols="250px,*"><framesrc="/your/menu/bar"><framesetrows="50%,*"><framesrc="/your/splitted/content"><framesrc="/your/splitted/content"></frameset></frameset>

Each frame can be manipulated by JS

Solution 3:

I do not know for something that is ready directly for this, but i have an idea that may help you.

Use canvas and make screenshot of the document. Put the canvas on the one part of the screen and the actuall document on anoter. The moment the user clicks on the canvas, switch the places of the real item and the canvas. You can get away with this kind of cheat, sunce the focus can be only on one place at a time. Of course you need to reftresh the canvs oftern and you will need to play with the scroll position, but it can turn out nice.