Varsayılan olarak tarayıcılarda eğer bir input üzerinde değilseniz backspace (geri silme) tuşuna bastığınız da bir önceki sayfaya gider. Eğer bir sayfa üzerinde çalışıyorsanız yanlışlıkla backspace tuşuna basmak verilerinizin kaybolmasına sebep olabiliyor. Bu durumu engellemek için aşağıdaki jquery kodunu layout (master) sayfanıza ekleyebilirsiniz.
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input, textarea")) {
e.preventDefault();
}
});tr-TR Culture tabanlı bir sistemde jQuery Validation ile NumericTextbox lar üzerinden ondalıklı sayı (double veya decimal) almak istediğinizde ayırma işlemini virgül ile yapmaya çalışırsanız input validation’a takılıyor ve sayfanın post etmesini engelliyor. Eğer virgül yerine nokta kullanırsanız bu sefer post işlemi gerçekleşiyor ancak tr-TR culture yapısına uygun olmadığından değeriniz 0 (sıfır) olarak gelebiliyor.
Telerik MVC Kendo UI DatePicker ile Jquery Validation kullandığınız da eğer ilgili input’ a default (varsayılan) bir değer atıyorsanız Jquery Validation bunu algılamıyor ve hata fırlatıyor.
Aşağıdaki kodu layout (master) sayfanıza ekleyerek tüm projenizde bu sorundan kurtulabilirsiniz.
[javascript]
<script type="text/javascript">
// Kendo UI ile Jquery Validation arasında yaşanan sorunu çözer.
// Ör: DatePicker default value atanmasına rağmen boş görmesi…
$(document).ready(function () {
jQuery.validator.addMethod(
‘date’,
function (value, element, params) {
if (this.optional(element)) {
return true;
};
var result = false;
try {
var date = kendo.parseDate(value, "dd.MM.yyyy");
result = true;
if (!date) {
result = false;
}
} catch (err) {
result = false;
}
return result;
},
”
);
});
</script>
[/javascript]
Konu başlığı çok saçma oldu ama başka nasıl açıklayabilirim bilemedim :)
Bir div veya bir alan içerisinde scroll (kaydırma) işlemi yapılırken sayfanın scroll olması (kayması) bazen sinir bozucu olabiliyor.
Aşağıdaki kodu sayfanıza ekledikten sonra sayfa scroll’unu engellemek istediğiniz div veya başka html elemanına block-window-scroll class’ını vermeniz yeterli olacaktır.
[javascript]
$(‘.block-window-scroll’).bind(‘mousewheel DOMMouseScroll’, function (e) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
[/javascript]
ASP.NET Web Forms kullananlar bilirlerler update panel içerisinde bir postback işlemi gerçekleştirdiğimizde (butona tıklama, dropdown seçme işlemi vb.) update panel içerisinde kullanılan javascript ve jquery kodlarımız çalışmaz hale gelir. Hatta jquery ile checkboxlarımıza vs. stil verdiysek onlarda kaybolur ve tüm hevesimiz kaçar :(
Yıllardır yaşadığım bu problemle ilgili nihayet bir çözüm bulabildim, AspSnippets üzerindeki şu makale de çözümünü anlatmışlar. Bende kendimce Türçe’ye çevirerek açıklayacağım.
Javascript/Jquery ile sayfanın temel HTML kodlarında olmayan ancak sonradan eklediğimiz nesnelere class veya id tanımlasak dahi ulaşamıyoruz. Bu DOM yapısıyla alakalı. DOM’un detaylarına girmeyip kısaca çözümünü anlatacağım. HTML DOM ile ilgili internette onlarca makale mevcut, araştırabilirsiniz :)
Dinamik nesnelere jQuery’nin eski versiyonlarında “live” methodu ile erişiyorduk, bu method en son jQuery 1.7 versiyonunda kullanıldı ve 1.9 ile tamamen kaldırıldı. Bunun yerine “on” methodundan faydalanacağız.
Sayfa adreslerinde Türkçe karakter kullanmak bazı tarayıcılar tarafından ve özellikle arama motorları tarafından büyük problemler ortaya çıkarıyor. Bunu düzeltmek için sayfa adreslerimizdeki karakterlerde replace işlemi yaparak Türkçe’ye özgü karakterleri ve özel karakterleri yok etmemiz gerekiyor.
Kendi hazırladığım ToSeoUrl methodunu kullanabilir, ihtiyacınıza göre genişlebilirsiniz.
Normal bir kullanımda Lightbox veya alternatif bir javascript/jquery eklentisi kullanırken tıklandığında zoom etkisi oluşturmak istiyorsak, ilgili resimlere tek tek <a tagi vermek ve buna data-lightbox attribute’ ü de eklemek zorundayız.
Eğer veriler veritabanından veya başka bir veri kaynağından geliyorsa repeater veya döngü ile hepsine tek tek bu özelliği vererek çözüm üretmemiz mümkün. Peki kullanıcı/müşteri bir editör üzerinden resim yüklerse ve yeterli html bilgisi yoksa ne yapacağız ? (daha&helliip;)
jQuery kütüphanesinde bu zamana kadar varlığından haberdar olmadığım “wrap” diye bir method varmış :) Bu method herhangi bir html elemanına bir üst eleman yani parent eleman eklemek istediğimizde bize büyük kolaylık sağlıyor.
Örnek vermek gerekirse aşağıdaki bir h1 elemanım var diyelim.
[html]<h1>Merhaba Dünya!</h1>[/html]
Bu yazımca kısaca HTML5 ile birlikte gelen data attritube kullanımından bahsedeceğim.
Bu attribute sayesinde HTML elemanları üzerinde (div, button, input vb.) istediğiniz bir veriyi(datayı) tutabiliyorsunuz.
Data atrritube kullanımı şu şekildedir.
data-data_adi=”data_degeri”
“data-” yazımından dan sonra oluşturacağınız data attribute’e istediğiniz bir ismi verebilir ve içerisine string formatında istediğiniz veriyi doldurabilirsiniz. Bir html elemanı üzerinde istediğiniz kadar data attribute kullanabilirsiniz. Tanımlama yaparken büyük harf kullanmamaya özen gösteriniz, yazım standartlarına aykırı ve bazen çalışmayabiliyor.
