Tarayıcı Backspace Tuşunu Engellemek

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

jQuery Validation Ondalıklı Sayı (Double) Sorunu

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.

Okumaya devam…

Telerik MVC DatePicker ve Jquery Validation Uyumsuzluğu

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.


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

Div içerisinde Pencerenin Scroll İşlemini Engellemek

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.


$('.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();
});

ASP.Net Update Panel Postback Sonrası Javascript Çalışmaması

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.

Okumaya devam…

jQuery ile Dinamik Eklenen Nesnelere Ulaşmak

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.

Okumaya devam…

Javascript/Jquery Türkçe Uyumlu Seo Url Hazırlamak

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.

Okumaya devam…

Sayfadaki Tüm Resimlere Lightbox Eklemek

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 ? Okumaya devam…

jQuery Wrap Kullanımı (Parent Ekleme)

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.

<h1>Merhaba Dünya!</h1>

Okumaya devam…

HTML5 Data Attribute

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.

Okumaya devam…