3

Any idea to make an element in the page full screen?

For example,a div or an img?

With "full screen" I mean that it should take all the space of user's screen,just like when we watch a video with the full screen model. I do not want the task bar/menu bar of the browser window display.

Any idea?

  div.fullscreen{
    display:block;

    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;

    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    background-color:red
  }

I have tried the above code,however it is not what I want,it juse take all the space of the browser's content area rather than the user's computer'screen.

hguser
  • 35,079
  • 54
  • 159
  • 293
  • Not possible. Only if the user puts the browser into fullscreen. – Felix Kling Mar 04 '11 at 14:13
  • possible duplicate of [How to make in Javascript full screen windows (stretching all over the screen)](http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen) – Rob Allen Mar 04 '11 at 14:13
  • It is not duplicate, here he is asking to full screen for just a small portion, like div. Not entire page – Sarin Jacob Sunny Dec 16 '11 at 07:20

4 Answers4

4

There is a relatively new fullscreen JavaScript api which can make an element full screen.

It has to be called as the result of user input to prevent possible abuse, but it's relatively straight-forward to use:

Code from MDN article: 
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}
Community
  • 1
  • 1
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
4

HTML elements can't break out of the bounds of the browser document window. The menu and tool bar are outside of the document window (which is a child of the browser window), so you can't "reach" them.

I think the only solution is to trigger full screen mode with JavaScript.

This answer shows how you can do that: How to make the window full screen with Javascript (stretching all over the screen)

Community
  • 1
  • 1
Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
  • 1
    Can a falsh can reach this? I mean put an flash in the page? Since in some video site like youtube,you have a choice :paly in full screen model. – hguser Mar 04 '11 at 14:19
  • And in fact,what I am trying to do can be found here:http://stackoverflow.com/questions/5192286/create-a-page-which-contain-a-flash-can-be-add-text-dynamiclly – hguser Mar 04 '11 at 14:20
  • 1
    Yes but that hides the browser window completely. You will need to do your displaying in flash, then (i.e. not in HTML). – Aaron Digulla Mar 04 '11 at 14:25
  • thanks,hiding the browser window completely isjust what I want.is there any live example? I have never did the flash dev – hguser Mar 04 '11 at 14:40
-2

This is not possible now, and it will probably never be.

Just imagine what would happen if every website you visit had free reign to take over your desktop.

Jon
  • 428,835
  • 81
  • 738
  • 806
  • every application you install has free reign to take over your desktop...why can't web applications be afforded the same luxury? – zzzzBov Jul 14 '13 at 23:33
  • @zzzzBov: Because in the first instance you have made an explicit decision to install the application (and most likely also granted it administrator privileges during installation), while in the second you 'd be open to drive-by attacks of all kinds. Obviously full screen browser window is an option, but even then you are not really taking up the whole screen -- just the part of it that is allocated to the browser. – Jon Jul 14 '13 at 23:41
  • you're not open to drive-by attacks if you restrict how developers are allowed to use the feature. – zzzzBov Jul 15 '13 at 00:00
  • Hi @Jon. Just imagine what would happen if what _you_ know of web design was The Immutable Law! Your "and it will probably never be" would have banished forever those 90% of CSS and JS that you neither knew in 2011, nor were apparently too eager to learn. Where there's an itch... welcom to 2023. – Ricardo Jun 05 '23 at 07:41
-2

In order to do this, you can use the screen.availWidth and screen.availHeight properties to get the screen size. Next, set the element size to their corresponding properties in js.

Paxon Kymissis
  • 68
  • 6
  • `screen.availWidth` and `availHeight` _does_ return available space on the user's screen/desktop, it's not suitable for use with setting web-page layouts and sizing because it's completely independent of the viewport size, and scripts cannot resize browser windows. – Dai Sep 23 '22 at 14:04
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 26 '22 at 08:25
  • Missing the point. Available width/height full screen makes not. – Ricardo Jun 05 '23 at 07:42