div to appear in full screen

Question

I am new to html. Can I make a particular div in my web-page appear in fullscreen when I press alt and space keys? This is my code.

<!DOCTYPE html>
<html>

    <body>
        <p>This is some text.</p>
        <div style="color:#0000FF">
            <img src="./1.jpg" height="42" width="42">
        </div>
    </body>

</html>

Alt+space is a popup window menu shortcut? what does that have to do with the size of a div? Do you want an option to view content in a new window? — MarsOne, Aug 28 '13 at 07:39
http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen — Parfait, Aug 28 '13 at 07:40
Maybe [this](http://css-tricks.com/open-a-window-with-full-size-unscaled-image/) is what you want — MarsOne, Aug 28 '13 at 07:44
@Ayyappan Sekar : I can have anything in
. When I press some combination of keys, the content in div should be displayed in full screen — Bittu, Aug 28 '13 at 07:50
You will need to use javascript to add a key press listener to your page and then resize the div if the right combination is pressed — Pete, Aug 28 '13 at 07:51

score -1 · Answer 1 · answered Aug 28 '13 at 07:59

-1

Use the full-screen pseudo class (for webkit and mozila) :

:-webkit-full-screen {
  /* css rules for full screen */
}
:-moz-full-screen {
  /* css rules for full screen */
}

See this Mozilla article and this David Walsh article for usage

answered Aug 28 '13 at 07:59

Danield

121,619
37
226
255

That will style the element when it is full screen, but the question is asking how to make it full screen. – Quentin Aug 28 '13 at 08:04
1

@Quentin That's why I included the links for usage. Also FYI the question isn't clealy asking how to trigger fullscreen... also notice also that there's no js tag - just css and html. – Danield Aug 28 '13 at 08:11
*Can I make a particular div in my web-page appear in fullscreen when I press alt and space keys?* — is very clearly asking how to trigger fullscreen. – Quentin Aug 28 '13 at 08:13
hmm ok fair enough, well the links I posted will steer him in the right direction. – Danield Aug 28 '13 at 08:17

Quentin · Accepted Answer · 2013-08-28T08:14:12.557

HTML and CSS provide no means to trigger full screen mode for an element. JavaScript is your only option.

HTML 5 introduces a full screen API for JavaScript. It is still experimental, so you need to use prefixed property names in some browsers and it won't work at all in others.

function makeFullScreen(element) {
    if (element.requestFullScreen) {
        element.requestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullScreen) {
        element.msRequestFullScreen();
    } 
}

You then just need to bind an event handler to call it.

document.addEventListener('keypress', function (evt) {
  if (evt.altKey && evt.keyCode === 32) {
     makeFullScreen(document.querySelector('div')); 
  }
});

Beware of depending on modifier keys though. On my system, alt + space is captured at the OS level (to open Spotlight) so it will never reach the browser.

when the div tag contained img tag, I could see fullscreen. When I had DOJO, fullscreen is not toggled — Bittu, Aug 28 '13 at 09:06
There's no obvious reason why using DOJO should break this. Maybe the key event is being captured by something else and never reaching the event handler. You'll have to debug it to find out where it is failing. — Quentin, Aug 28 '13 at 10:19

div to appear in full screen

2 Answers2