Creazione di Dynamic Fullscreen e Minimize Div Funzioni

Question

La schermata visualizza 3 div in modo dinamico creati e caricati. Il problema che sto riscontrando sta nel far funzionare il ridimensionamento quando provo a far div andare a pieno schermo i div. (Fare clic sul pulsante anteriore e il 2 ° sul retro). Quando si utilizza l'opzione di selezione in alto, il ridimensionamento funziona perfettamente, ma lo schermo intero non ha lo stesso effetto.

Questo è il mio plunkr: http://plnkr.co/edit/qYxIRjs6KyNm2bsNtt1P

Questa è la mia attuale funzione di ridimensionamento:

for(i = 0; i<numOfDivs.length; i++){ 
    var flipTarget = document.getElementById(flipDiv[i]); 
    addResizeListener(flipTarget, function() { 
     for(j = 0; j<numOfDivs.length; j++){ 
      var style = window.getComputedStyle(flipTarget); 
      divWidth = parseInt(style.getPropertyValue('width'), 10); 
      divHeight = parseInt(style.getPropertyValue('height'), 10); 

      width = divWidth - margin.left - margin.right; 
      height = divHeight - margin.top - margin.bottom; 

      document.getElementById(frontDivNames[j]).innerHTML = '<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onclick="flipper(\''+flipperDivNames[j]+'\')">&#xf013;</span>'; 

      makeTestGraph(); 
      makeSliderGraph(); 
     }; 
    }); 
} 

Qualsiasi aiuto su come nascondere tutti gli altri div e facendoli riapparire più tardi sarebbe anche molto apprezzato. Ci sono voluti alcuni giorni di lavoro e non sono riuscito quasi a nulla nonostante abbia riscritto il codice più volte.

Grazie per l'aiuto.

Answer 1

C'è qualcosa che non va con il javascript fullscreen api ???

<script> 
var fullscreen; 

SetFullscreen = function DetectFullscreen(el){ 


    DesktopFullScreen = function ToggleFullScreen(el){ 

     function cancelFullScreen(el) { 
       if (window.document.exitFullscreen) { 
        window.document.exitFullscreen(); 
       } else if (window.document.webkitExitFullscreen) { 
        window.document.webkitExitFullscreen(); 
       } else if (window.document.mozCancelFullScreen) { 
        window.document.mozCancelFullScreen(); 
       } else if (window.document.msExitFullscreen) { 
        window.document.msExitFullscreen(); 
       } 
       return undefined; 
      } 

     function requestFullScreen(el) { 

       // Supports most browsers and their versions. 
       var requestMethod = document.getElementById(el).requestFullScreen || document.getElementById(el).webkitRequestFullScreen || document.getElementById(el).mozRequestFullScreen || document.getElementById(el).msRequestFullscreen; 

       if (requestMethod) { // Native full screen. 
        requestMethod.call(document.getElementById(el)); 
       } else if (typeof window.ActiveXObject !== "undefined") { // Older IE. 
        var wscript = new ActiveXObject("WScript.Shell"); 
        if (wscript !== null) { 
         wscript.SendKeys("{F11}"); 
        } 
       } 
       return true; 
      } 

     if (fullscreen){ 
      fullscreen = cancelFullScreen(el); 
     } 
     else{ 
      fullscreen = requestFullScreen(el); 
     } 
    } 

    MobileFullScreen = function ToggleFullScreen(el){ 

     function cancelFullScreen(el) { 
       document.getElementById("fullscreenstyle").innerHTML=""; 
       return undefined; 
      } 

     function requestFullScreen(el) { 

       document.getElementById("fullscreenstyle").innerHTML="#"+el+" {position:fixed;top:0px;left:0px;width:100%;height:100%;}"; 
       return true; 
      } 

     if (fullscreen){ 
      fullscreen = cancelFullScreen(el); 
     } 
     else{ 
      fullscreen = requestFullScreen(el); 
     } 
    } 

    if(navigator.userAgent.match(/mobile/i)){ 
     MobileFullScreen(el); 
    } 
    else{ 
     DesktopFullScreen(el); 
    } 
} 
</script> 
<style> 
div{background:white;} 
</style> 
<style id="fullscreenstyle"> 

</style> 

<div id="fullscreen" onclick="SetFullscreen(this.id)">hello</div> 

In seguito ai vostri commenti siete alla ricerca di qualcosa di simile?

<script> 


     function cancelFullScreen(el) { 
       document.getElementById("fullscreenstyle").innerHTML=""; 
       selectedElement = document.getElementById(el); 
       selectedElement.setAttribute("onclick","requestFullScreen(this.id)"); 
       document.body.innerHTML=bodysave; 
       return undefined; 
      } 

     function requestFullScreen(el) { 

       document.getElementById("fullscreenstyle").innerHTML="#"+el+" {background:pink;position:fixed;top:0px;left:0px;width:97%;height:97%;}"; 
       selectedElement = document.getElementById(el); 
           bodysave = document.body.innerHTML; 
       while (document.body.firstChild) { 
        document.body.removeChild(document.body.firstChild); 
       } 
       document.body.appendChild(selectedElement); 
       selectedElement.setAttribute("onclick","cancelFullScreen(this.id)"); 

       return true; 
     } 



</script> 
<style> 
div{background:white;} 
</style> 
<style id="fullscreenstyle"> 

</style> 

<div id="fullscreen" onclick="requestFullScreen(this.id)">hello</div> 
<div id="fullscreen2" onclick="requestFullScreen(this.id)">hello</div> 
<div id="fullscreen3" onclick="requestFullScreen(this.id)">hello</div>