Create dynamic full-screen and mini Div features

Question

The screen displays 3 dynamically created and loaded divs. The problem I am facing is that you are resizing when you try to make divs in full screen. (Press the button on the front panel and the second on the rear panel). When using the selection option from above, the size changes perfectly, but full-screen mode does not have the same effect.

This is my plunkr: http://plnkr.co/edit/qYxIRjs6KyNm2bsNtt1P

This is my current resize function:

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

Any help in hiding all other divs and their subsequent appearance would also be greatly appreciated. It took several days of work, and I got it almost nowhere, despite rewriting the code several times.

Thanks for the help.

Answer 1

Is there something wrong with 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> 

Following your comments, are you looking for something like this?

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