Kayıtlar

javascript etiketine sahip yayınlar gösteriliyor

Delta Y Hareketi - JavaScript ile Sayfanın Yukarı veya Aşağı Gittiğini Tespit Etme

jQuery wheel  fonksiyonu ile sayfanın hareket edip etmediğini tespit etmemiz mümkün olmasın rağmen, sayfanın yukarı ya da aşağı kaydığını anlamamız, fonksiyonun ham hali ile mümkün değildir. Bunu yapabilmek için öncelikle mouse orta tuş kaydırma hareketini equalize (eşitleme) ile bir değişkene atamamız ve delta Y hareketini kontrol etmemiz gerekmektedir.         $(function () {             $(window).on('wheel', function (e) {                 var delta = e.originalEvent.deltaY;                 if (delta > 0) {                     console.log("Aşağı Gittim");                 }                 else {                     console.log("Yukarı Gittim");     ...

JavaScript ile Sayfa Çapaları Arasında Gezinmek

Sayfanızda dinamik pozisyona sahip birden çok çapa olması halinde tek bir buton ile arasında gezinmek isteyebilirsiniz. Bu durumda ilk başta tüm ID'leri bir diziye toplamanız ve ardından dizi içerisindeki nesneleri kontrol ederek tek tek gezmeniz gerekmektedir. Örnek kod aşağıdadır:  Not: jQuery dependant yazılmıştır. HTML:     <div style="position:fixed; background: white; border: 1px solid black; right: 15px;">         <a style="cursor: pointer;" id="tiklat">Tıkla ve Zıpla</a>     </div>     <a class="zipla" id="1"></a>     <p style="height: 750px;">Lorem ipsum dolor sit amet...</p>     <a class="zipla" id="2"></a>     <p style="height: 350px">Lorem ipsum dolor sit amet...</p>     <a class="zipla" id="3"></a>     <p style="height: 750px">Lorem ips...

JavaScript ile Sayfanın Sonuna Ulaşınca Event Çalıştırma

Sayfanın sonuna ulaşınca, yani scrollbar dipe gidince bir JavaScript event'i çalıştırmak istiyorsanız aşağıdaki kodu kullanabilirsiniz. document.addEventListener('scroll', function (event) {     if (document.body.scrollHeight ==  document.body.scrollTop +  window.innerHeight) {         alert("Sayfanın sonuna ulaştınız!");     } });

iPhone iOS Bootstrap Modal Hatası

Bootstrap Modal kullanırken sıkılıkla karşılaşılan sorunlardan bir tanesi, Modal penceresinin iPhone'da açılmamasıdır. Kodunuz Masaüstü cihazlarda ve Android telefonlarda çalışırken iPhone'da çalışmamasının nedeni büyük ihtimalle HTML veya CSS kodunuzun cihaz tarafında validasyondan geçememesidir. Bu durum özellikle Modal nesnesini trigger eden elementiniz buton yerine a etiketi ise yaşanır. Birinci Yöntem: Prevent Default Buradaki ilk muhtemel çözüm a etiketinize href vermektir. Bu durumda ortaya linke tıklaınca belirli bir adrese yönlendirme sorunu oluşur. İlk çözüm linkiniz varsayılan davranış biçimini değiştirmektir. $("a.modalaktivasyon").click(function (e) { e.preventDefault(); }); İkinci Yöntem: Void Function İkinci çözüm olarak href ile belirtilen yol olarak boş bir JavaScript çalıştırılabilir. Bu durumda void (boş) olan output, return 0 gibi iş görür v...

HTML'de JavaScript ile DIV Gösteme/Gizleme

Eğer bir <div>'in içerisindeki içeriği belirli bir aksiyona göre değiştirmek istiyorsanız bunun en kolay yollarından birisi, ilgili alanı tamamen gizlemek veya göstermektir. JavaScript ile bu kolayca gerçekleştirilebilir. HTML <nav class="subnav" id="paket">  <ul>   <li><a href="a.html">Referans A</a></li>   <li><a href="a.html">Referans B</a></li>   <li><a href="a.html">Referans C</a></li>  </ul> </nav> <nav class="subnav" id="sektorel" style="display:none;">  <ul>   <li><a href="1.html">Referans 1</a></li>   <li><a href="1.html">Referans 2</a></li>   <li><a href="3.html">Referans 3</a></li>  </ul> </nav> <input type="button" id="bir" v...