Create a Fullscreen Blog Page 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 on an embed, for example embed a video. But this time we will make fullscreen mode for a web page.

But we can't make fullscreen automatically when the page is opened, because now the browser will ignore it. So this fullscreen user must have involvement with the action of clicking a fullscreen button, simply by pressing the F11 key on the keyboard.

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

Well, for desktop we can make a button for fullscreen blog pages with javascript. To exit fullscreen also provided a button, or can use Esc on the keyboard.

To make it please follow the steps below.

1. Fullscreen and Exit Fullscreen CSS Code

Please copy the following CSS code to set the Fullscreen and Exit Fullscreen buttons.

#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 marked please change according to your blog or as you wish in placing the button.

2. Fullscreen and Exit Fullscreen HTML Code Button

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

<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 Javascript code and Fullscreen Exit

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

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

DEMO

Please click the fullscreen icon on the top right.

Good luck and be creative.