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

Etiket:

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

jquery hakkındaki yazılar:

soru:jquery ile div alanının içine linkler yardımı ile html sayfası yüklemek

Yapmak istediğim şu;

\

sağdaki menü alanındaki linke tıklayınca sol bölümdeki div alanına ilgili html sayfasının çağrılması.Her link bir html sayfasını çağıracak.
Örneğin: Link1-->1.html, Link2-->2.html.....
Aslında bir tek link için yapmıştım ama öteye taşıyamadım.Kodlar şöyle idi;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<script type="text/javascript">

    $(document).ready(function(){

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

        $('#metin').load('index.html');

    });

});

</script>

</head>

<body>

<a href ="#index.html">tıkla</a>

<br />

<br />

<p id="metin">ben <strong>eski</strong> bir içeriğim</p>

</body>


Bunu istediğim tarzda nasıl yapabilirim.Yardımcı olabilecek arkadaşlara teşekkürler.
Spacer
Spacer
/* Etiketler: , , */
/* ersenbarlas yazdı. 12 Temmuz 2010 15:41. 3 yorum var */

Jquery ile Case-sensitive olmadan arama yapma

Öncelikle efenim kodun örneğini http://jsbin.com/ucidi/3 adresinden görebilirsiniz. Hatta linke tıklayıp test de edebilirsiniz. Başlıkta da Niye case-sensitive ing. demeyin yoksa başlık aşırı uzun oluyordu :D

Jquery'de bildiğiniz üzere contains kodu çalışırken büyük küçük uyumu olmadan çalışmaktadır ve standardı olmayan yazılarda böyle bir uyum olmayacağından düzgün çalışmıyor. Bende koca jquery için bunun kolay yolunu yapmamışlar mı derken bi baktım ki "custom selector" denilen bir velet eklenmiş framework'e. Bende bunu evirip çevirip (tabii gogıl'ında büyük yardımıyla) büyük küçük uyumu olmadan contains'i kullanmayı sağladım. Üstüne de dedim bunun soldan sağa olanı da olmalı ve alttaki iki kodu çıkarttım ortaya. http://www.west-wind.com/weblog/posts/519980.aspx adresinde çok iyi anlatılmış zaten soldanSaga kodunda hiçbir değişiklik yapmadım :D

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , */
/* Sly777 yazdı. 30 Haziran 2010 11:54. 0 yorum var */

Popeye Jquery ile resim gösterme şeysi

Selamlar dostlar
Yine kodaman da aslında pek çok istenmeyen bir yazımsı ile karşınızdayım. Bu seferki yazı Jquery ile resim gösterme teknikleri ve yeni çıkan bir plugin hakkında olacak hemencecik girizgahımızı yapalım

Efenim jquery hepimizin malumu; web geliştiricilerine çok büyük özgürlükler sağlayan bir framework çatısı. Flash gibi çoğu geliştiriciyi kastıran bir uygulamadansa tek satır kod ile aklınızda olan her türlü efekti (bounce, smoot,) ve uygulamayı yaptırtan (ajax, json ...) eğlenceli bir o kadarda insanın ufkunu açan bir framework

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , , , */
/* CeRBeR yazdı. 16 Nisan 2010 11:22. 0 yorum var */

Konami Kodu İle Ziyaretçilerinizi Şaşırtın

Konami Kodu
Konami Kodu

Efsanevi oyun şirketi Konami'nin, oyunlarında kullandığı 'hile' kodu Konami Code , son zamanlarda internet üzerinde tekrar popüler olmaya başladı. Çoğu web sitesi, Konami Kodu ile ziyaretçilerine çeşitli süprizler hazırlıyor. Örneğin, JQUERY'nin sitesine girip Konami Kodunu uygulayın.
Konami Kodu : YUKARI - YUKARI - AŞAĞI - AŞAĞI - SOL - SAĞ - SOL - SAĞ - B - A (Bazı sitelerde en sonda ENTER tuşuna basmak gerekiyor.)

Diğer Konami Kodu içeren sitelere bu adresten ulaşabilir (Siteye girmek için ne yapmanız gerekiyor bilin bakalım :) ) yada bildirgec'te yayınlanmış şu yazıyı inceleyebilirsiniz.

Ben de bu yazımda sizlere Konami Kodu'nu sitenize nasıl ekleyebileceğinizi anlatacağım.

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , , , , , , , , */
/* erayalakese yazdı. 13 Nisan 2010 14:50. 2 yorum var */

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
Spacer
Spacer
/* 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
Spacer
Spacer
/* 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
Spacer
Spacer
/* 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
Spacer
Spacer
/* Etiketler: , , , , , , , , , , , */
/* Metin METE yazdı. 22 Ocak 2010 12:13. 7 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
Spacer
Spacer
/* 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
Spacer
Spacer
/* Etiketler: , , , , , */
/* rhymes yazdı. 04 Ocak 2010 11:31. 5 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