Javascript ile “display:none / block”

Date28 / Şubat / 2008 Author İsa Engiz    Category javascript     Tags YorumlarHenuz Yorum Yapilmamis.

javascript-pic.jpgÖnceki yazılarımızda javascript-innerHTML kullanarak bir içeriği göster – gizle uygulaması yapmıştık. Ona benzer bir uygulamayı ise innerHTML kullanmadan, javascript ile doküman elemanının sitil özelliğini değiştirerek yapabiliriz.

Bize bu konuda yardıma koşan CSS kodu “display:none; display:block;”. Bunun bir örneğini görmek için buraya tıklayabilirsiniz, dosyaları ise buradan indirebilirsiniz.

Adım 1

Başlamadan önce dokümanda tıklamadan sonra gösterilecek içeriği belirliyoruz ve onu div etiketi içerisine alıyoruz:

<div id="icerik">
 
<p>selamlar, bu da bir başka yazı</p>
<p>bu da bir başka paragraf...</p>
 
</div>

Adım 2

Daha sonra bu içeriğin gösterilmesini engelleyecek olan CSS kodunu ekliyoruz:

#icerik
{
	display:none;
}

Böylece sayfa yüklendiği zaman “icerik” id’sine sahip eleman gözükmeyecek.

Adım 3

Dokümanda tıklanınca içeriği gösterecek bağlantıya javascript fonksiyonunu ekliyoruz:

<a href="#" onclick="goster()">buraya</a>

Adım 4: Javascript kodu

son olarak javascript kodunu yazmalıyız:

var sayi = 0;
function goster()
{
	if (sayi == 0)
	{
		document.getElementById("icerik").style.display = "block";
		sayi = 1;
	}
	else
	{
		document.getElementById("icerik").style.display = "none";
		sayi = 0;
	}
}

Burada yaptığımız ilk önce “sayi” isimli bir değişken oluşturmak. Bu değişkenin görevi tıklama alanına tıklandığında “icerik” alanının gösterilip gösterilmediğini öğrenmek. sayfa yüklendiğinde varsayılan olarak sayi=0 durumunda. Eğer içerik gösterilmiyorsa;

if (sayi == 0)
{
	document.getElementById("icerik").style.display = "block";
	sayi = 1;
}

kodun bu bölümü çalışıyor, javascript ile “icerik” id’sine sahip elemanın “display” özelliğini değiştiriyoruz ve “block” yapıyoruz. Ayrıca şu anda “icerik” kısmı görünür hale geldiğinden “sayi” değişkenini 1 yapıyoruz.

İçerik gösteriliyorken tıklanırsa kodun ikinci kısmı çalışıyor:

else
{
	document.getElementById("icerik").style.display = "none";
	sayi = 0;
}

Bu kod parçası da aynı şekilde “icerik” id’sine sahip elemanın “display” özelliğini değiştiriyor ve katmanı tekrar gizliyor.

İçeriği “gösterip – gizleme” uygulaması javascript ile doküman elemanlarının sitil özelliklerinin değiştirilmesiyle daha kolay olmakta. Daha sonraki yazılarda ise bu özelliği kullanmanın bize neler sağladığını göreceğiz…

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!

görüşünü belirt

Spam Protection by WP-SpamFree

Arama


E-Posta Aboneliği


RSS Aboneliği

En Çok Yorumlanan Yazılar

Etiketler

404 ajax apache arama butonu as astrofizik açık kaynak banner blogger blogger/blogspot Blogger / Blogspot blogspot case chmod css date dosya yükleme editör etiket etkinlik favicon featured form ftp galeri Genel gimp hata sayfası header htaccess htpasswd ilişkisel veritabanı index innodb javascript join JQuery kategori koodla linux mysql opacity php resim url

Son Yorumlar

  • Fatih: Açıkçası sitenizi yeni keşfettim ve gerçekten beğendim. Kaynak ve tutorial ihtiyacı olduğunda yabancı blog...
  • beyo: emeğine sağlık, temiz bir anlatım olmuş
  • gokhan: güzel bir anlatım yapmışsın.. devamını bekleriz.. kolay gelsin
  • web yazılım şirketi: google blog araması ile .net üzerinden hizmet veren web yazılım şirketi ararken tesadüfen bu web...
  • Codderol: çok teşekkürler bu çalışma bana çok yardımcı oldu….

Sayfalar


Faydalı Bağlantılar