Dynamische Vollbild- und Minimaldivisionsfunktionen erstellen

Question

Der Bildschirm zeigt 3 dynamisch erstellte und geladene Divs an. Das Problem, das ich habe, ist die Größenänderung zu arbeiten, wenn ich versuche, die Divs im Vollbildmodus zu machen. (Klicken Sie auf den vorderen Knopf und den zweiten auf der Rückseite). Wenn Sie die Auswahloption oben verwenden, funktioniert die Größenänderung perfekt, aber der Vollbildmodus hat nicht den gleichen Effekt.

Das ist mein plunkr: http://plnkr.co/edit/qYxIRjs6KyNm2bsNtt1P

Dies ist meine aktuelle Formatfunktion:

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(); 
     }; 
    }); 
} 

Jede Hilfe auf alle anderen divs versteckt und macht sie später auch sehr geschätzt würde wieder auftauchen. Das hat ein paar Tage Arbeit gekostet und ich bin fast nirgendwo hingekommen, obwohl ich den Code mehrmals umgeschrieben habe.

Danke für die Hilfe.

Answer 1

Ist etwas falsch mit dem Javascript Vollbild 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> 

Nach Ihren Kommentaren suchen Sie etwas wie das?

<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>