Ana Sayfa Javascript Javascript ile Tam Ekran Blog Sayfası Oluşturma

Javascript ile Tam Ekran Blog Sayfası Oluşturma

12.5.19

JavaScript ile Tam Ekran Blog Sayfası Oluşturma - Tam ekran blog sayfası oluşturulduğunda adres çubuğunu ve tarayıcı sekmesini görmezsiniz, sadece tam ekran sayfa görüntülenir.

Tam ekran modu genellikle bir gömme üzerinde, örneğin bir videoyu veya oyunu gömmek için kullanılır. Ancak bu sefer bir web sayfası için tam ekran modu oluşturacağız.

Ancak, sayfa açıldığında otomatik olarak tam ekran oluşturulmaz, öncelikle tarayıcı sayfanın normal görünümünü oluşturur. Sayfayı tam ekran yapmak için klavye F11 tuşunu veya tam ekran yapma butonuna tıklayarak tam ekran yapma eylemi ile oluşturulmalıdır. Tarayıcılar için en uygun olanı budur.

Mobil cihazlarda, blog açıldığında sayfayı otomatik olarak tam ekran oluşturabilirsiniz. Bunu daha önce yayınladığımız manifest.json ile yapabiliriz . Bir kullanıcı telefonun ana ekranından blogumuzun simgesine tıkladığında, sayfa otomatik olarak tam ekran açılır; bu, kullanıcının blog sitesini bir uygulama gibi, tarayıcının adres çubuğunun blog üzerinde görünmemesini sağlayarak açar.

Masaüstü veya laptop bilgisayarlar için, javascript ile tam ekran blog sayfası oluşturmak için bir buton ekleyebilirsiniz. Tam ekrandan çıkmak için ayrıca bir buton olmalı veya klavyenizin Esc tuşunu kullanabilirsiniz.

Ön İzleme

Blog sitenize sayfaları tam ekran yapma eklentisini eklemek için aşağıdaki adımları takip edin.

Tam Ekran Yapma Butonu ve Tam Ekran Çıkış Butonu CSS Kodu

Tam ekran yapma butonu ve tam ekran çıkış butonu görünümünü ayarlamak için aşağıdaki CSS kodunu kullanın.

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

Tam ekran butonu için CSS kodları arasında işaretlenmiş olan kodları değiştirerek istediğiniz şekilde farklı görünüm elde edebilirsiniz.

Tam Ekran Butonları HTML Kodları

Aşağıdaki HTML kodları kullanmak istediğiniz alana yerleştirin.

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>
Tam Ekran Butonları Javascript Kodu

Aşağıdaki javascript kodunu </body> kodunun bir satır üzerine ekleyin. Javascript kodu Firefox, Chrome, Safari, Opera ve IE/Edge tarayıcıları ile uyumludur.

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>

Tam ekran oluşturma eklentisi ile ilgili daha fazla bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.

Yorum Gönder