Aycan BÜLBÜL – Sayfa 23 – aycan.net

jQuery fadeTo

fadeTo görselliğe önem veren webtasarımcılar için artık vazgeçilemeyecek bir elementdir.
fadeTo ne işi yapar ?
Hepimizinde css’deki vazgeçemeyeceğimiz opacity elementinin jQuery kütüphanesinde yazılmış ve animasyonlu halidir. Tüm tarayıcılarda sorunsuz bir şekilde çalışır ve ziyaretçilerimiz efekti anlayamazlar ama çok hoşlarına gidecektir. fadeTo elementini kullanmak çok basit sadece hangi bölgedeki resimlere efekt verebileceğimizi jQuery dosyamızda belirteceğiz bu arada herkez jquery.js dosyasını index.html’sine entegre edeceğini biliyordur.

Öncelikle html dosyamızı yazıyoruz.

<h1 class="MahsetHaber">Mahşet Haberler</h1>
<div class="MahsetHaberIcerik">
<ul>
<li>
<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"
onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>
</li>
<li>
<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>
</li>
<li>
<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>
</li>
<li>
<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"
onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>
</li>
</ul>
</div>

<h1 class="MahsetHaber">Mahşet Haberler</h1>

<ul>

<li>

<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"

onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>

</li>

<li>

<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>

</li>

<li>

<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>

</li>

<li>

<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"

onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>

</li>

</ul>

</div>

Html kısmında h1 yani başlığımızı koyduk sonra bir .MahsetHaberIcerik diye bir div oluşturduk ve içine listemizi koyduk.

Şimdi Css dosyamızı yazalım.

.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }
.MahsetHaberIcerik{width:500px; overflow:hidden; }
.MahsetHaberIcerik ul{ list-style: none; }
.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }

.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }

.MahsetHaberIcerik{width:500px; overflow:hidden; }

.MahsetHaberIcerik ul{ list-style: none; }

.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }

Css kısmında MahsetHaber ile h1 tagımızın özelliğini belirledik .MansetHaberIcerik kısmında div’imizin boylarını belirledik sonra ul ve li’leri tanımladık.
Şimdi jQuery komutlarımızı yazalım

$(document).ready(function ()
{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);
})

function ResimGoster (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 1);
}
function ResimKapat (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 0.50);
}

$(document).ready(function ()

{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

})

function ResimGoster (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 1);

}

function ResimKapat (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 0.50);

}

Js kısmında (en önemli kısım) burada

$(document).ready(function () ) { ...}

1	$(document).ready(function () ) { ...}

Sayfa yüklendiğiden şunları yap

$('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

1	$('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

.MahsetHaberIcerik divinin içindeki ul’un içindeki li’nin içindeki img yani resimleri bul ve opacity değerini 0.50 yap.

function ResimGoster (ResimId) { $('#' + ResimId).stop().fadeTo("fast", 1); }

1	function ResimGoster (ResimId) { $('#' + ResimId).stop().fadeTo("fast", 1); }

Resimlerin üstüne geldiğinde üstüne gelen resimin id’sini al ve opacity değerini 1 yap.

function ResimKapat (ResimId) { $('#' + ResimId).stop().fadeTo("fast",0.50); }

1	function ResimKapat (ResimId) { $('#' + ResimId).stop().fadeTo("fast",0.50); }

Resimlerin üstüne geldiğinde üstüne gelen resimin id’sini al ve opacity değerini 0.50 yap.

Js dosyamızında nasıl çalıştığını anlattım.

Komple Html dosyamız.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Aycan.Net fadeTo"/>
<meta name="keywords" content="Aycan.Net fadeTo"/>
<meta name="ROBOTS" content="FOLLOW, INDEX"/>
<title>Aycan.Net fadeTo</title>

<script type="text/javascript" src="jquery.js"></script>

<script>
$(document).ready(function ()
{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);
})

function ResimGoster (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 1);
}
function ResimKapat (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 0.50);
}
</script>
<style>
.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }
.MahsetHaberIcerik{width:500px; overflow:hidden; }
.MahsetHaberIcerik ul{ list-style: none; }
.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }
</style>
</head>
<body>
<h1 class="MahsetHaber">Mahşet Haberler</h1>
<div class="MahsetHaberIcerik">
<ul>
<li>
<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"
onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>
</li>
<li>
<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>
</li>
<li>
<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>
</li>
<li>
<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"
onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>
</li>
</ul>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Aycan.Net fadeTo</title>

$(document).ready(function ()

{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

})

function ResimGoster (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 1);

}

function ResimKapat (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 0.50);

}

</script>

<style>

.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }

.MahsetHaberIcerik{width:500px; overflow:hidden; }

.MahsetHaberIcerik ul{ list-style: none; }

.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }

</style>

</head>

<body>

<h1 class="MahsetHaber">Mahşet Haberler</h1>

<ul>

<li>

<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"

onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>

</li>

<li>

<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>

</li>

<li>

<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>

</li>

<li>

<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"

onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>

</li>

</ul>

</div>

</body>

</html>

jQuery fadeTo

Web yazılım & tasarım programları

Merhaba arkadaşlar her css – php – jquery yazılımları yapan webmaster arkadaşların bilgisayarında olması gereken ücretsiz kaliteli programları anlatacağım bu makalemde.

Öncelikle web yazılım ile uğraşankar için Sun ‘ın yaptığı bir programdan bahsetmek istiyorum.

Netbeans :

Her webmaster gibi bende web sitesi yapma işlerine frontpage ile girdim sonra modaya ayak uydurmak için dreamweaver programına geçtim, dreamweavera alışmam 2 gün sürdü ama sonunda professiyonellik bu dedim çünki o zamanlar sadece statik siteler yapıyordum ve dreamweaver bana verebileceği herşeyi veriyordu ama sonra php yazmaya başlayınca dreamweaver kaynak kodumu patlatıp duruyordu bu sorunları notepat ++ programı ile aşşamda sonunda hiç bir kodu öğrenemediğimi anladım çünki dreamweaver’da herşeyi görsel olarak yapıyordum php kodlarını direk kopyalayıp yapıştırıyordum ve böyle kendimi iyice körelttim. Sonra web yazlım şirketinde işe başladım ordan bi arkadaş Netbeans programını önerdi bende indirdim kurdum alışmam 2-3 gun sürsede şimdi artık bir web sitesinde olması gereken bütün komutları baştan sona yazıyorum ve bu gittikçe insana haz veriyor.

Netbeans programı özellikleri her türlü yazılımı destekliyor Java SE JavaFX Java Web ve EE Java ME Ruby C/C++ Groovy Php Css. Ayrıca program her web yazılımında bir proje klasörü oluşturuyor ve bütün dosyalara sol tarafdan ulaşabiliyoruz bunlara rağmen tamammen ücretsiz bir program.

Bu sayfadan NetBeans 288 Mb lık dosyasını indirip direk yükleyebiliyorsunuz. Programı yüklemeden önce 77 mb’lık Java JDK eklentisini bilgisayarınıza kurmanız gerekiyor. Programı indirmek için buraya tıklayın sonra sol köşeden download’a tıklayın sonra açılan pencere içinde en altta skip to step e tıkalayın ve Jdk inmeye başlar indikten sonra direk kurun üstüne netbeans programını kurun ve işlem tamamlandı.

Color Pic :

Eskiden bir web sitesinden örnek renk kodu almak istediğimde sitenin resmini çekip photoshop’a atıyor sonra ordan resim kodunu alıyordum ama çok uzun sürdüğü için bu iş colorspy diye bir program buldum ve direk rengini almak istediğiniz yere gidiyorsunuz renk kodunu veriyordu ilk zamanlar çok işime yaran bu program artık yetmemeye başladı çünki bir önceki renk kodunu hafızada tutmuyordu sonra Colorpic diye bir program buldum tam istediğim şekilde idi direk renkleri alıyor ve kendi hafızasına kayıt ediyor yani kütüphane sistemi var bu yüden vazgeçemeyeğim programlardan biri. Buraya tıklayarak colorpic programını indirebilirsiniz. benim kullandığım sürüm Tamamen Ücretsizdir.

File Zilla( Ftp ) :

Filezilla programını anlatmaya gerek yok çünki iframe virusu başına bela olan herkez filezilla programını buluyor ve kalitesini farkediyor. Direk filezilla programını buradan indirebilirsiniz. Tamamen ücretsizdir.

Bunlar şidilik her bilgisayarı açtığımda kullandığım tasarım ve yazılım amaçlı programlar Photoshop gibi büyük ve bilinen programları anlatmıyorum herkez biliyor çünki. Eğer yeni bi program kullamaya başlarsam bu başlık altında belirtirim.

IE Tester :

Ie Tester

Ie Tester programı kesinlikle her webmaster’in bilgisayarında yüklü olması gerekir çünki bizim web sitemize giren kullanıcılar sadece belli bi tarayıcı kulanıyor olmayacak ie6 , ie7 , ie8 gibi windows tabanlı tarayıcılardan da giren olacaktır o yüzden sitelerimizi her tarayıcıya göre yapmak için bu ie sürümlerini paket haline getirmiş browseri bilgisayara yükelememiz şartdır.

Tamamen ücretsiz bir programdır , buradan indirebilirsiniz.

Son güncelleme : 29 ocak 2010

jQuery’de Açılır-Kapanır Div

jQuery / Ajax / JavaScript kategorisinin ikinci makalesi ile artık jQuery ye adım atıyoruz şimdiki konumuz basit ama konunun temel bilgi olması için üzerinde biraz fazla duracağım. Bundan sonraki derslerimizde jQuery ile post işlemleri gibi işlemler yapcağız, şimdiki konumuz jQuery deki slideUp() , slideDown() ve toggle() fonskiyonlarını kullanmak.

