We have now all the time been ready to view a complete webpage in fullscreen mode. To take action, you’ll hit F11 key in Home windows, whilst in OS X you’ll hit Shift + Command + F. Then again, there are occasions once we, as a internet developer, wish to upload a cause at the webpage to accomplish the serve as quite than use the ones keys.

Along with offering a number of new parts, HTML5 additionally offered a collection of latest APIs together with person who we’re going to speak about on this put up, known as Fullscreen API. This API permits us to position our web site or only a explicit part at the webpage in fullscreen (and vice versa) the use of the browser’s local capability.

So far as implementation is worried, this API can be helpful specifically for movies, pictures, on-line sport, and HTML/CSS-based slide displays.

So, let’s see the way it works.

Browser Fortify

On the time of the writing, this API most effective works for Google Chrome, Safari and Firefox. Very similar to CSS3, the syntax is prefixed as it’s nonetheless in experimental degree.

Webkit Firefox Description
webkitRequestFullScreen mozRequestFullScreen

The solution to ship the webpage or specified part fullscreen.

webkitCancelFullscreen mozCancelFullscreen

The solution to go out fullscreen mode.

mozFullScreenElement webkitFullScreenElement

The solution to whether or not the part is in fullscreen mode.

It’s value noting that the Fullscreen API is topic to modify someday.

Utilization Instance

One of the crucial absolute best manner to be told a brand new factor is through instance. On this put up, we can run a easy venture. The speculation is we can have a picture and a button that can put the picture fullscreen or alternate it again to standard view with a click on.

HTML

Let’s get started with the HTML markup. We have now a

part to wrap the picture and a part for the button.

CSS

Then, we position the picture on the middle of the window in addition to upload a couple of ornamental kinds to make it glance nicer.

.demo-wrapper {
	width: 38%;
	margin: 0 auto;
}
.html5-fullscreen-api {
	place: relative;
}
.html5-fullscreen-api img {
	max-width: 100%;
	border: 10px cast #fff;
	box-shadow: 0px 0px 50px #ccc;
}
.html5-fullscreen-api .fs-button {
	z-index: 100;
	show: inline-block;
	width: 32px;
	top: 32px;
	place: absolute;
	most sensible: 10px;
	proper: 10px;
	cursor: pointer;
}
image stylesimage styles

I made up our minds to show the icon within the part using :after pseudo-element, in order that later we will alternate the icon simply via CSS the use of the content material characteristic.

.html5-fullscreen-api .fs-button:after {
	show: inline-block;
	width: 100%;
	top: 100%;
	font-size: 32px;
	font-family: 'ModernPictogramsNormal';
	colour: rgba(255,255,255,.5);
	cursor: pointer;
	content material: "v";
}
.html5-fullscreen-api .fs-button:hover:after {
	colour: rgb(255,255,255);
}
full screen iconfull screen icon

JavaScript

We can use jQuery to make the code slightly bit leaner.

As we discussed, we can ship the picture fullscreen upon a click on. We wrap the serve as beneath the jQuery .on means.

$('.fs-button').on('click on', serve as(){ 

}

We first take a look at whether or not the part is already in fullscreen mode, if this situation returns we can execute the webkitCancelFullScreen to ship it to standard view. Another way, we can flip it to fullscreen the use of the webkitRequestFullScreen means, like so.

$('.fs-button').on('click on', serve as(){
		var elem = record.getElementById('fullscreen');
		if(record.webkitFullscreenElement) {
			record.webkitCancelFullScreen();
		}
		else {
			elem.webkitRequestFullScreen();
		};
	});

Click on at the fulllscreen icon, and our picture will pass fullscreen, as proven within the following screenshot.

full screen modefull screen mode

Fullscreen CSS

Webkit (in addition to Firefox) additionally supplies a collection of latest pseudo-classes that permit us so as to add taste laws when the part is in fullscreen mode. Say we wish to alternate the background, we will write the manner laws this fashion.

#fullscreen:-webkit-full-screen {
	background-image: url('../img/ios-linen.jpg'); 
	width: 100%;
}

Now, you will have to see the iOS linen texture in fullscreen mode.

ios linen textureios linen texture

That’s it. You’ll head over to the demo web page to peer it in motion. Since, we don’t specify the serve as with the Firefox syntax, this demo will most effective paintings in Webkit Browsers, Google Chrome and Safari

Additional References

The put up How to Use HTML5 Fullscreen API seemed first on Hongkiat.

WordPress Website Development

[ continue ]