dospaly a div element on an external monitor code example

Example: dospaly a div element on an external monitor

var drag = document.getElementById('drag');
drag.draggable = true;
drag.addEventListener('dragover', function(e){e.preventDefault();}, false);
drag.addEventListener('dragstart', function(e){e.dataTransfer.setData('text/plain', '');}, false);
drag.addEventListener('dragend', openClone, false);

function openClone(e){
    // create a clone of our div
    var elem = drag.cloneNode(true);
    // create a new script element that will contain the fullscreen code
    var script = document.createElement('script');
    script.innerHTML = 'document.onclick='+polyFullScreen.toString();
    elem.appendChild(script);
    // create a new blob from our div
    var blob = new Blob([elem.outerHTML], {
         type: "text/html"
        });   
    // make it into an objectUrl
    var url = window.URL.createObjectURL(blob);
    // open the popup
    var popup = window.open(url, "popup" ,'width="100%", height="100%"');
    }

var polyFullScreen = function(e){
    var elem = e.target;
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
};

Tags:

Misc Example