Skip to main content
KOMPI AJAIB

follow us

Membuat Fullscreen Halaman Blog Dengan Javascript


Membuat Fullscreen Halaman Blog Dengan Javascript - Dengan fullscreen halaman blog maka Anda tidak akan melihat bilah address bar dan tab browser, sehingga Anda hanya fokus pada halaman tersebut.

Mode fullscreen umumnya dipakai pada sebuah embed, misalnya embed sebuah video. Namun kali ini kita akan membuat mode fullscreen untuk sebuah halaman web.

Namun kita tidak bisa membuat fullscreen otomatis ketika halaman dibuka, karena saat ini browser akan mengabaikannya. Jadi fullscreen ini harus ada keterlibatan user dengan aksi mengklik sebuah tombol fullscreen, mudahnya dengan menekan tombol F11 pada keyboard.

Namun untuk mobile, kita bisa melakukan fullscreen ini ketika blog dibuka seperti ketika kita membuka sebuah aplikasi. Hal tersebut bisa kita lakukan dengan manifest.json yang sebelumnya sudah saya jelaskan. Ketika user mengklik ikon blog kita dari layar utama ponsel, maka halaman akan terbuka otomatis fullscreen, artinya user membuka blog seperti sebuah aplikasi, tanpa address bar browser terlihat di atas blog.

Nah, untuk desktop kita bisa membuat tombol untuk fullscreen halaman blog dengan javascript. Untuk keluar fullscreen disediakan juga sebuah tombol, atau bisa menggunakan Esc pada keyboard.

Untuk membuatnya silahkan ikuti langkah-langkahnya di bawah ini.

1. Kode CSS Tombol Fullscreen dan Exit Fullscreen

Silahkan copy code CSS berikut ini untuk mengatur tampilan tombol Fullscreen dan tombol Exit Fullscreen.


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

Kode yang ditandai silahkan ganti sesuaikan dengan blog Anda atau sesuai keinginan Anda dalam menempatkan tombolnya.

2. Kode HTML Tombol Fullscreen dan Exit Fullscreen

Silahkan copy kode HTML berikut dan paste di mana Anda ingin meletakannya.


<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. Kode Javascript Fullscreen dan Exit Fullscreen

Silahkan simpan kode Javascript berikut di atas kode </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>

Silahkan klik ikon fullscreen di kanan atas.

Selamat mencoba dan berkreasi.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar