Kayıtlar

Arkaplan Resimlerini HTML Validasyonundan Geçirme

Resim
Bilindiği üzere arkaplan resmi olarak çağırdığımız resimler HTML validasyonundan geçmemekte ve alt etkiketi gibi önemli etiketler kullanılamamaktadır. Her ne kadar kullanacağımız resimleri arkaplan resmi olarak çağırmak, kullanıcı tarafında kesme -biçmeyi engelleyerek büyük kolaylık sağlasa da, sabit yükseklik değeri alma zorunluluğundan dolayı developer'ın üzerine yük bindirmekte ve her media query için ayrı ayrı yükseklik yazdırmak zorunda bırakmaktadır. Zira, artı ve eksileri bir yana dursun, ikisini birlikte kullanmak şu mantık ile daha basittir: Bildiğiniz üzere, Bootstrap kendi içerisinde img-responsive adında bir sınıf barındırmakta, bu sınıf ise resimlerimizi bulunduğu konteyner kadar genişlik verdirerek aynı zamanda da yüksekliğini otomatik olarak hesaplatmaktadır. Bu tutorial, Bootstrap'ın bu özelliğini baz almaktadır. Yapacağımız sistemin mantığı, resmi çağırmak ama boyutlarını kaybetmeden görünmez hale getirmek, ardından da dışına bir konteyner oluşturarak, o
Yorum Gönder
Devamı

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");                 }                 /*return false; Sadece sayfa scroll gelmiyorsa aktif edin. Yoksa çalışmayacaktır.*/             });         });
Yorum Gönder
Devamı

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
Yorum Gönder
Devamı

preventDefault Fonksiyonu ile Engellenmiş Nesneyi Yeniden Çalıştırmak

Elimizde bir form olduğunu varsayalım ve çeşitli bir neden dolayı, form nesnesinin gönderilmesini engelledik.  $(".deneme").click(function () {     $("#urunekle").submit(function (e) {         e.preventDefault();     }); }); Bu durumda herhangi bir input nesnesine submit ataması yapsak bile form bir kez engellendiği için çalışmayacaktır. Bu durumda forma bağladığımız submit fonksiyonunu unbind ile silerek yeniden gönderme yapmamız, bu durumu aşmamıza yeterli olacaktır. $("#gonderButon").click(function () {     $('#urunekle').unbind('submit').submit(); });
Yorum Gönder
Devamı

Kendini Tekrarlayan CSS Sınıflarını Silmek

CSS dosyanız çok büyüdüğünde kendini tekrarlayan sınıfları bulmak zorlaşır. Gereksiz yere kendini tekrarlayan sınıfları silebilmek için CSS Purge kullanmanız en iyi çözüm olacaktır. Node.js'nin komut ekranını açın ve ilk başta CSS Purge yükleyin: npm install css-purge -g Arından temizlemek istediğiniz css dosyasını erişimi kolay bir klasöre alın. (Örneğin C:\NodeDosyam) Bu klasöre gidin ve Purge'ü çalıştırın: css-purge -i stilim.css -o stilim_temiz.css Yukarıdaki komutta input kısmına (-i) işlemek istediğiniz CSS dosyasının adını, output kısmına ise oluşturmak istediğiniz, temizlenmiş CSS dosyasının adını yazıyoruz. Not: Bu işlem CSS dosyanızın içerisindeki yorumları da silecektir...
Yorum Gönder
Devamı

RegEx Notlarım

Tüm style etiketlerini seç: style="[^\"]*" İki HTML etiketinin arasını seç: <lastmod>(.*?)</lastmod>
Yorum Gönder
Devamı

WOFF ve WOFF2 Bulunamadı Hatası

WOFF ve WOFF2 font dosyaları yerinde olmasına rağmen tarayıcı tarafından bulunaması, IIS Server'ın bu dosya tipini servis ederken yanlış deklerasyon kullanmasından kaynaklanmaktadır. Sorunun çözümü için sitenizin web.config dosyasını ilgili konfigürasyonu silip doğru bir şekilde seris etmesi için ayarlamanız gerekmektedir. Bunun için  system.webServer düğümüne aşağıdaki kodu eklemeniz yeterli olacaktır.     <staticContent>         <remove fileExtension=".woff" />         <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />         <remove fileExtension=".woff2" />         <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />     </staticContent> 
Yorum Gönder
Devamı