Reputation: 11

Display full screen with css possible?

I want to know is it possible to cover the full screen mode as I see when I use F11 key.In many flash webpages this mode of covering full screen display is present.If it is possible to code this in css .pl advise the code. thanks e.g http://www.flashmo.com/store/view-template-3057.html

Upvotes: 1

Answers (5)

toksaitov

Reputation: 169

Firefox 10 Aurora has support for Full Screen API. http://blog.pearce.org.nz/2011_11_01_archive.html

And WebKit has it too. http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients

It’s not universal now.

Upvotes: 2

Smamatti

Reputation: 3931

You can't really toggle fullscreen with CSS as far as I know. This is the best I came up with...

Sample

http://jsfiddle.net/dBd56/

CSS

.fullscreen{
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
    margin:0;
    padding:0;
}

JS

$('#close').click(function() {
    $('#content').removeClass('fullscreen');
});

$('#fullscreen').click(function() {
    $('#content').addClass('fullscreen');
});

HTML

<div id="content" class="">
    Show me larger!

    <br />
    <input id="fullscreen" type="button" value="pseudo fullscreen"  />
    <input id="close" type="button" value="close"  />
</div>

Upvotes: 0

lowerkey

Reputation: 8335

No, best I know css can't make the browser go fullscreen. However, if your target browser goes full screen upon F11, you can intercept that event via the jquery $(window).resize event.

See http://api.jquery.com/resize/ for more details.

Upvotes: 1