CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BourneShady
BourneShady

Reputation: 935

Revert back the size of div fullscreen

I currently have a button then when clicked, trigger the browser to go in fullscreen then it would make a certain div with an id fScreen get width:100% and height:100%.

When I click the Esc and F11 button, the browser gets back to normal size but the div fScreen is already occupying the whole space. In my case the orginal size of fScreen is 

width: 1100px;
height: 500px;

What I did so far was use a keydown function that reverts back the css of the fScreen back to the original size so far here is my code and it does not revert it back to its normal size.

function mkFull() //make fullscreen
{       
        //fScreen DIV
        var elem = document.getElementById("fScreen");

        if (elem.requestFullscreen) 
        {
          elem.requestFullscreen();
        } 
        else if (elem.msRequestFullscreen) 
        {
          elem.msRequestFullscreen();
        } 
        else if (elem.mozRequestFullScreen) 
        {
          elem.mozRequestFullScreen();
        } 
        else if (elem.webkitRequestFullscreen) 
        {
          elem.webkitRequestFullscreen();
        }

        $('#fScreen').css({'width' : '100%' , 'height' : '85%'});
        isfull = 1;

}

    $(document).keydown(function(e) //when pressed esc and f11 revert back to original size
    {
        if (e.keyCode == 122 || e.keyCode == 27) 
        {   
            if(isfull == 1)
            {
                $('#fScreen').css({'width' : '100px' , 'height' : '500px'});
                isfull = 0;
            }   
        } 
    });

Any ideas what I'm doing wrong?

Upvotes: 0

Views: 340

Answers (1)

Pimmol
Pimmol

Reputation: 1871

You could listen to the fullscreenchange event: https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange

In the handler, keep the state of the screen (isFull)

HTML

<button id="btn">Fullscreen</button>
<div id="fScreen">fscreen</div>

JS

    var elem = document.getElementById('fScreen');
    var isFull = false;

    function mkFull() {
        //fScreen DIV
        var elem = document.getElementById("fScreen");

        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        }
    }

    document.addEventListener('webkitfullscreenchange', function(e) {
        isFull = !isFull;

        if (isFull) {
            elem.style = 'width: 100%; height: 85%; background: green;';
        } else {
            elem.style = 'width: 100px; height: 500px; background: red;';
        }
    });

    document.getElementById('btn').addEventListener('click', mkFull);

Upvotes: 1

Related Questions