Dinamik Tam Ekran Oluşturma ve Div İşlevlerini Küçültme

Question

Ekranda 3 dinamik olarak oluşturulmuş ve yüklenmiş div görüntülenir. Sorun şu ki, div'lar tam ekrana geçmeye çalışırken, yeniden boyutlandırmaya başlamak. (Ön düğmeyi ve arkadaki 2. simgesini tıklayın). Üstte seçim seçeneğini kullanırken, yeniden boyutlandırma mükemmel çalışır, ancak tam ekran aynı etkiye sahip değildir.

Bu

benim plunkr geçerli: http://plnkr.co/edit/qYxIRjs6KyNm2bsNtt1P

Bu benim şimdiki boyutlandırma fonksiyonudur:

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

diğer tüm divs gizleme ve onları daha sonra da büyük takdir yeniden yapmaya Herhangi bir yardım. Bu birkaç günlük çalışma sürdü ve birkaç kez kodu yeniden yazmasına rağmen neredeyse hiçbir yere ulaşamadım.

Yardımlarınız için teşekkürler.

Answer 1

Javascript tam ekranlı api ile ilgili bir sorun var mı ???

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

Yorumlarınızdan sonra, bunun gibi bir şey mi arıyorsunuz?

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