Fullscreen Websites with jQuery.fullscreen

fullscreen

Many 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.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

15 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
blueblot
10 years ago

nice tutorial, works fine. But is it possible to navigate through a site in fullscreen mode?

steve
steve
10 years ago
Reply to  blueblot

Hi Kris,
Yes. You wouldn’t get the forward or back buttons on the browser, but you would get all the website navigation elements.

Tony
Tony
10 years ago

it dos`n work.

anand
anand
9 years ago

I want to got my page fullscreen when it is load. Is it possible that i call this code on “onload” event of the body tag? I tried it but not working.

Goose
Goose
9 years ago

The open full screen doesnt work for me in Chrome. (Works fine in Safari though) Any thoughts?

udit
udit
9 years ago

I am not sure, but demo not working on my browser, I am using mozila firefox as browser and ubuntu 14.04 as OS.

sky
sky
9 years ago

same too. my browser doensn’t work. mine is latest version of chrome.

Been Ya Li
Been Ya Li
9 years ago

my website doesn’t working

Nick Covanes
Nick Covanes
9 years ago

Would love to see this incorporated into a wordpress plugin!

Syed Kazimi
Syed Kazimi
8 years ago

Your Demo is not working at all in any browser

Lyhong Pon
Lyhong Pon
7 years ago

Does it not work when reloading?

Bizril blog
Bizril blog
6 years ago

great.. it’s work, but how if the style eg. background and font color not change ? thank you

wasim
wasim
6 years ago

Sir, i want full screen page but no option to close the full screen page

coder
coder
5 years ago
Reply to  wasim

Hi Wasim, 
Were you able to get the full screen?

vichithra vasudev
vichithra vasudev
4 years ago

It doesn’t work….

15
0
Would love your thoughts, please comment.x
()
x