Enhance Your Website with the FullScreen API

Enhance Your Website with the FullScreen API

One of the benefits to having new browser versions out every six weeks, is the rapid pace with which new functionality is introduced. The transition from nightly builds to official releases is merely weeks away. This means that even those of you who keep a close eye on the feature lists might miss an api or two.

This is the case with the Full Screen API. As if overnight, it went from a neat experiment to a feature supported by more than half of the browsers in the wild. Right now you might be wondering how is this different from the regular full screen we’ve had for ages.

Update: The full screen functionality has been removed from this site since the last redesign. I decided to go with media queries instead. Sorry for not providing a live demo!

What you need to know

With this api, you can display not only entire pages full screen, but individual elements within them as well (something you can’t do with the regular full screen). The intent here is to allow for full screen HTML5 videos and games, so that we can finally declare HTML5 as a viable alternative to Flash.

In short, here is what you need to know about the FullScreen API:

  • Works in Firefox 10, Safari and Chrome;
  • You trigger it using the new requestFullScreen() method;
  • It can display any element full screen, not only the entire page;
  • For security reasons, full screen can only be triggered from an event handler (as to be user initiated);
  • Also for security, Safari blocks all keyboard input except for the arrows and control keys, other browsers show warning messages when typing;
  • The API is still a work in progress, so you have to use the vendor specific methods (prefixed with moz and webkit);

The idea of allowing developers to programatically take up the user screen doesn’t come without serious security implications, which is why keyboard usage is limited. Of course, there are many legitimate uses for keyboard input in full screen, which is going to be addressed in future revisions of the API via some kind of permission prompt.

However, even in its current, limited form, the API still gives us an opportunity to enhance the experience of the end user.

Click to go Full Screen

Click to go Full Screen

The basics

According to the W3 draft, we have access to a number of methods and properties that will aid us with the task of switching an element to full screen.

var elem = document.getElementById('#content');

// Make this element full screen asynchronously
elem.requestFullscreen();

// When a full screen change is detected,
// an event will be dispatched on the document

document.addEventListener("fullscreenchange",function(){
    // Check if we are in full screen
    if(document.fullscreen)){
        // We are now in full screen!
    }
    else{
        // We have exited full screen mode
    }

}, false);

// We can also exit the full screen mode with code

document.exitFullscreen();

At this time, however, dealing with the API is quite more cumbersome, as no browser has support for these methods yet – we will need to use vendor specific ones like elem.mozRequestFullScreen() and elem.webkitRequestFullScreen().

The API also introduces a new CSS pseudo-selector that you can use to style the full screen element.

#content:fullscreen {
    font-size: 18;
}

Of course, it goes without saying that you will also need to supply moz and webkit prefixed versions of this as well. But there is an easier solution.

The jQuery plugin

There is a more elegant solution than ending up with a bunch of ugly code checking for every browser. You can use the jQuery FullScreen plugin, which works around various browser differences and gives you a simple method for triggering full screen mode.

$('#fsButton').click(function(e){
    // Use the plugin
    $('#content').fullScreen();
    e.preventDefault();
});

This will bring the #content element full screen. The plugin also adds a flag to the jQuery support object, so you can conditionally show your full screen button or trigger:

if($.support.fullscreen){
    // Show the full screen button
    $('#fsButton').show();
}

To exit the mode, call the fullScreen() method again.

The plugin adds the .fullScreen class to your element, so you can style it without needing to worry about browser-specific versions. Now let’s use it to do some good for the world!

The fun part

If you are a website owner you’ve probably made decisions that deteriorate the experience of your users. This should not come as a surprise to you – you need to show advertising, you need a search box, a navigation bar, a twitter widget, a comment section and all the things that make your site what it is. These are all necessary, but make your content, the very thing that people came to your site for, more difficult to read.

There is also a practical limit to how large your font can be before it gets out of place, not to mention the choice of a type face. If you have a sidebar, this also limits the horizontal space your content can take.

But we can fix this with the new API. We will use the functionality to bring the content section of your site full screen, thus improving the reading experience of your readers even on devices with small displays like laptops and netbooks.

Reader Mode Using the Full Screen API

Reader Mode Using the Full Screen API

Making the reading mode

It is pretty straightforward, we only need to some kind of button that will trigger the FullScreen plugin. We can use the $.support.fullscreen flag to test if the current browser supports the API. If it does, we will add the full screen button to the page.

if($.support.fullscreen){

	var fullScreenButton = $('<a class="goFullScreen">').appendTo('#buttonStrip');

	fullScreenButton.click(function(e){
		e.preventDefault();
		$('#main').fullScreen();
	});
}

When the #main div is brought full screen, it is assigned a width and height of 100%. We will have to work around this if we want it centered in the middle of the screen. This will call for some additional styling, applied only in full screen mode.

a.goFullScreen{
	/* The styling of the full screen button goes here */
}

/* The following styles are applied only in Full Screen mode */

#main.fullScreen{
	/* Adding a width and margin:0 auto to center the container */
	width: 860px;
	margin: 0 auto;

	/* Increasing the font size for legibility*/
	font: 17px serif;
	padding: 45px 45px 10px;
}

#main.fullScreen h1{
	/* Styling the heading */
	font: 56px/1.1 Cambria,"Palatino Linotype",serif;
	text-align: center;
}

#main.fullScreen h3{
	/* Subheadings */
	font: 28px Cambria,"Palatino Linotype",serif;
}

#main.fullScreen #postAuthor{
	/* Centering the post author info */
	/* ... */
}

/* Hiding unneeded elements and ads */

#main.fullScreen #featuredImage,
#main.fullScreen #topMiniShare,
#main.fullScreen #wideZineBanner,
#main.fullScreen #downloadDemo{
	display:none;
}

That is all there is to it! Only browsers that support full screen mode will display the button and users will enjoy a better, distraction-free reading experience.

Done!

There are plenty of places in a website where you can use a full screen view – from videos and canvas-based games, to reports and print preview dialogs. I would personally love to see this used for infographics and presentations. We can go a long way with a useful feature like this.

Join our newsletter and get our PSDs!21,272 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

♥ 21,272 developers love it

31 Comments

  1. Stephen says:

    Oh wow. Absolutely beautiful!
    Going to have to add this to my site when I redesign! :P

    Thanks Martin!

  2. Amjad says:

    Neat thanks! No Demo? :)

    1. Amjad, the demo is underneath the main image at the top of the article. Click the little magnifying glass.

      Martin - This is most awesome. I could see huge potential for authors and other book based websites using this API to give the reader almost a Kindle type reading experience.

      Fantastic article.

  3. Peiman says:

    Wonderful,
    Great article.

  4. rax says:

    awesome !
    I think WordPress post editor is already using this kind of feature from years , right ?? :-)

    1. Martin Angelov says:

      The full screen mode in the WordPress editor does not take up the whole screen like this API does. It simply enlarges the editing area to fill the inside of the browser window. As text input is limited in this API, it won't be useful for full screen editing at the moment.

  5. sandeep says:

    thnx..
    not finding demo..

    1. Martin Angelov says:

      The button will be shown only on browsers that support the API. Be sure to update your browser to see it.

  6. Catherine says:

    Interesting, useful and great work!
    Thank you!
    Martin please make a separate demo, because the call FullScreen plugin does not work.
    Tested in the latest versions of Chrome, Mozzilla, and Safari.

    1. Martin Angelov says:

      And it doesn't work in any of them?

      1. Alpa says:

        yes it does not for me too :( !

  7. Julian says:

    First: Thank you for all the great tutorials.
    Second: I don't understand how to do this! It doesn't work (I use Firefox 10 and on this site it's working)
    I used the fullscreen.js from github and created a new HTML-File:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="fullscreen.js"></script>
    <a class="goFullScreen">Fullscreen</a>
    <p>Text of the Site</p>

    1. Martin Angelov says:

      You will need to listen for click events on the button. Something like this:

      $('.goFullScreen').click(function(e){
          e.preventDefault();
      
          // This has to point to your content div:
          $('#somediv').fullScreen();
      });
      

      Place the above code in the $(document).ready() function in a separate js file.

      1. Julian says:

        Thank you so much! I've overlooked that.

  8. Gaurav says:

    Another great feature, another cool article. :-) Thumbs Up!!!

  9. Alex says:

    Tested in the latest versions of Chrome, Mozzilla, and Safari.
    And it does not work!
    The demo is not for this reason?
    By the way, too bad you do not publish critical comments about your "articles".
    And even worse, that you can not answer readers' questions.
    Draw conclusions ..

  10. I can't wait to experience this in Opera.

  11. Catherine says:

    Martin, offer my sincere apologies.
    Great job!
    I figured out the whole problem was in the prefix -webkit and -moz.

  12. Catherine says:

    Thank you, Martin!
    All works in Google Chrome and FireFox.
    Thank you again!

  13. Emil says:

    It works just fine, thanks for the example :).

  14. axillon says:

    the magnifying glasss button does not show in IE 9.. so I guess this does not work in IE?

    1. Martin Angelov says:

      Correct.

  15. Gil says:

    Thanks!
    I just tested it and it is really cool :)

  16. Kevin says:

    Awesome and thanks a lot! Is there any chance to use this in an iframe?

  17. remi says:

    That's great but it's a shame that when you are in fullscreen mode and when you click on any link you loose the CSS fullscreen formatting. Do you know how to keep it?

  18. Adam says:

    I discovered screenfull.js the other day. Makes it easy to deal with the prefixes and some bug in browsers.

    https://github.com/sindresorhus/screenfull.js

  19. Dan West says:

    Now I can only hope that someday, they let an HTML 5 app be able to have complete control of ALL keyboard events (Yes, even F5). I keep hearing that web apps will replace desktop apps... Not in my book until MY app (not the browser) is king and can use all the Function keys, home, end, pg up... etc.

    You know, not every app is a public facing, app. There are plenty of internal corporate (trusted) apps that would be nice to have full control. In these cases, the browser is just the application 'runtime' engine and really should be out of the way.

  20. Jonathan King says:

    Great job on this plugin! I would like to suggest one change though. If you call the fullscreen more than once in a session it does not unbind the callback so you can get several instances of the callback firing simultaneously. This may not be the best solution but I added this line of code inside of the the onFullScreenEvent function and it fixed the issue:
    $(document).off("fullscreenchange mozfullscreenchange webkitfullscreenchange");

  21. Art says:

    I feel like a twit - but when I open this page in Firefox (v16.0.2) or Chrome (v22) I don't see the magnifying glass below the first "full screen" image.

    Has this code/approach stopped working? Or am I missing the obvious? It has been 6 months since the last post here, so browser standards could have changed(?).

    Thanks for the help.

    1. Martin Angelov says:

      I did a small refresh on the site design and decided to leave out this functionality. Otherwise the plugin works fine.

  22. Dave Amour says:

    Hi

    Should the following in the plugin:

    'callback' : $.noop( ),

    Actually be:

    'callback' : $.noop,

    Thanks

    Dave

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links