Live DemoDownload

You have always been able to view a whole webpage in full screen mode. To do so, you can press F11 key in Windows, while in OS X you can hit Shift + Command + F. However, there are times when we, as a web developer, want to add a trigger on the webpage to perform the function rather than use those keys.

HTML5 has introduced a set of new APIs including Fullscreen API. This API allows us to put our website or just a particular element on the webpage in full screen.

This API would be useful for videos, images, online game, and HTML/CSS-based slide presentations etc.

So let’s start working.

HTML

 CSS

We have added some CSS to place the image at the center of window and decrease its width.

And now lets add a CSS to diplay button to expand the image to full screen and then exit the full screen. I have use ‘v’ and ‘u’ you can use whatever you like.

 JavaScript

We will use jQuery to make the code a little bit leaner.

We will use .on jQuery on method for full screen.

 CSS for Full Screen

Live DemoDownload

2 COMMENTS

Leave a Reply