Ditulis oleh: Ditulis pada: 5/10/2019
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>Selamat mencoba dan berkreasi.