Cara Buat Fullscreen Halaman Blog Menggunakan Javascript

CANDILKUYA - Cara Membuat Fullscreen Halaman Blog Menggunakan 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. 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.

Cara Membuat Fullscreen Halaman Blog Menggunakan Javascript

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>

• DEMO

Cukup Sekian Tutorial Cara Buat Fullscreen Halaman Blog Menggunakan Javascript Yang Bisa Saya Sampaikan Pada Kesempatan Kali Ini, Selamat Mencoba

Sumber :
https://www.kompiajaib.com/2019/05/membuat-fullscreen-halaman-blog-dengan.html

×

Cara Buat Fullscreen Halaman Blog Menggunakan Javascript 5 out of 5