İndex.html sayfamızı hazırlıyoruz
Öncelikle tagları arasına jquery.js dosyasımızı entegre ediyoruz. ( jquery.js dosyamız js/ dizinin altındadır. )

<head>
<script src=”js/jquery.js” type=”text/javascript”></script>
</head>

<head>

</head>

Şimdi arkadaşlar 2 şekilde div açma ve kapatmayı yapabiliriz şimdi birinci yolu göstereceğim.

Birinci Yol

Aşağıdaki kodları <head> </head> tagları arasına yazıyoruz.

$(document).ready(function () {
$('#Menu a').click(function () {
$('#Menuiki').slideDown('medium');
});
});

$(document).ready(function () {

$('#Menu a').click(function () {

$('#Menuiki').slideDown('medium');

});

Bu kodlar belki zor görünüyor gibi gelebilir ama korkmaya gerek yok arkadaşlar teker teker anlatacağım.

$(document).ready(function () { xxxxx });

1	$(document).ready(function () { xxxxx });

belge tamamen yüklendiğinde xxxxxxx diye belirttiğimiz fonksiyonları çalıştır.

$('#Menu a').click(function () {yyyyyyyy });

1	$('#Menu a').click(function () {yyyyyyyy });

<div id="Menu">
<a href="#">Aç</a>
</div>

</div>

Burada Menu class’ının altındaki herhangi bir <a></a> tagına tıklandığında yyyyyy işlemini gerçekleştir diyoruz.

$('#Menuiki').slideDown('medium');

1	$('#Menuiki').slideDown('medium');

Burada ise

<div class="Menuiki"></div>

1	<div class="Menuiki"></div>

Div’îni slideDown yani aşağıda doğru slayt efektiyle açıyor.

Burada slideDown yerine slideUp toggle taglarınıda kullanabilirsiniz aslında daha fazla etiket kullanabilirsiniz ama şimdilik ben bu üç fonksiyonu anlatıyorum.

Bu Birinci yoldu yani jQuery’de de belirttin xx adlı ziyaretçi şu divin içindeki şu <a></a> tagına tıklarsa şu divi aç diye belirttik.

Demo :

slideUp
slideDown
Toggle

İkinci Yol

Şimdi ise direk biz istediğimiz <a></a> tagına değer vereceğiz. öncelikle jquery.js dosyasını <head></head> tagları arasına entegre ediyoruz.

<head>
<script src="/jsjquery.js" type="text/javascript"></script>
</head>

<head>

</head>

jquery.js yi entegre ettikten sonra sitemizdeki herhangi bir <a> </a> tagına gidip

<a href="#" onclick="$('#Aycan').slideDown('normal');
$('#Zone').slideDown('normal');">Divleri aç /kapat</a>

1 2	<a href="#" onclick="$('#Aycan').slideDown('normal'); $('#Zone').slideDown('normal');">Divleri aç /kapat</a>

Divleri aç / kapat linkine tıkladığımız zaman #Aycan div’ini aşağı doğru açacak #Zone divini ortadan kaldıracak.

Burada slideUp fonksiyonun yerine slideUp() , slideDown() ve toggle() bu fonksiyonlarıda yazabilirsiniz.

Demo : Toggle

Sonuç :

Umarım anlamışssınızdır, anlamadığınız kısımları konu altında belirtirseniz elimden geldiğince yardım etmeye çalışacağım bu arada artık jQuery anlatımları için bir klasör oluşturdum onu şuan veriyorum artık bütün değişiklikler orda olacak.

buradan

Haydi ul – li taglarını öğrenelim

Selam arkadaşkar orta düzey bir css yazarının vazgeçemeyeceği benim kanaatımca <ul> <li> taglarıdır artık menuleri geçin oyun sitesinde oyunları listelerken herhangi bir modül yazdığımda modül kullanırken herşeyde artık bu taglar var.
Bu tagların özelliği ise kod kalabalığı yapmıyor örn. bir oyun sitesinde son on oyunları div class lar ile çerçevelersek en az 5 satır kod olacakken
ul li ile yaparsak sadece şu kodlar kullanılacaktır Okumaya devam et Haydi ul – li taglarını öğrenelim

Css Opacity komutu

Css’de Opacity komutu

Sitelerimize görsellik ve güzellik katmak için artık opacity vazgeçilemez bir komut gibi geliyor bizlere sebebi ise her türlü tarayıcıda sorunsuz çalışması ve hiç uğraşmadan en ufak bi kare veya listelenen menulere saydamlık özelliğini katması.

Bu makalede opacity komutunun nasıl kullanıdğını göstereceğim herhangi bir resim üzerine gelince resim hareketlensin. Okumaya devam et Css Opacity komutu