Creating Dynamic Fullscreen and Minimize Div Functions

Question

The screen displays 3 dynamically created and loaded divs. The problem I'm having is getting the resize to work when I try to make the divs go full screen. (Click the front button and the 2nd on the back). When using the select option on top, the resize works perfectly, but the fullscreen 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 on hiding all the other divs and making them reappear later would also be greatly appreciated. This has taken a few days of work and I have gotten almost nowhere despite rewriting the code several times.

Thanks for the help.

Answer 1

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