Home » Html » How do I make a div full screen?

How do I make a div full screen?

Posted by: admin November 29, 2017 Leave a comment

Questions:

I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button. Currently, my div is as follows:

<div id="placeholder" style="width:800px;height:600px"></div>

Of course, the style attribute is only for testing. I will move this to CSS after during the actual design. Is there anyway I could make this div fullscreen and still preserve all event handling?

Answers:

When you say “full-screen”, do you mean like full-screen for the computer, or for taking up the entire space in the browser?

You can’t force the user into full-screen F11; however, you can make your div full screen by using the following CSS

div {width: 100%; height: 100%;}

This will of course assume your div is child of the <body> tag. Otherwise, you’d need to add the following in addition to the above code.

div {position: absolute; top: 0; left: 0;}

Questions:
Answers:

You can use HTML5 Fullscreen API for this (which is the most suitable way i think).

The fullscreen has to be triggered via a user event (click, keypress) otherwise it won’t work.

Here is a button which makes the div fullscreen on click. And in fullscreen mode, the button click will exit fullscreen mode.

$('#toggle_fullscreen').on('click', function(){
  // if already full screen; exit
  // else go fullscreen
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    element = $('#container').get(0);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
});
#container{
  border:1px solid red;
  border-radius: .5em;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p>
    <a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>
  </p>
  I will be fullscreen, yay!
</div>

Please also note that Fullscreen API for Chrome does not work in non-secure pages. See https://goo.gl/rStTGz for more details.

Another thing to note is the :fullscreen CSS selector. You can append this to any css selector so the that the rules will be applied when that element is fullscreen:

#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
    width: 100vw;
    height: 100vh;
    }

Questions:
Answers:

CSS way:

#foo {
    position:absolute;
    top:0; right:0;
    bottom:0; left:0;
}

JS way:

$(function() {

    function abso() {

        $('#foo').css({
            position: 'absolute',
            width: $(window).width(),
            height: $(window).height()
        });

    }

    $(window).resize(function() {
        abso();         
    });

    abso();

});

Questions:
Answers:

For fullscreen of browser rednering area there is a simple solution supported by all modern browsers.

div#placeholder {
    height: 100vh;
}

The only notable exception is the Android below 4.3 – but ofc only in the system browser/webview element (Chrome works ok).

Browser support chart: http://caniuse.com/viewport-units

For fullscreen of monitor please use HTML5 Fullscreen API

Questions:
Answers:
.widget-HomePageSlider .slider-loader-hide {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: white;
}

Questions:
Answers:

u can try this..

<div id="placeholder" style="width:auto;height:auto"></div>

width and height depends on your flot or graph..

hope u want this…

or

By clicking, u can use this by jquery

$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());

Questions:
Answers:

Use document height if you want to show it beyond the visible area of browser(scrollable area).

CSS Portion

#foo {
    position:absolute;
    top:0;
    left:0;
}

JQuery Portion

$(document).ready(
function() {
    $('#foo').css({
            width: $(document).width(),
            height: $(document).height()
        });
}
);

Questions:
Answers:

This is simplest one.

 #divid
    {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;

    }

Questions:
Answers:
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>