pillinetwork hesabınızla giriş yapın.

Etiket:

bu etikete sahip olanlar bunlara da sahip: +, +, +, +, +

jquery hakkındaki yazılar:

Jquery ile haber sitelerindeki gibi manşet reklam paneli yapımı

Arkadaşlar bu yazımda sizlere bir çok haber sitelerinde resimli manşet haber paneli nasıl yapılır onu göstereceğim

Bu panel için Jquery nin bir eklentisi olan JqueryUI tabs ı kullanacağız.

jqueryui.com eklentinin ana sayfası

direk indirmek için ise buraya tıklayınız.

indirdikten sonra bu dersimizde kullanacağımız şablonumuz ise cleantype.

cleantype için buraya tıklayınız

cleantype klasörümüzü sunucumuzdaki www veya public_html klasörümüze açalım ve index.html dosyasını index.php olarak değiştirelim.

devamını okuyun
/* Etiketler: , , , , */
/* thedon yazdı. 15 Şubat 2010 09:32. 7 yorum var */

jQuery İle "Gizle/Göster" Sütun ve Tablo Yapımı

Bu yazımızda jQuery ile sitemizdeki sağ yada sol sütunu, tabloyu yada paneli nasıl gizle/göster yapabileceğimizle ilgili uygulama hazırladım. Çalışma mantığı, daha önce anlattığım (jQuery İle “Tab” Uygulaması Geliştirmek) yazısındaki uygulama ve çalışma mantığıyla neredeyse aynıdır. Tek farkı! Bu uygulamada animasyonun daha fazla olması. Çalışan örneği için BU bağlantıya bakabilirsiniz.

Şimdi öncelikle site içeriklerini Ana Tablo içine aldım;

1
2
3
 
<div class="ana-tablo">

...

</div>
Ana Tablo için eklediğim stil;
1
 
.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }
Şimdide sırayla içerikleri doldurmaya başlıyorum. Öncelikle Gizle/Göster butonlarını ekledim;
1
2
 
<div class="gizle">»</div>

<div class="goster">«</div></code>
Gizle/Göster butonları için eklediğim stil;
1
 
.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
Tabii bu bölümde de atlamamak lazım! Kullanıcılarımıza sadece "Gizle" butonu gösterileceğinden, "Göster" butonunu stille ekstra olarak gizledim;
1
 
.goster { display:none; }
Ardından Sağ Sütunu ekledim;
1
2
3
4
 
<div class="sag-sutun">

<div>...</div>

<div>...</div>

</div>
Sağ Sütun için eklediğim stil;
1
2
 
.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:40px; }

.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
ve son olarak da Sol Sütunu ekledim;
1
2
3
 
<div class="sol-sutun">

...

</div>
Sol Sütun için eklediğim stil;
1
 
.sol-sutun { margin-right:280px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
Sayfa için kullanacağımız XHTML kodları burada bitiyor. Buradan sonrasında jQuery ile yazacağımız fonksiyonlar çalışacak.

jQuery kodlarını vermeden önce hazırladığım fonksiyonların ne işe yaradığından bahsetmek istiyorum. Öncelikle ilk fonksiyonumuz, "Gizle" butonu tıklanınca "Sağ Sütun" ve "Gizle" buttonu kaybolacak, kaybolan sütun yerine "Sol Sütun"'u genişletecek, genişleyecek ama bir yandan da sağdan "Göster" butonu kadar boşluk bırakacak. İkinci fonksiyonumuzda ise "Göster" butonu tıklanınca "Gizle" butonu kaybolacak, "Sol Sütun" belirttiğimiz ölçüde tekrar daraltılacak, "Sağ Sütun" ve "Gizle Butonu" gösterilecek, gösterilecek ama "Sağ Sütun"'un sağına "Gizle" butonun sığıcağı kadar boşluk ekleyecek. Aman dikkat!!! Anlattıklarımdan kafanız karışmasın. Sadece anlattıklarımı hayal edip, "- tabi ya! böle yapınca bu olucak, şöle yapınca şu olucak." gibisinden düşünebilirsiniz...

Neyse, yukarıda anlattıklarım hayal ürünü olmaktan çıkıp, kodsal olarak bu şekli alıyor;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function(){

	$(".gizle").click(function(){

		$(".gizle").animate({opacity:0}, 250).hide("slow");

		$(".goster").animate({opacity:1}, 250).show("normal");

		$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);

		$(".sol-sutun").animate({marginRight:"40px"}, 250);

	});

	$(".goster").click(function(){

		$(".gizle").animate({opacity:1}, 250).show("normal");

		$(".goster").animate({opacity:0}, 250).hide("slow");

		$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );

		$(".sol-sutun").animate({marginRight:"270px"}, 250);

	});

});
Herşeyi bu şekilde yaptıktan sonra, aşağıdaki gibi kodlara sahip olucaktınız;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!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" />

