DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Cypress Tutorial: A Comprehensive Guide With Examples and Best Practices
  • Testing Applications With JPA Buddy and Testcontainers
  • How to Handle Secrets in Kubernetes
  • Measuring Service Performance: The Whys and Hows
  1. DZone
  2. Coding
  3. Languages
  4. New HTML5 technology: fullscreen mode

New HTML5 technology: fullscreen mode

Andrey Prikaznov user avatar by
Andrey Prikaznov
·
Jul. 18, 13 · Interview
Like (0)
Save
Tweet
Share
8.19K Views

Join the DZone community and get the full member experience.

Join For Free

 The new HTML5 technology, the fullscreen API, gives us an easy way to present a web page's content in fullscreen mode. We are about to give you detailed information about the fullscreen mode. Just try to imagine all the possible advantages which you can get using this technology – fullscreen photo albums, videos, and even games. But before we describe this new technology, I have to note that this technology is experimental, and not all the browsers support it.

As we mentioned before, this technology is new (experimental), it means, that its specification was not finally introduced, we have to use custom prefixes for different browsers, and, it is possible that the syntax and behavior can be changed in future versions of browsers. For today, it is supported by next browsers:

  • Chrome (v15)
  • Firefox (v9)
  • Safari (v5)
  • Opera (v12.10)
  • Internet Explorer (v11)

Starting the full-screen mode

Due to the fact that this mode is supported by different browsers differently, we have to foresee all the cases:

var elem = document.getElementById("myObject");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

As you see, we can request the full screen mode for any DOM element (or we can apply it for the whole page – document.documentElement). This code sends a request to the user about permission to enable full-screen mode, if this request is accepted, all the toolbars and other panels in the browser will disappear, and the only thing on the screen will be the desired element or the whole web page.

New CSS pseudo-class

A new CSS pseudo class was added – :full-screen. It can be used to style elements which are in full-screen mode. This is very useful, because it is obvious that there are more space for your elements in the full screen mode.

:-webkit-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}
:-moz-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}

Additional information

There are few notifications: when the full-screen mode is successfully enabled, the document receives a ‘mozfullscreenchange’ event. When the full-screen mode is canceled, the document receives the mozfullscreenchange event (again). Pay attention, that this event doesn’t show if the document is entering or exiting the full-screen mode. Tip: if the document has a non null mozFullScreenElement, we are in the full-screen mode.

What if fullscreen request fails? If it fails, the element that requested the fullscreen will receive a fullscreenerror event. Plus, your browser will log this error message to the Web Console

Finally, if you are ready to exit the full-screen mode, you can invoke the ‘cancelFullScreen’ method.

Final example

This is an example that you can use to switch the page document into full-screen mode. There are two event handlers (to handle with mozfullscreenerror and keydown events). Use the F or Enter key to enable the full-screen mode.

// mozfullscreenerror event handler
function errorHandler() {
   alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);

// toggle full screen
function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

// keydown event handler
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
    toggleFullScreen();
  }
}, false);

Live Demo

download in package

API: Methods and Events

partial interface Element {
  void requestFullscreen();
};

partial interface Document {
  readonly attribute boolean fullscreenEnabled;
  readonly attribute Element? fullscreenElement;

  void exitFullscreen();
};

Explanation

  • element.requestFullscreen() Displays element fullscreen.
  • document.fullscreenEnabled Returns true if document has the ability to display elements fullscreen, or false otherwise.
  • document.fullscreenElement Returns the element that is displayed fullscreen, or null if there is no such element.
  • document.exitFullscreen() Stops any elements within document from being displayed fullscreen.

Conclusion

The new full-screen technology gives us a great opportunity to get the maximum benefit from the screen. This is the real way to improve the user interface.

HTML IT

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Cypress Tutorial: A Comprehensive Guide With Examples and Best Practices
  • Testing Applications With JPA Buddy and Testcontainers
  • How to Handle Secrets in Kubernetes
  • Measuring Service Performance: The Whys and Hows

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: