jQuery ile Bağlantılı Geçişli Sayfa – Slick Transition Page with jQuery
Sayfalarınız arasındaki geçişleri direk değil de biraz daha hoş şekilde ayarlayabilirsiniz. http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/ adresindeki makalede okuduklarımı deneyerek bu işelimin çok daha kullanışlı olduğunu söyleyebilirim.
Adım 1 – Html Kodunu Eklemek
Ben örnekte sadece 2 fotoğraf ekleyerek denedim. Sizler farklı linkler ile deneyebilirsiniz.
<a href="index.html" class="trans"><img src="330581.jpg" alt="Resim" /></a>
Burada dikkat etmeniz gereken şey a elemanının sınıfıdır. Ben “trans” isimli bir sınıf kullandım. Birazdan jQuery kod bloğunu yazarken bu sınıfa ihtiyacımız olacak.
Adım 2 – Css Kodunu Eklemek
html { background-color:#000000; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
a { color:#CCCCCC;}
ben genel ve basit bir kullanım yaptım. Projenize göre değiştirebilirsiniz.
Adım 3 – jQuery Çekirdek Dosyasını ve Tetikleyiciyi Eklemek
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').css("display", "none");
$('body').fadeIn(2000);
$('a.trans').click(function(event) {
event.preventDefault();
linkLocation = this.href;
$('body').fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
Body’ e sayfa yüklendiği anda css özelliğini atadık. fadeIn ile 2 saniye içinde yüklettik. Az önce sınıf atadığımız a elemanına bir tıklama işlemi gerçekleşirse eğer işlemi hemen gerçekleştirme dedik. Fakat linkLocation isimli değişkenimize a’ nın href’ ini atadık. Daha sonra ise body elemanına fadeOut işlemini atadık ve 1 saniye içinde kaybolmasını ardından redirectPage fonksiyonunu çalıştırmasını söyledik. redirectPage fonksiyonumuz da linkLocation değişkenine atadığımız hrefi alarak window eylemi ile birleştiriyor. Bu şekilde aynı adres çubuğumuzdaki yol değişiyor ve aynı sayfa içinde işlem yapmamış oluyoruz.
Uygulamaya Ait Örneği Görmek İçin Tıklayınız
Uygulamaya Ait Örneği İndirmek İçin Tıklayınız
Daha detaylı bilgi için -> http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions
jQuery ile Maksimum Karakter Sınırı – Maxlength with jQuery
jQuery ile Maksimum Karakter Sınırı - Maxlength with jQuery
Bir proje içinde kullanıcıların yazacakları alanları sınırlamak gerekiyor. Bunun bir kaç yöntemi var fakat biraz daha süslü ve basit yolunu birazdan anlatacağım. Metin alanlarına veri girişini kısıtlamak için bazı yollar uygulanır. Bunları çoğu sitede görürsünüz. Mesaj yazarken bastığını her tuştan sonra sağda, solda bir yerde rakamlar azalmaya başlar. Karakter sayınızın kalan rakamını verir size. İşte bu olayı şimdi jQuery ile yapacağız.
Adım 1 – Html Kodlarını Eklemek
<div id="Main"> <div id="Alan1"> <textarea rows="5" cols="50"></textarea> <div></div> </div> <div id="Alan2"> <textarea rows="5" cols="50"></textarea> <div></div> </div> </div>
Burada 2 adet farklı sınıflara sahip textarea elemanı oluşturduk. Ve kendi değerlerini atadık. Kolon ve satır olarak.
Adım 2 – Css Kodlarını Eklemek
#Main { width:800px; height:100%; color:#000000; font:Arial, Helvetica, sans-serif 12px;} .Alan1, .Alan2{ border:1px solid #999999; padding:5px;} .KalanKarakter { font-size:12px; font-weight:bold; color:#FF0000; margin-top:10px;} .Uyari {border:3px solid #0066CC; background-color: #FF9900; padding:5px;} span.KalanRakam { color:#000000; font-size:14px;} #Alan2 { margin-top:20px;}
Sınıf atadığımız textarea elemanlarının stil değerlerini girdik ve başka elemanlara da stil atadık. Textarea haricindeki öğeler birazdan ekleyeceğimiz jquery dosyalarının içinde tanımlanmış değişkenlerdir.
Adım 3 – JS Dosyalarını ve jQuery Kod Bloğunu Eklemek
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.maxlength.js"></script>
İlk dosyamız jQuery çekirdek dosyamız ikincisi ise kullanacağımız eklentinin js dosyasıdır. Şimdi oluşturduğumuz textarea öğelerine istediğimiz şekilde çalışmalarını sağlatacağımız jQuery kod bloğunu ekleyelim;
$(document).ready(function(){ $('.Alan1').maxlength({status: true}); $('.Alan2').maxlength({status: true, showAlert: true, slider: true}); });
Alan1 isimli sınıf için maxlength değerini atadık ve yukarıdaki 2. js dosyasında belirtilen değişkenlerden birisi olan “status” isimli elemanın aktifliğini “true” ile belirttik. Bu işlem bize metin alanı içine yazarken ne kadar rakam kaldığını gösterecektir. false değer döndürürsek eğer göstermeyecektir. Alan2 isimli sınıf için ise status değişkeninin haricinde 2 ayrı değişken daha belirttik; showAlert ve slider. showAlert bildiğimiz javascript uyarı ekranı. Belirttiğimiz karakter dışına çıkınca ekranın ortasında uyarı ekranı çıkıyor ve jquery.maxlength.js dosyasının içinde belirttiğimiz uyarı metnini ekrana basıyor. Slider değişkeni ise metin alanına tıklanınca çıkacak olan kalan karakter divi ile ilgili. Örneğe bakarsanız çok daha iyi anlayabilirsiniz.
Uygulamaya Ait Örneği Görmek İçin Tıklayınız
Uygulamaya Ait Dosyaları İndirmek İçin Tıklayınız
Not : Uygulamanın orjinal adresine ->http://www.anon-design.se/demo/maxlength-jquery ulaşabilirsiniz. Ben orjianel dosyalarda bazı değişiklikler yaptım.
jQuery İle DIV Uzunluklarını Ayarlamak – Control DIV Height With jQuery
jQuery İle DIV Uzunluklarını Ayarlamak
Halk firmasına ait bir proje için arayüz kodlamasını yaparken arama sayfasında başıma gelen bir sorunu yazılım şefimiz Kerim ÇALIK ile tartışırken aklımıza geldi bu yöntem. Bazen yan yana duran iki divimiz olduğunda biri diğerinden uzun olabiliyor. Bu durumu yine bazı scriptler ile de çözebiliyoruz fakat jQuery’ nin sloganını hatırlamamızda fayda var “Write less, do more – Az yaz, çok yap”. Aynen bu şekilde birazdan size hazırladığım örneği anlatacağım.
Adım – 1 HTML Kodlarını Eklemek
<div id="Main"> <div class="Sol"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus dui ante. Phasellus aliquet elit in ipsum lacinia porta. In hac habitasse platea dictumst. Morbi condimentum bibendum metus, sit amet dictum neque cursus eget. Sed venenatis tortor in lectus fermentum quis tempor nisi condimentum. Nunc metus arcu, tempor quis laoreet a, vulputate a lorem. Praesent eget tellus erat. Suspendisse porttitor urna risus, nec egestas purus. Ut vitae accumsan risus. Aenean mollis nisl ut tortor porttitor lobortis. Nullam gravida lorem sit amet dui ullamcorper lobortis. Duis vitae lacus a nibh egestas molestie at ut odio. Nulla leo risus, feugiat vel fringilla nec, sollicitudin vel lacus. Sed a commodo sapien. Maecenas aliquet neque ut tellus faucibus viverra. Maecenas in nisi felis. In magna nibh, lacinia vitae pretium in, aliquam ac justo. Nulla enim purus, aliquam non ullamcorper vestibulum, feugiat vel urna. Morbi euismod commodo dolor, sed iaculis risus semper ultrices. Etiam lobortis feugiat ante id sollicitudin. Sed interdum vehicula diam, in rutrum nisl condimentum non. Donec fringilla, magna vel interdum rhoncus, augue lacus ultricies eros, eget pretium ipsum dolor a sem. Aliquam in nisl ut nulla rutrum fringilla. Vestibulum nunc lacus, vestibulum at iaculis quis, sollicitudin gravida mi. Ut eros mauris, tempor sed congue vitae, dapibus non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eu erat eget nisi facilisis suscipit non a sapien. Fusce ultrices lectus ut magna gravida pulvinar. Proin quis nunc in ipsum porta commodo nec in elit. Donec mollis elit ut sem tincidunt condimentum sollicitudin mauris interdum. Aliquam erat volutpat. Praesent pharetra nisi vitae eros adipiscing et molestie massa molestie. Etiam aliquam, nunc vel condimentum vestibulum, lectus quam lobortis erat, nec lacinia lectus ligula at enim. Proin blandit dignissim risus a eleifend. Maecenas aliquam rutrum gravida. Pellentesque dictum, diam nec elementum vehicula, nunc odio sollicitudin turpis, in luctus dui leo vel turpis. Curabitur vestibulum rutrum leo et luctus. Donec auctor risus tempus lorem lacinia at aliquet turpis eleifend. Curabitur id lacus nunc. Sed ac est nunc, vitae ultrices neque. Cras purus eros, accumsan at congue sit amet, facilisis vel eros. Etiam sagittis mattis egestas. Aliquam vitae facilisis massa. Fusce vel leo quis felis vulputate pretium. Etiam laoreet nisi in augue rutrum pulvinar. Praesent luctus mattis sapien sed faucibus. Nulla eu ipsum sapien. Donec non diam est. </p> </div> <div class="Sag"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus dui ante. Phasellus aliquet elit in ipsum lacinia porta. In hac habitasse platea dictumst. Morbi condimentum bibendum metus, sit amet dictum neque cursus eget. Sed venenatis tortor in lectus fermentum quis tempor nisi condimentum. Nunc metus arcu, tempor quis laoreet a, vulputate a lorem. Praesent eget tellus erat. Suspendisse porttitor urna risus, nec egestas purus. Ut vitae accumsan risus. Aenean mollis nisl ut tortor porttitor lobortis. Nullam gravida lorem sit amet dui ullamcorper lobortis. Duis vitae lacus a nibh egestas molestie at ut odio. Nulla leo risus, feugiat vel fringilla nec, sollicitudin vel lacus. Sed a commodo sapien. Maecenas aliquet neque ut tellus faucibus viverra. Maecenas in nisi felis. In magna nibh, lacinia vitae pretium in, aliquam ac justo. Nulla enim purus, aliquam non ullamcorper vestibulum, feugiat vel urna. Morbi euismod commodo dolor, sed iaculis risus semper ultrices. Etiam lobortis feugiat ante id sollicitudin. Sed interdum vehicula diam, in rutrum nisl condimentum non. Donec fringilla, magna vel interdum rhoncus, augue lacus ultricies eros, eget pretium ipsum dolor a sem. Aliquam in nisl ut nulla rutrum fringilla. Vestibulum nunc lacus, vestibulum at iaculis quis, sollicitudin gravida mi. Ut eros mauris, tempor sed congue vitae, dapibus non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eu erat eget nisi facilisis suscipit non a sapien. Fusce ultrices lectus ut magna gravida pulvinar. Proin quis nunc in ipsum porta commodo nec in elit. Donec mollis elit ut sem tincidunt condimentum sollicitudin mauris interdum.</p> </div> <div class="Clr"></div> </div>
Çok basit şekilde bir genel kapsayıcı ve içine de iki div yerleştirdik. Sol ve Sag isminde. Şimdi bunların bir de stillerini verelim;
Adım 2 – Css Kodlarını Eklemek
#Main { width:800px; height:100%; margin:0 auto; background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;}
.Sol { float:left; display:inline; width:630px; height:100%; background-color:#0099FF; color:#FFFFFF; margin-right:5px; padding:0px 10px;}
.Sag { float:left; display:inline; width:125px; height:100%; background:#CC6633; color:#FFFFFF; padding:0px 10px;}
.Clr { clear:both;}
Gördüğünüz gibi çok basit bir şekilde hemen stilleri ekleyip ön görünümü tamamladık. Burada dikkat etmeniz gereken bir kısım var; her iki divin de yükseklikleri 100% verilmiş durumda. Fakat biz birazdan bunları birbirlerinden yükseklik alacak şekilde ayarlayacağız. .Clr sınıfı kafanızı karıştırmasın, genel kapsayıcının tüm divleri kapsaması için float elemanlarını temizleyen bir sınıf o. Çok sık kullanırım 
Adım 3 – jQuery Dosyasını ve Kodlarını Eklemek
<script src="jquery.min.js" type="text/javascript"></script>
scriptimizi dosyamıza ekledik ve okuttuk. Şimdi istediğimizi yapması için bazı yönergeler göndereceğiz;
<script>
$(document).ready(function () {
if($(".Sag").height()>$(".Sol").height()) {
$(".Sol").height($(".Sag").height());
}else{
$(".Sag").height($(".Sol").height());
}
});
</script>
İlk kod bloğumuzda eğer ki Sag isimli divin yüksekliği Sol isimli divden büyük ise Sol’ un yüksekliğini Sag kadar yap dedik daha sonra değilse ifadesi ile tam tersi bir işlem döndürdük. Bu işlem sizi bir çok dertten kurtaracaktır eminim. Çünkü beni kurtardı.
Dizüstü Nasıl Masaüstü Olur?
3 gün önce başladı ekran kendiliğinden gitmeye. Açılıyor görüntü geliyor 10 saniye sonra gidiyordu. HP Teknik Servis Müdürlüğüm zamanlarından kalma bilgilerim ile hemen dizüstü bilgisayarımı açıp kurcalamaya başladım. Evde alet edevat çok olmadığından sorunu anlamak zaman aldı. Orası burası derken keşfettim; lcd ekranın florasan sistemi yanmış. O ekranın gelme olayı da içindeki gazın bitmesinden oluyormuş.
Sordum soruşturdum aynı modelin parçalarını satan var mı falan diye, buldum ama biraz pahalı geldi. Bilgisayarcıları aradık onların verdiği rakamlar da altta kalmadı hani. Acil işlerim olduğu için ben de hiç beklemedim ev arkadaşım izmirde olduğundan onun ekranı kaptım. Gittim kendime klavye, mouse aldım.
Ekranı taktım sistemden ayarladım. Klavye ve mouse olayını da takınca mis gibi bir sistem oldu. Masaüstü görünümlü disüstü bilgisayar
CSS Kodlarken İşinize Yarayacak İpuçları
Css İpuçları
Css kodlamasına yeni başlayanlar ya da kendini geliştirmek isteyen arkadaşlar için kendimce bazı ipuçları vermek istedim. Neler yapıyorum, nelere dikkat ediyorum, hangi kurallara göre yazıyorum v.b şeyler hakkında maddelerden oluşan ve anlatımları bulunan bir yazı olacak birazdan okuyacağınız bu yazım. Umarım işinize yarayabilir
1) Ayrı bir dosya oluşturun
Ayrı dosya oluşturmaktan kastım yazacağınız stil kodlarınız aynı html dosyası içinde olmasın. Şöyle ki;
<style type="text/css"></style>
bu kullanım aynı dosya içine head etiketi arasına stil değişkeni açarak stil değerleri atamaya yarar. Bu şekilde kullanımı tek sayfalık projeler için kullanabilirsiniz. Diğer türlü ayrı bir css dosyası oluşturup şu şekilde sayfanıza ekleyebilirsiniz;
<link rel="stylesheet" type="text/css" charset="utf-8" href="css-dosya-yolunuz" />
2) Satır içi kodlama yapmayın
Bir üstteki madde ile çok benzeyen bu yöntem şu şekilde kullanılır ve kötü bir görüntü oluşturur. Ben bu tarz kullanım yerine stil vereceğiniz elemana bir id veya sınıf atamayı tavsiye ederim.
<p style="color:#999999; margin-left:10px; font-size:16px;">kadirgunay.com</p>
Bu şekilde yapacağımıza p elemanına bir sınıf atayabilir ve genel css dosyamızda değer verip kullanabiliriz.
3) Tek satır kodlama yapmaya dikkat edin
Tek satır kodlamadan kastım şudur; stil kodlarınızı yazarken genel kullanılan yöntem her bir değer kodu yazıldıktan sonra satır atlanması ve diğer değerin alta yazılmasıdır. Örnek;
p { color:#666666;
font-size:16px;
margin-left:10px;
}
Bu hem stil dosyanızı uzatacak hem de boyutunu arttıracaktır. Bunun yerine şu şekilde yapabilirsiniz;
p { color:#666666; font-size:16px; margin-left:10px; }
4) Sık sık yorum kullanın
Her yazılım dilinde yorum olayı vardır. Neyin ne olduğunu, ne için yapıldığını anlatan kısa uyarılardır bunlar. İşte css kodlamasında da hangi bölümü ne için kodladığınızı anlatmak için şu şekilde bir yorum kullanımı yapabilirsiniz;
/* tüm p elemanları için verilen değerler */
p { color:#666666; font-size:16px; margin-left:10px; }
/* */ işaretleri css kodlamasının yorum değerlerdir.
5) Genel stilleri ve renk stillerini en üste yazın
Sayfanızda kullanacağınız genel bağlantı stillerini, renk stillerini ve genel elemanların ortak stillerini sayfanızın en üstüne yazın. Bu yöntem size hem zaman kazandıracaktır hem de kod kalabalığı yapmayacaktır. Bu değerleri yorum şeklinde de ekleyebilirsiniz. Örnek vermek gerekirse tüm porojede h1 elemanın renkleri sarı, boyutu 14px ve altı çizili olacaksa bunu bir kez yazmanız yeterli olacaktır. Veya birden fazla renk kullanacaksanız bu renklerin nerelerde ne olduğunu yorum alanı içine yazarsanız sürekli tasarıma dönüp bakmak zorunda kalmazsınız.
6) Kısa kod yazmaya gayret edin
Kısa kod mantığım benim şudur; eğer bir elemanın bir özelliği bir kaç değer alıyorsa ayrı ayrı yazmak yerine hepsini bir satırda yazıp çıkarabilirim. Örnek;
.Div200px { background:#000 url(arka plan resminin yolu) no-repeat top left;}
Aynı kodlamayı bir de uzun şekilde yapalım ne dersiniz?
.Div200px { background-color:#000000; background-image:url(arka plan resminin yolu); background-position:top left; background-repeat:no-repeat;}
Her bir özellik için ayrı ayrı kod yazdık. Oysa ki hepsini bir özellikte toplayıp çıkarabiliriz.
7) Tekrar yapmayın
Bir elemana stil değeri atadınız ve devam ettiniz. Aynı elemana ilerleyen kısımlarda yeni bir stil değeri atamayın çünkü html sayfalar son atanan değerleri baz alarak ekrana basar.
Birden fazla sınıf kullanabilirsiniz
Bu konu aslında biraz karışık gelebilir fakat hiç de öyle değildir. Bu kullanımda dikkat etmeniz gereken tek şey sistematiği iyi oluşturmak ve kurgulamaktır. Bir elemana birden fazla sınıf verebilirsiniz fakat sınıflarınız sırayla işler. Eğer birden sonra kullandığınız sınıflar ilk sınıfın değerlerini ezerse işte o zaman iş tamamen çöp olur. Daha basit bir örnekle anlatırsak;
<div class="Div300px">300px</div>
300px isimli bir sınıfım var ve ben bunu bir div e atadım. Bu div 300px sınıfının özelliklerini aldı. Ama ben istiyorum ki daha önce oluşturduğum ve başka özelliklere sahip sınıfları da atayayım;
.KirmiziRenk { color:#FF0000;}
.Koyu { font-weight:bold;}
.Div3000px { float:left; display:inline; width:300px; height:300px; overflow:hidden; background-color:#FFFFFF;}
Sınıflarım hazır. Şimdi atayabilirim;
<div class="Div300px Kirmizi Koyu">300px</div>
Bu şekilde bu div içinde yer alan elemanlar sırayla verdiğim sınıfların özelliklerini alacaklar. Ben bu yöntemi genelde margin ve padding ayarlarını kullanırken uyguluyorum.
9) Framework yani çatıları kullanmaya gayret edin
Css kodlaması yaparken css frameworkleri kullanmaktan çekinmeyin. Bu çatılar hem işini kolaylaştıracak hem de sizin gözden kaçırdığınız yerleri, konuları kapatacaktır. Çatılar ile ilgili yazımı okumak için buraya tıklayın
jQuery İmaj Menu – jQuery Image Menu
jQuery Image Menu - jQuery İmaj Menü
Faruk kardeşimiz sitesinde bir uygulama başlatmış; “Konuk Yazar“. Bu ugulama dahilinde benim de yazarlık yapmamı istedi, ben de kendisini kıramadım ve kendi siteme yazacağım bir makaleyi onun için yazacağımı belirttim. Şansına yazacağım makaleler klasöründeki jQuery İmaj Menü isimli yazıyı yazdım ve yolladım. Aynısını alıp buraya eklemek istemedim. Fakat sitemi takip edenler için de yayımlamamak olmazdı. Onun için ben de buraya kısa bir yazı ekleyip bağlantıyı vermek istedim.
Yazıya ulaşmak için buraya tıklayın