<title>jQuery İle "Gizle/Göster" Sütun ve Tablo Yapımı</title>

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

<script type="text/javascript">

$(document).ready(function(){

	$(".gizle").click(function(){

		$(".gizle").animate({opacity:0}, 250).hide("slow");

		$(".goster").animate({opacity:1}, 250).show("normal");

		$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);

		$(".sol-sutun").animate({marginRight:"40px"}, 250);

	});

	$(".goster").click(function(){

		$(".gizle").animate({opacity:1}, 250).show("normal");

		$(".goster").animate({opacity:0}, 250).hide("slow");

		$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );

		$(".sol-sutun").animate({marginRight:"270px"}, 250);

	});

});

</script>

<style type="text/css">

.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }

.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:30px; }

.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

.sol-sutun { margin-right:270px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

.goster { display:none; }

</style>

</head>

<body>

<div class="ana-tablo">

<div class="gizle">»</div>

<div class="goster">«</div>

<div class="sag-sutun">

<div>...</div>

<div>...</div>

</div>

<div class="sol-sutun">...</div>

</div>

</body>

</ html>

devamını okuyun
/* Etiketler: , , , , , , , , , , , , , , , , */
/* Metin METE yazdı. 12 Şubat 2010 08:52. 0 yorum var */

Yepyeni Özellikleriyle jQuery 1.4

JavaScript devi jQuery, yeni versiyonları ve özellikleri ile karşımıza çıkıyor. Ocak ayı içerisinde jQuery 1.4 versiyonunu yayınlayan kütüphane 25 Ocak'ta da jQuery 1.4.1 versiyonunu yayımladı.Buradan indirebilirsiniz.

Bu yazımda jQuery'nin 1.4.1 versiyonunun birkaç özelliğine değineceğim.

devamını okuyun
/* Etiketler: , , , , , */
/* sundowatch yazdı. 04 Şubat 2010 17:59. 5 yorum var */

jQuery İle "Tab" Uygulaması Geliştirmek

Bu yazımızda, jQuery ile tab'lı uygulamalar nasıl geliştirebileceğinizi anlatmaya çalışacağım.

Öncelikle kodlamada kullanacabileceğiniz herhangi bir editör açarak, kodları yazmaya başlayarabiliriz! Bu iş için ben Dreamweaver programını kullandım. Yaptığımız çalışmanın çalışan örneği için BURAYI tıklayabilirsiniz. Şimdi tab içeriğini ekleyeceğimiz bir ana tablo oluşturalım;

1
2
3
 
<div class="tab-tablo">

...

</div>
Stil kodları;
1
 
.tab-tablo { width:450px; margin:0 auto; }

devamını okuyun
/* Etiketler: , , , , , , , , , , , */
/* Metin METE yazdı. 22 Ocak 2010 12:13. 6 yorum var */

3 Adımda jQuery Sexy DropDown Menu

Çoğu çalışmalarımızda gerekli olan DropDown menü jQuery ile dahada basit hale gelmiştir. 3 adımda aşağıdaki örnekteki gibi yapabilirsiniz. İşinize yarayacağını düşünüyorum.

Adım 1 : HTML
HTML tagları ile menümüzün başlıklarını oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<ul class="topnav">

    <li><a href="#">Home</a></li>

    <li>

        <a href="#">Tutorials</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li>

        <a href="#">Resources</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li><a href="#">About Us</a></li>

    <li><a href="#">Advertise</a></li>

    <li><a href="#">Submit</a></li>

    <li><a href="#">Contact Us</a></li>

</ul>

devamını okuyun
/* Etiketler: , , , , , , */
/* rhymes yazdı. 11 Ocak 2010 19:57. 3 yorum var */

JQuery ile fluid grid oluşturmak

Bir web sayfasına magazin/gazete görünümünde gird oluşturmak JQuery ile çok basit bir şekilde olmaktadır. Aşağıda kullanılan yöntem ve fonksiyonlar çok basit olması nedeniyle bir çok kişi tarafından rahatlıkla uygulanabilir. Bunları adımlayarak yapacak olursak:

1- Basit bir html sayfası oluşturalım:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<head>

        <title>Fluid grid</title>

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

    </head>

    <body>

        <div class="box"><p><span>01</span>01 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>02</span>02 Numaralı kutu...</p></div>

        <div class="box"><p><span>03</span>03 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>04</span>04 Numaralı kutu...</p></div>

        <div class="box"><p><span>05</span>05 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>06</span>06 Numaralı kutu...</p></div>

        <div class="box"><p><span>07</span>07 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>08</span>08 Numaralı kutu...</p></div>

        <div class="box"><p><span>09</span>09 Numaralı kutu...</p></div>

    </body>

devamını okuyun
/* Etiketler: , , , , , */
/* rhymes yazdı. 04 Ocak 2010 11:31. 5 yorum var */

Az kod, çok iş; eşittir jQuery effects

Bu yazımda jQuery de effectleri anlatmak istiyorum... Başlıkta dediğim gibi az kod çok iş... İşte tam burda devreye jQuery yardımımıza yetişiyor... Şu an yeterli sayıda olmasada üzerimizden yük alacak ve elimize işlevsellik ve görselliği harmanlayıp verecek seviyede olduğunu düşünüyorum... Tabi ki birazda sizlerin css ve hayal gücünüz bütün bunlara olumlu yönde etki ediyor... Gevezeliği bırakıp birazda kodlara bakalım...

İlk effectimiz show() ve hide() :
Bu effectlerimiz sayfa içerisinde kullandığımız nesneleri gösterip gizlemeye yarıyor... Örneğin :
Bizim deneme adlı bir div imiz olsun... Bu divi :

1
 
$("#deneme").show()

ile gösterebiliriz. Ayriyeten :

devamını okuyun
/* Etiketler: , , , , , , , */
/* mmacit yazdı. 04 Ocak 2010 10:31. 16 yorum var */

jQueryde xml parse etme

Bu yazımda jQueryde xml dosyasından veri almayı ve bu verileri dizilere aktarıp kullanıma hazır hale getirmekten bahsedeceğim...

öncelikle aşağıdaki gibi bir xml dosyamız olsun:

1
2
3
4
5
6
7
8
9
10
11
12
 
<?xml version="1.0" encoding="utf-8" ?>

<bilgiler>

  <bilgi baslik="deneme1" resim="1.jpg" aciklama="Hebele1 Hübele1" />

  <bilgi baslik="deneme2" resim="2.jpg" aciklama="Hebele2 Hübele2" />

  <bilgi baslik="deneme3" resim="3.jpg" aciklama="Hebele3 Hübele3" />

  <bilgi baslik="deneme4" resim="4.jpg" aciklama="Hebele4 Hübele4" />

  <bilgi baslik="deneme5" resim="5.jpg" aciklama="Hebele5 Hübele5" />

  <bilgi baslik="deneme6" resim="6.jpg" aciklama="Hebele1 Hübele1" />

  <bilgi baslik="deneme7" resim="7.jpg" aciklama="Hebele2 Hübele2" />

  <bilgi baslik="deneme8" resim="8.jpg" aciklama="Hebele3 Hübele3" />

  <bilgi baslik="deneme9" resim="19.jpg" aciklama="Hebele4 Hübele4" />

</bilgiler>

devamını okuyun
/* Etiketler: , , , */
/* mmacit yazdı. 29 Aralık 2009 11:56. 6 yorum var */

JQuery ile paket sitelere istemci taraflı çözümler

Merhabalar, uzun bir aradan sonra JQuery'nin kurtarıcı olduğu bir hikaye ile karşınızdayım. Aslında burada çok az kod paylaşacağım ama bu tip bir sorunla karşılaşanlar için iyi bir çözüm olacağına eminim. Hem de kodaman yapısına çok uygun olacak bir paylaşım olduğunu düşünüyorum.

Hikayemiz şöyle : bir paket e-ticaret sitesi kullanıyoruz ve tema yönetim sistemi var ancak sadece istemci taraflı kodlara yani css html vs javascript müdahele edebiliyoruz. hazır bir paket olduğu için sunucu tarafında kod değiştirme gibi gereksinimler tam bir çile oluyor ve paketi satan firmamız ya değişikliklere ek ve biraz da yüksek ücretler, yada bu bir paket sistem o tarz birşey eklemeyiz gibi cevaplar veriyorlar.

devamını okuyun
/* Etiketler: , , , , , */
/* vectro yazdı. 28 Aralık 2009 11:33. 2 yorum var */

Javascript - PreLoader Yapalım

Bazen web sayfalarımızda çeşitli miktarlarda resim dosyası kullanabilmekteyiz. Bu resim dosyaları web sitemizin arayüzünde kullandığımız doku dosyaları olabileceği gibi bir fotoğraf galerisinin dosyaları da olabilir.

HTML malesef ön yükleme yapmak için müsait bir dil değil. CSS de ona keza. Zira html ile sayfaya bir resmi bağladınız ve css ile de display özelliğini none yaptığınızda browserlar (en azında firefox opera chrome gibi gelişmiş tarayıcılar) o resim içeriğini sunucudan istemeyecektir. Böylece sayfa yüklenme süresi kısaltılmış olur. Display özelliği açıldığı anda (gerek javascript ile gerekse de css hover olay seçicisiyle) o elemente linklenmiş imaj dosyası derhal sunucudan talep edilecektir.

devamını okuyun
/* Etiketler: , , , , , , */
/* lazaronnie yazdı. 01 Aralık 2009 11:04. 10 yorum var */
1 2 3 4 Sonraki

etiket menüsü

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork