| Coding Tutorials

fullscreenMany years ago, when flash websites were popular and no-one cared about SEO, websites often went fullscreen.

A fullscreen website would hide all the browser elements such as address bar and bookmarks menu.

Thanks to the jQuery.fullscreen plugin, you can add this feature to your non-Flash websites. 

Here's how to use the jQuery.fullscreen plugin:

Step #1. Download jQuery.fullscreen

fullscreen
  • Decompress the zip file.
  • Find this folder: jquery.fullscreen-master/release/.
  • Upload the file jquery.fullscreen-0.4.1.js to your website.

Step #2. Load jQuery and jQuery.fullscreen

Inside any HTML file, add the following code just before the closing head tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script> <script type="text/javascript" src="/path/to/jquery.fullscreen-0.4.1.js">

</script>

Step #3. Define your open/close links

After the previous code, add the following:

<script type="text/javascript">
$(function() {
    $('.open').click(function() {
        $('body').fullscreen();
        return false;
    });
    $('.close').click(function() {
        $.fullscreen.exit();
        return false;
    });
});
</script>

Inside the body tag add two links. One link is will open the fullscreen and the other will it close it again.

Use the same classes defined in previous code: .open and .close:

<p>

<a href="#" class="open">Open Fullscreen</a>

<a href="#" class="close">Exit fullscreen</a>

</p>

The final result will look like the example below:

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
    <script type="text/javascript" src="/pah/to/jquery.fullscreen-0.4.1.js"> </script>
        <script type="text/javascript">
        $(function() {
            $('.open').click(function() {
                $('body').fullscreen();
                return false;
            });
            $('.close').click(function() {
                $.fullscreen.exit();
                return false;
            });
        });
        </script>
    
    </head>
    <body>
    
        <p>

<a href="#" class="open">Open Fullscreen</a> / <a href="#" class="close">Exit fullscreen</a>

</p>

    </body> </html>

Step #4. Test the fullscreen

  • Open your HTML file using your favorite browser.
  • Click on the "Open Fullscreen" link and you will see the magic.
fullscreen
  • Click on "Exit Fullscreen" or press the Escape key to close.

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.