Javascript ile Popup Yazı Önerme

Javascript ile popup yazı önerme işleminin nasıl yapıldığını detaylıca inceleyeceğiz. Bu işlem için ham javascript kodlarını kullanacağız. Javascript konusunda eksiklerinizin olduğunu düşünüyorsanız, udemy’de hazırlamış olduğum A’dan Z’ye Kapsamlı Javascript Eğitim Seti kursunu inceleyebilirsiniz.

Bu işlemi sağlayabilmek için ilk olarak sayfanın scroll uzunluğunu hesaplamak gerekiyor. Sonrasında bu değeri en alta yaklaştığımızı anlayacağımız şekilde kontrol ediyoruz. Bu işlem, bizim iskeletimizi oluşturacaktır. İskelet içerisinde kullanacağımız kontrol ifadesinde gösterilmesini ve gizlenmesini ayarlayacağız.

window.addEventListener("scroll", function(){
    var pencereYuksekligi       = window.innerHeight;
    var kaydirilanBolum         = window.pageYOffset;
    var bodyYukseklik           = window.document.getElementsByTagName("body")[0].offsetHeight;
    var toplam                  = bodyYukseklik - pencereYuksekligi;
    var kaydirilmis             = parseInt((kaydirilanBolum/toplam) * 100);
    
    if(kaydirilmis > 85){
        
    }else{
        
    }
}, false);

Yukarıda yer alan kodlarda, scroll’un hareket etmesiyle birlikte çalışacağı kod bloğunu oluşturduk. Burada yükseklik değerlerini alarak bir hesaplama yapıyoruz. Hesaplama sonunda %85’lik dilimin altına inildiğinde gösterilmesi gerekilen alanı IF bölümünde ayarladık. ELSE kısmıysa, gösterilmeyecek alanı göstermektedir. Javascript ile Popup işlemini bu iskelet doğrultusunda hazırlıyor olacağız.

Javascripti ile Sağ Alt Köşede Popup Yazı Önerme

Yukarıda yer alan iskeletin üzerinde gerekli düzenlemeleri yapalım. Ardından HTML alanını ve CSS bölümünü de hazırlayarak çalışır bir hale getirelim. Javascript kodlarını, pencerenin ne zaman gösterileceğine göre ayarlıyoruz.

<script>
    window.addEventListener("scroll", function(){
        var pencereYuksekligi       = window.innerHeight;
        var kaydirilanBolum         = window.pageYOffset;
        var bodyYukseklik           = window.document.getElementsByTagName("body")[0].offsetHeight;
        var toplam                  = bodyYukseklik - pencereYuksekligi;
        var kaydirilmis             = parseInt((kaydirilanBolum/toplam) * 100);
        
        if(kaydirilmis > 85){
            document.getElementById("popup-cover").style.right  = "0px";
            document.getElementById("popup-cover").style.bottom = "-10px";
        }else{
            document.getElementById("popup-cover").style.right  = "-250px";
            document.getElementById("popup-cover").style.bottom = "-250px";
        }
    }, false);
</script>

<style>
    .popup-cover{right:-250px;bottom:-250px;position:fixed;margin-left:-10px;width:250px;-webkit-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;transition:all 1s}
    .popup{background-color:#fff;border:5px solid #93b874;border-right:none;border-bottom:none;border-radius:150px 150px 0 150px;height:160px;margin-bottom:0;padding:40px;text-align:center;clear:both}
    .popup .close{font-size:14px;position:relative;float:right;text-decoration:none}
</style>

<div id="popup-cover" class="popup-cover">
    <div class="popup">
        <a class="close" href="javascript:popup_close();">&#10006;</a>
        <h3>Açılır POPUP</h3>
        <p>ibrahimcevruk.com</p>
    </div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Bu şekilde kodları düzenlediğiniz, sağ alt köşede açılır bir popup hazırlamış olacaksınız. Buradaki mantık, ilk kodlarda yer alan hesaplamadan doğmaktadır. Bu hesaplamayı dilediğiniz gibi düzenleyerek scroll durumuna göre işlemlerinizi sağlayabilirsiniz.