Hide Div and Do Not Show Again on Refresh
Making Fullscreen Experiences
— Updated
We have the ability to hands make immersive fullscreen websites and applications, just similar annihilation on the web there are a couple of ways to do it. This is especially important now that more browsers are supporting an "installed spider web app" feel which launch fullscreen.
Getting your app or site fullscreen #
In that location are several means that a user or developer can get a web app fullscreen.
- Request the browser go fullscreen in response to a user gesture.
- Install the app to the home screen.
- Faux information technology: auto-hide the address bar.
Request the browser go fullscreen in response to a user gesture #
Not all platforms are equal. iOS Safari doesn't have a fullscreen API, but we do on Chrome on Android, Firefox, and IE eleven+. Most applications you build will employ a combination of the JS API and the CSS selectors provided by the fullscreen specification. The principal JS API's that yous need to care about when edifice a fullscreen experience are:
-
element.requestFullscreen()(currently prefixed in Chrome, Firefox, and IE) displays the element in fullscreen mode. -
document.exitFullscreen()(currently prefixed in Chrome, Firefox and IE. Firefox usescancelFullScreen()instead) cancels fullscreen mode. -
document.fullscreenElement(currently prefixed in Chrome, Firefox, and IE) returns true if any of the elements are in fullscreen mode.
When your app is fullscreen yous no longer have the browser's UI controls available to you. This changes the fashion that users collaborate with your feel. They don't have the standard navigation controls such as Forwards and Backwards; they don't take their escape hatch that is the Refresh push button. Information technology'due south important to cater for this scenario. You can use some CSS selectors to help you modify the style and presentation of your site when the browser enters fullscreen style.
<button id = "goFS" > Become fullscreen </push >
<script >
var goFS = document. getElementById ( 'goFS' ) ;
goFS. addEventListener (
'click' ,
function ( ) {
document.body. requestFullscreen ( ) ;
} ,
false ,
) ;
</script > The above example is a little contrived; I've hidden all the complexity around the use of vendor prefixes.
The actual lawmaking is a lot more complex. Mozilla has created a very useful script that you can utilise to toggle fullscreen. As you lot can see, the vendor prefix situation it is complex and cumbersome compared to the specified API. Even with the slightly simplified code below, it is still circuitous.
role toggleFullScreen ( ) {
var doc = window.document;
var docEl = doc.documentElement; var requestFullScreen =
docEl.requestFullscreen ||
docEl.mozRequestFullScreen ||
docEl.webkitRequestFullScreen ||
docEl.msRequestFullscreen;
var cancelFullScreen =
doc.exitFullscreen ||
doc.mozCancelFullScreen ||
dr..webkitExitFullscreen ||
doc.msExitFullscreen;
if (
!doc.fullscreenElement &&
!doctor.mozFullScreenElement &&
!doc.webkitFullscreenElement &&
!medico.msFullscreenElement
) {
requestFullScreen . call (docEl) ;
} else {
cancelFullScreen . call (doc) ;
}
}
Nosotros web developers hate complexity. A nice loftier-level abstract API you tin can use is Sindre Sorhus' Screenfull.js module which unifies the 2 slightly different JS API'south and vendor prefixes into i consistent API.
Fullscreen API Tips #
Making the certificate fullscreen #
It is natural to recollect that yous have the body element fullscreen, but if yous are on a WebKit or Blink based rendering engine you will see it has an odd issue of shrinking the body width to the smallest possible size that will incorporate all the content. (Mozilla Gecko is fine.)
To fix this, use the document element instead of the trunk element:
document.documentElement. requestFullscreen ( ) ; Making a video element fullscreen #
To make a video element fullscreen is exactly the aforementioned equally making whatever other element fullscreen. You call the requestFullscreen method on the video chemical element.
<video id = "videoElement" > </video >
<push id = "goFS" > Get Fullscreen </button >
<script >
var goFS = document. getElementById ( 'goFS' ) ;
goFS. addEventListener (
'click' ,
function ( ) {
var videoElement = certificate. getElementById ( 'videoElement' ) ;
videoElement. requestFullscreen ( ) ;
} ,
false ,
) ;
</script > If your <video> element doesn't have the controls attribute defined, at that place's no mode for the user to command the video in one case they are fullscreen. The recommended style to do this is to accept a bones container that wraps the video and the controls that you desire the user to come across.
<div id = "container" >
<video > </video >
<div >
<push button > Play </button >
<button > Stop </push >
<push button id = "goFS" > Become fullscreen </push >
</div >
</div >
<script >
var goFS = certificate. getElementById ( 'goFS' ) ;
goFS. addEventListener (
'click' ,
function ( ) {
var container = document. getElementById ( 'container' ) ;
container. requestFullscreen ( ) ;
} ,
false ,
) ;
</script > This gives y'all a lot more flexibility because you can combine the container object with the CSS pseudo selector (for case to hide the "goFS" push button.)
<style >
#goFS:-webkit-full-screen #goFS {
brandish : none;
}
#goFS:-moz-total-screen #goFS {
display : none;
}
#goFS:-ms-fullscreen #goFS {
display : none;
}
#goFS:fullscreen #goFS {
brandish : none;
}
</style > Using these patterns, y'all can detect when fullscreen is running and adapt your user interface appropriately, for example:
- By providing a link dorsum to the start folio
- Past Providing a mechanism to close dialogs or travel backwards
Launching a page fullscreen from abode screen #
Launching a fullscreen web folio when the user navigates to it is non possible. Browser vendors are very aware that a fullscreen experience on every page load is a huge badgerer, therefore a user gesture is required to enter fullscreen. Vendors practice let users to "install" apps though, and the act of installing is a signal to the operating organization that the user wants to launch every bit an app on the platform.
Across the major mobile platforms it is pretty easy to implement using either meta tags, or manifest files as follows.
iOS #
Since the launch of the iPhone, users have been able to install Web Apps to the home screen and take them launch as full-screen web apps.
<meta name = "apple-mobile-web-app-capable" content = "yeah" /> If content is set to yeah, the spider web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to brandish web content. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-but Boolean JavaScript property.
Apple
Chrome for Android #
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is like to the iOS Safari model.
<meta name = "mobile-web-app-capable" content = "yes" /> You lot tin can fix up your web app to have an application shortcut icon added to a device'due south dwelling house screen, and take the app launch in full-screen "app mode" using Chrome for Android's "Add together to Home screen" menu particular.
Google Chrome
A better option is to use the Spider web App Manifest.
Web App Manifest (Chrome, Opera, Firefox, Samsung) #
The Manifest for Web applications is a simple JSON file that gives you, the developer, the ability to command how your app appears to the user in the areas that they would expect to see apps (for example the mobile abode screen), directly what the user can launch and, more importantly, how they can launch information technology. In the hereafter the manifest will requite you even more control over your app, merely right now we are simply focusing on how your app can be launched. Specifically:
- Telling the browser about your manifest
- Describing how to launch
One time you accept the manifest created and it is hosted on your site, all you need to do is add a link tag from all your pages that encompass your app, as follows:
<link rel = "manifest" href = "/manifest.json" /> Chrome has supported Manifests since version 38 for Android (October 2014) and it gives you the command over how your spider web app appears when information technology is installed to the habitation screen (via the short_name, name and icons properties) and how it should be launched when the user clicks on the launch icon (via start_url, display and orientation).
An instance manifest is shown below. Information technology doesn't show everything that can exist in a manifest.
{
"short_name" : "Kinlan's Astonish App" ,
"proper noun" : "Kinlan'southward Astonishing Application ++" ,
"icons" : [
{
"src" : "launcher-icon-4x.png" ,
"sizes" : "192x192" ,
"blazon" : "paradigm/png"
}
] ,
"start_url" : "/index.html" ,
"display" : "standalone" ,
"orientation" : "landscape"
} This feature is entirely progressive and allows you create better, more integrated experiences for users of a browser that supports the feature.
When a user adds your site or app to the domicile screen, there is an intent by the user to treat information technology like an app. This ways you should aim to direct the user to the functionality of your app rather than a product landing page. For example, if the user is required to sign-in to your app, then that is a expert page to launch.
Utility apps #
The majority of utility apps will do good from this immediately. For those apps you'll probable want them launched standalone just akin every other app on a mobile platform. To tell an app to launch standalone, add this the Web App Manifest:
"display" : "standalone" Games #
The majority of games will do good from a manifest immediately. The vast majority of games will want to launch full-screen and forced a specific orientation.
If you are developing a vertical scroller or a game like Flappy Birds then yous volition almost likely want your game to always exist in portrait mode.
"display" : "fullscreen" ,
"orientation" : "portrait" If on the other hand y'all are building a puzzler or a game like Ten-Com, then you will probably want the game to always use the mural orientation.
"display" : "fullscreen" ,
"orientation" : "landscape" News sites #
News sites in nearly cases are pure content-based experiences. About developers naturally wouldn't think of adding a manifest to a news site. The manifest will let you define what to launch (the forepart folio of your news site) and how to launch it (fullscreen or as a normal browser tab).
The choice is up to you and how you lot recollect your users will similar to access your experience. If you desire your site to have all the browser chrome that you lot would wait a site to have, you can fix the brandish to browser.
"display" : "browser" If you desire your news site to feel like the majority of news-axial apps treat their experiences as apps and remove all web-like chrome from the UI, you can do this by setting display to standalone.
"brandish" : "standalone" Simulated information technology: auto-hide the address bar #
Yous can "fake fullscreen" by automobile-hiding the address bar as follows:
window. scrollTo ( 0 , one ) ; This is a pretty simple method, the page loads and the browser bar is told to get out of the way. Unfortunately information technology is non standardized and not well supported. You likewise have to piece of work around a bunch of quirks.
For example browsers often restore the position on the page when the user navigates back to it. Using window.scrollTo overrides this, which annoys the user. To work around this you have to store the last position in localStorage, and deal with the edge cases (for example, if the user has the page open in multiple windows).
UX guidelines #
When you are building a site that takes reward of full screen at that place are a number of potential user experience changes that y'all demand to be aware of to exist able to build a service your users will love.
Don't rely on navigation controls #
iOS does not have a hardware back button or refresh gesture. Therefore y'all must ensure that users can navigate throughout the app without getting locked in.
You can observe if you lot are running in a fullscreen fashion or an installed manner easily on all the major platforms.
iOS #
On iOS you tin can use the navigator.standalone boolean to run across if the user has launched from the home screen or not.
if (navigator.standalone == true ) {
// My app is installed and therefore fullscreen
} Web App Manifest (Chrome, Opera, Samsung) #
When launching every bit an installed app, Chrome is not running in truthful fullscreen feel and so document.fullscreenElement returns null and the CSS selectors don't work.
When the user requests fullscreen via a gesture on your site, the standard fullscreen API's are available including the CSS pseudo selector that lets y'all adapt your UI to react to the fullscreen country like the following
selector:-webkit-full-screen {
display : cake; // displays the chemical element only when in fullscreen
} selector {
brandish : none; // hides the element when non in fullscreen mode
}
If the users launches your site from the home screen the display-mode media query volition be set to what was defined in the Web App Manifest. In the instance of pure fullscreen it will be:
@media ( brandish-mode : fullscreen) {
} If the user launches the application in standalone mode, the display-mode media query will be standalone:
@media ( display-mode : standalone) {
} Firefox #
When the user requests fullscreen via your site or the user launches the app in fullscreen mode all the standard fullscreen API's are available, including the CSS pseudo selector, which lets yous adapt your UI to react to the fullscreen land like the following:
selector:-moz-full-screen {
display : block; // hides the element when not in fullscreen way
} selector {
brandish : none; // hides the chemical element when not in fullscreen manner
}
Internet Explorer #
In IE the CSS pseudo class lacks a hyphen, simply otherwise works similarly to Chrome and Firefox.
selector:-ms-fullscreen {
display : block;
} selector {
brandish : none; // hides the element when not in fullscreen mode
}
Specification #
The spelling in the specification matches the syntax used by IE.
selector:fullscreen {
display : block;
} selector {
brandish : none; // hides the chemical element when not in fullscreen mode
}
Keep the user in the fullscreen feel #
The fullscreen API tin exist a little finicky sometimes. Browser vendors don't want to lock users in a fullscreen page so they have developed mechanisms to break out of fullscreen as soon as they peradventure can. This ways you can't build a fullscreen website that spans multiple pages because:
- Irresolute the URL programmatically by using
window.location = "http://example.com"breaks out of fullscreen. - A user clicking on an external link inside your page will leave fullscreen.
- Changing the URL via the
navigator.pushStateAPI will besides intermission out of the fullscreen feel.
You have two options if you want to keep the user in a fullscreen experience:
- Utilize the installable web app mechanisms to go fullscreen.
- Manage your UI and app state using the # fragment.
Past using the #syntax to update the url (window.location = "#somestate"), and listening to the window.onhashchange event you can use the browser'due south own history stack to manage changes in the application land, permit the user to apply their hardware back buttons, or offer a simple programmatic back button experience by using the history API every bit follows:
window.history. go ( - i ) ; Let the user cull when to go fullscreen #
There is nil more abrasive to the user than a website doing something unexpected. When a user navigates to your site don't try and fob them into fullscreen.
Don't intercept the showtime touch event and call requestFullscreen().
- It is annoying.
- Browsers may decided to prompt the user at some point in the future about allowing the app to take up the fullscreen.
If you lot want to launch apps fullscreen think nearly using the install experiences for each platform.
Don't spam the user to install your app to a home screen #
If you program on offering a fullscreen experience via the installed app mechanisms be considerate to the user.
- Be discreet. Use a banner or footer to let them know they can install the app.
- If they dismiss the prompt, don't show it again.
- On a users starting time visit they are unlikely to desire to install the app unless they are happy with your service. Consider prompting them to install after a positive interaction on your site.
- If a user visits your site regularly and they don't install the app, they are unlikely to install your app in the hereafter. Don't keep spamming them.
Conclusion #
While we don't have a fully standardized and implemented API, using some of the guidance presented in this article you can easily build experiences that accept reward of the user's entire screen, irrespective of the client.
Feedback #
Concluding updated: — Meliorate article
Source: https://web.dev/native-hardware-fullscreen/
0 Response to "Hide Div and Do Not Show Again on Refresh"
Post a Comment