How to Create Fullscreen Blog Pages With Javascript?

Creating a Fullscreen Blog Page With Javascript - With a fullscreen blog page, you won't see the address bar and browser tabs, so you only focus on that page.

Fullscreen mode is generally used in an embed, for example embedding a video. But this time we will make fullscreen mode for a web page.

However, we cannot make the fullscreen automatically when the page is opened, because at this time the browser will ignore it. So fullscreen must have user involvement with the action of clicking a fullscreen button, simply by pressing a button F11on the keyboard.

But for mobile, we can do this fullscreen when the blog is opened like when we open an application. We can do this with manifest.json, which I previously explained. When the user clicks on our blog icon from the main screen of the cellphone, the page will open automatically fullscreen, meaning that the user opens the blog like an application, without the browser address bar visible on the blog.

Well, for the desktop we can make a button for the fullscreen blog page with javascript. To exit fullscreen, there is also a button, or you can use it Esc on the keyboard.

To make it please follow the steps below.

#1 Fullscreen and Exit Fullscreen CSS code buttons?

Please copy the following CSS code to adjust the appearance of the Fullscreen button and the Exit Fullscreen button.

#openfull,
#exitfull {
    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;
}
#exitfull {
    display: none;
}

The code that is marked please change according to your blog or according to your wishes in placing the button.

#2 Fullscreen and Exit Fullscreen HTML code

Please copy the following HTML code and paste it where you want it to be.

<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>
<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></button>

#3 Fullscreen Javascrip ret Code and Fullscreen Exit

Please save the following Javascript code above the code </body>

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

This is How to Create Fullscreen Blog Pages With Javascript. Hopefully this article can help you, don't forget to read other interesting articles.