Bazı servislerde yayınlanan özel içerikler kopyalanamaz duruma getirilmektedir. Özellikle e-posta veya kullanıcı adı gibi kişisel bilgiler kopyalamaya karşı korunmak amacıyla resim olarak gösterilir. Bu işlemin Jquery yardımıyla  gerçekleşmesini inceleyeceğiz.

Bir Jquery eklentisi olan pir ile sayfa yüklenirken aynı anda tanımlanan html elementleri içindeki metini resime dönüştürüyor.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.pir.min.js”></script>
<script type=”text/javascript”>
$(function() {
$.pir.options.php=”pir.php”;
$(“h1″).pir({font: “verdana.ttf”, wrap: [...]

Web sitelerimizde bir sayfada birden çok bölümün olmasını isteyebiliriz. Bu bölümlerin nasıl ve ne şekilde sıralanacağı yani düzeni önemlidir. Jquery tab uygulaması ile birden çok bölümün istediğimiz css özelliklerine göre yerleştirilmesini ve içeriğini oluşturmayı bu örneğimizde ögreneceğiz.
İlk Olarak jquery dosyamızı sayfamıza dahil ediyor.
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
Sayfamızda kullanacağımız css kodlarını aşağıdaki şekilde kodluyoruz.
<style type=”text/css”>
body { margin:50px 0; [...]

Bu uygulama ile açılır kapanır bir bölüm yapacagız örnegin sitemiz bir kitap sitesi ve arama yapıldıgında kitap yazarı, yayın evi ve kitap adı sonuçları sorgulanıp ekranımıza dökülüyor. Bu verilerin hepsi aynı anda ekrana dökmektense 3 bölüme ayırıp her birinin üzerinde yer alan ana başlıga tıkladığımızda gizlenmesini ve geri tıklandıgında açılması sağlamak kullanıcılar açısından kullanım kolaylıgı [...]

Web sitelerimizde yer alan bilgilerin kopyalanmasını önlemek istediğimizde önlemler almamız gerekebilir. Örneğin eposta tekrarında kullanıcının kopya yapıştır yapmasını istemiyoruz. Bu örneğimizde textleri image olarak göstermeyi öğreneceğiz. h1, h2, h3 ve spam elemetleri içerisindeki verileri resime dönüştürüyoruz.
Sayfamız yüklenirken tanımlanan elementlerin resime çevriliyor.

<script type=”text/javascript” class=”active”>

$(function() {

    $.pir.options.php=”pir.php”;

    $(“h1″).pir({font: “verdana.ttf”, wrap: true});

    $(“h2″).pir({font: “verdana.ttf” , wrap: true}); [...]

Web sitelerine kayıt olurken;  username girişi sırasında anında kontrol edilmesini, veri tabanında eşleşen bir username olup olmadığını kontrol etmek isteyebiliriz. Bu örneğimizde, username, rumuz, eposta gibi bilgilerin sistemlere kayıt olurken kontrol ve uyarılarını öğreneceğiz. Örneğimizde username tablosundaki rumuz eşleşmesi olup olmadığını kontrol edeceğiz.
Proje dosyalarını indir.
İlk olarak index.php kodlarımızdan başlayalım.
< !DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 [...]

Bu uygulamada bazı web sitelerinde görülen sayfa altına scroll edilince yeni verilerin Ajax ile yüklenme olayını inceleyeceğiz. Örnek site için sortfolio.  Bu uygulama ile sayfa hareketine göre verilerin daha düzenli ve verimli kullanılmasını sağlıyoruz. Tabi ki sunucu performansından büyük tasarruf  ediyoruz.

Bu uygulama demosu için de daha önce kullandığım mysql.php database class yapısını kullandım. En kısa [...]

jQuery ve CSS kullanılarak hazırlanmış bir klavye uygulaması.
Bazen bildiğimiz programlama dilleri ile oynamak eğlenceli olabiliyor. CSS , online klavye oluşturmak için güzel olabilir, ve sonra jQuery ile çalışmasını sağladık düşündüm. Klavye tuşlarını işlemleri içermektedir.
HTML kodlarımız
Css kodalarımız
* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
#container {
margin: 100px auto;
width: 688px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: [...]

Twitter iletilerinizi websitelerinizde yayınlamak için Twitter resmi widget sayfasındaki sihirbazı kullanmak gerekiyordu. Bu uygulamada inceleyeceğimiz Jquery eklentisi ile birlikte istediğimiz ölçülerde ve özellikte twitter iletilerimizi listeleyebilirsiniz.
Öncelikle bu adresten Jquery Twit eklenti dosyalarını indirin. Zip klasörünün içinde gerekli olan javascript dosyası ve stil dosyası bulunmaktadır.
Kurulum aşamasını atlamak için serpito tarafından derlenen çalışır haldeki uygulamanın [...]

Çeşitli form doğrulama aracı kullanmama rağmen. Bi’türlü aradığım aracı bulamamıştım. Bu jquery eklentisi; bu arayışa son verdi. Eklenti’nin öne çıkan özellikleri;

Hata ve uyarı görüntüleme yöntemi çok şık. Çoğru zaman dar form alanlarına uyarı eklendiğinde formun görüntüsü bozuluyordu. Bu eklenti uyarı ve hataların görüntülenmesinde  “position:absolute” değeri kullandığı için. Bir hata verdiğinde formun hiçbir yerinde kayma veya [...]

Web sistemlerimizde yer alan iletişim formlarını jquery ve ajax ile daha görsel ve kullanışlı bir hale getirebiliriz. Bu örneğimizde buton veya linke tıklanıldığında iletişim formumuz ekrana geliyor ve gerekli alanların doğruluk kontrolü yapılarak eposta yoluyoruz.Bu iletişim formu SimpleModal üzerine kurulmuştur. OnOpen, onShow ve onClose geriçağırımlarının kullanımı yanı sıra SimpleModal ile Ajax kullanımı gösterir.
İndex.html kodlarımız
<!DOCTYPE html [...]