CODEWITHSUNDEEP
javascriptjqueryhtml
Dxx
Dxx

Reputation: 934

Make div 'fullscreen' onClick of a button?

I have a div that I want to go full-screen (100% width/height of Window size) onClick of a seperate button, image or link. How would I go about this using Javascript/jQuery?

Upvotes: 8

Views: 39829

Answers (7)

MaZzIMo24
MaZzIMo24

Reputation: 207

You can use the Following function to make any div Full Screen

    function goFullScreen(){

        var elem = document.getElementById(temp);

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

And to exit the Full Screen you can use the following function

       function exitFullScreen(){

            if(window.exitFullscreen){
                window.exitFullscreen();
            }
            else if(window.mozCancelFullScreen){
                window.mozCancelFullScreen();
            }
            else if(window.webkitExitFullscreen){
                window.webkitExitFullscreen();
            }
            else if(window.msExitFullscreen){
                window.msExitFullscreen();
            }
            
        }

The code works on any browser.

in exitFullscreen() {} document is not active and output an error, change it to window

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 220176

Other solutions describe hiding browser chrome with the HTML5 fullscreen API, well supported as of Oct'20.

This jQuery will expand an element to the viewport :

$('#theButton').click(function() {
    $('#theDiv').css({
        position: 'fixed',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        zIndex: 999
    });
});

Upvotes: 13

Ajinkya Bodade
Ajinkya Bodade

Reputation: 581

You can use the Following function to make any div Full Screen

    function goFullScreen(){

        var elem = document.getElementById(temp);

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

And to exit the Full Screen you can use the following function

       function exitFullScreen(){

            if(document.exitFullscreen){
                document.exitFullscreen();
            }
            else if(document.mozCancelFullScreen){
                document.mozCancelFullScreen();
            }
            else if(document.webkitExitFullscreen){
                document.webkitExitFullscreen();
            }
            else if(document.msExitFullscreen){
                document.msExitFullscreen();
            }

        }

The code works on any browser.

Upvotes: 11

GGJ
GGJ

Reputation: 644

You'll want a fixed position element at 100% width and height, if you don't have a background color or image you'll be able to click through it. Set z-index higher then all other elements to ensure it is at the front if you need that.

$('#id').css({
  position: 'fixed',
  top: 0,
  left: 0,
  width: 100%
  height: 100%,
  zIndex: 701
});

Upvotes: 0

shaunsantacruz
shaunsantacruz

Reputation: 8930

Here's a tweaked version of my answer from yesterday:

DEMO

$(':button').click(function() {
  $('div > div').css({
      position:'absolute', //or fixed depending on needs
      top: $(window).scrollTop(), // top pos based on scoll pos
      left: 0,
      height: '100%',
      width: '100%'
  });
});

Upvotes: 0

Jose De Gouveia
Jose De Gouveia

Reputation: 1042

you can use this functions to get the width and height

$(window).width();
$(window).height();

$(document).width();
$(document).height();

and then use it 

var w = $(document).width();
var h = $(document).height();
$("#theid").css('width',w);
$("#theid").css('height',h);

Upvotes: 0

kgr
kgr

Reputation: 9958

How about:

#HTML
<div id="some_id"></div>
<div id="button"></div>

#JS
$( '#button' ).click( function() {
    $( '#some_id' ).width( $( window ).width() );
    $( '#some_id' ).height( $( window ).height() );
});

Upvotes: 1

Related Questions