How to Creating a Full Screen Blog Page with Javascript

Nilesh    9/03/2020    Javascript   

Fullscreen mode is often used over an embed, for example to embed a video or game. However, this time we will create a full screen mode for a web page.

However, the full screen is not automatically rendered when the page is opened, primarily the browser creates the normal view of the page. To make the page full screen, the keyboard must be created with the action of making it full screen by clicking the F11 key or the make full screen button. This is best suited for browsers.

On mobile devices, you can automatically create the page in full screen when the blog is opened. We can do this with the manifest.json we published earlier . When a user clicks on our blog's icon from the phone's home screen, the page automatically opens in full screen; this opens the user's blog site like an application, making the browser's address bar not visible on the blog.

For desktop or laptop computers, you can add a button to create a fullscreen blog page with javascript. To exit full screen, there must also be a button or you can use your keyboard's Esc key.

Preview

Follow the steps below to add the make fullscreen pages plugin to your blog site.

CSS Code of the Full Screen Doors and the Full Screen Exit Button

Use the CSS code below to set up the make full screen button and the full screen exit button view.

CSS

#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;
}

You can get a different look as you want by changing the codes marked among the CSS codes for the full screen button.

Fullscreen Buttons HTML Codes

Place the following HTML codes in the area you want to use.

HTML

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

Fullscreen Buttons Javascript Code

Add the following javascript code </body>one line above your code. Javascript code is compatible with Firefox, Chrome, Safari, Opera and IE / Edge browsers.

Javascript

<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 feedback on the fullscreen creation plugin.