4

I have two screens say Screen 1 and Screen 2 and a HTML page with JavaScript/JQuery.
What I want to do is that split the HTML into two views. One on Screen 1 and the other on Screen 2.
Screen 1 has a simple view ( e.g a cinema screen for customers to view ) and Screen 2 has all the controls ( e.g visible to the person on the other end ). Any possible solution?

Anakooter
  • 327
  • 4
  • 17
  • Have you tried something already? – MaxZoom Sep 02 '15 at 14:33
  • I am unable to think of any solution except I create two different HTML pages to run on two screens and place a proxy server between them to communicate. – Anakooter Sep 02 '15 at 14:35
  • 1
    Why? The only possible solutions are 1) exiting fullscreen mode and streching your browser to almost your screen height and the width of both screens or 2) have one browser window on the right and one on the left screen, when you cant communicate between the two windows so you have to have two different sites. – Tom Doodler Sep 02 '15 at 14:35
  • You can experiment with the two [iframes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) on a single page. – MaxZoom Sep 02 '15 at 14:37

2 Answers2

1
  • Best solution would be to have 2 different pages, after all it's a system and not a page.
  • But, since you want a workaround, use Bootstrap (it's responsive, so should easily adapt to a 2 screen display).

add Bootstrap to HTML <head>:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

to HTML <body>:

<div class="wrapper-fluid">
  <div class="container-fluid">
    <div class="row">
      <div id="screen1" class="col-md-6">
        <!-- PAGE 1 HERE -->
      </div>
      <div id="screen2" class="col-md-6">
        <!-- PAGE 2 HERE -->
      </div>
    </div>
  </div>
</div>

and to CSS:

#screen1 {
  background-color: blue;
  height: 900px;
}
#screen2 {
  background-color: green;
  height: 900px;
}
warkentien2
  • 969
  • 13
  • 20
  • For this I have make my two screens act as one big screen. – Anakooter Sep 03 '15 at 14:15
  • oh, I misunderstood your question, you mean something more in the line of this? http://stackoverflow.com/questions/5277482/can-i-control-two-browser-windows-with-one-html5-app http://stackoverflow.com/questions/8211128/multiple-distinct-pages-in-one-html-file – warkentien2 Sep 03 '15 at 15:15
0

It's old school, but I did just recently did something like this using the "target" attribute inside the anchor tag. Open two browser windows, set the "display" one to full screen and the links on the first screen (the control screen) target the second browser window. For example:

<a target='songs' href='/freebird.html'>Freebird</a>

No programming needed.

theglossy1
  • 543
  • 3
  • 13
  • How will I transmit data between the two. Say in form of json? I need bidirectional control. Taking the above example in consideration if a customer chooses a seat on Screen 1 I need to update the DOM of Screen 2. And similarly if the counter guy makes some changes on Screen 2 and I want to update Screen 1. – Anakooter Sep 02 '15 at 15:03