Creating a Full-Screen Blog Page with JavaScript
When a full-screen blog page is created, you will not see the address bar and browser tab, only the full-screen page will be displayed.
Fullscreen mode is often used on an embed, for example, to embed a video or game. But this time we will create a full-screen mode for a web page.
However, when the page is opened full screen is not automatically rendered, first the browser renders the normal view of the page. To make the page full screen, the keyboard must be created with the full-screen action by clicking the F11 key or clicking the full-screen button. This is the most suitable for browsers.
On mobile devices, you can automatically render the page full screen when the blog is opened. We posted this before manifest.json< We can do it with /a>. When a user clicks on the icon of our blog from the home screen of the phone, the page automatically opens in full screen; this opens the user's blog site like an application, ensuring that the browser's address bar does not appear on the blog.
For desktop or laptop computers, you can add a button to create a full-screen blog page with javascript. There should also be a button to exit the full screen or you can use your keyboard's Esc key.
Follow the steps below to add the full-screen pages plugin to your blog site.
Fullscreen Toggle Button and Fullscreen Exit Button CSS CodeUse the following CSS code to set the appearance of the fullscreen button and fullscreen exit button.
#openfull,
#exitful {
background: 0 0;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
text-align: center;
width: 30px;
height: 55px;
line-height: 55px;
float: left
}
#openfull:active,
#exitfull:active,
#openfull:focus,
#exitfull:focus {
outline: 0;
}
#openfull svg,
#exitfull svg {
vertical-align: middle;
}
#exitful {
display: none;
}You can get a different look as you want by changing the codes marked among the CSS codes for the full-screen button.
Full-Screen Buttons HTML CodesPlace the following HTML codes in the field you want to use.
<button aria-label="Open Fullscreen" id="openfull" onclick="openFullscreen();"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></svg/
<button aria-label="Exit Fullscreen" id="exitfull" onclick="closeFullscreen();"><svg width="24" height="24" viewBox="0 0 24 24">< ;path fill="#fff" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></svg&code></
Add the following javascript code one line above the </body> code. Javascript code is compatible with Firefox, Chrome, Safari, Opera, and IE/Edge browsers.
<script>
//<![CDATA[
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
document.getElementById("openfull").style.display = "none";
document.getElementById("exitfull").style.display = "block";
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.getElementById("openfull").style.display = "block";
document.getElementById("exitfull").style.display = "none";
}
//]]>
</script>You can use the comment form for more information and comments about the fullscreen rendering plugin.
Trick Level
Tricklevel.blogspot.com is a blog where we post blogging tips, blogger plugins, AMP, Templates, SEO, HTML CSS & JavaScript project, new awesome tools.