Gizle/Göster sorunu

05-07-2010, 15:54:47

Merhaba arkadaşlar,

Javascript konusunda yeteri kadar bilgim yok maalesef. Dolayısıyla takıldığım bu konuda bilgilerinize başvurmak istedim. Alttaki kodla gizle/göster eylemini gerçekleştiriyorum. İstediğim şey gizleme ve göstermeyi farklı butonlarla yapmak. Yani gizleyince göster, gösterince de gizle butonu çıkacak. Fakat ikisi aynı anda bulunmayacak.

$('document').ready(function(){
$('.top20more').hide();
$('.tikla').click(function(){ 
$(this).text('Sakla') ;
$('.top20more').slideToggle('slow'); 
}); 
});

05-07-2010, 16:08:09

#2

justices

css tanımla bunun gibi:

.bcn-goster { background-image: url(goster.jpg); }
.bcn-gizle { background-image: url(gizle.jpg); }
.bcn-buton { width: 20px; height: 20px; }

butonuda şöyle çağır:
<div class="bcn-buton bcn-goster"></div>

her toggle ettirdiğinde attr yada data özelliğini kullanarak bg değiştirip yada text ise text i döndürüp değiştirebilirsin

05-07-2010, 16:26:26

#3

ruvec

bir javascript kütüphanesi ile değil de, basit bir javascript betiği ile de bunu yapabiliriz

<html>

<head>
<style type="text/css" >
	#alan{display:none;}
	span#goster{cursor:pointer;}
	span#gizle{display:none; cursor:pointer;}
</style>
<script type="text/javascript" >
	function goster() {
		document.getElementById("goster").style.display = "none";
		document.getElementById("gizle").style.display = "block";
		document.getElementById("alan").style.display = "block";
	}
	
	function gizle() {
		document.getElementById("gizle").style.display = "none";
		document.getElementById("goster").style.display = "block";
		document.getElementById("alan").style.display = "none";
	}
</script>
</head>

<body>

<span id="goster" onclick="goster();" >göster</span>
<span id="gizle" onclick="gizle();" >gizle</span>

<div id="alan" >
	<p>
		lorem ipsum dolor sit amet.
	</p>
</div>

</body>

</html>

biraz da bilgi vermem gerekirse:

* önce css ile etkileşim olmadan gösterilmeyecek alanı gizliyoruz.
* ardından yine css ile, göster butonunu gösteriyor, gizle butonunu gizliyoruz.
* daha sonra, javascript ile göster fonksiyonu çalışırsa olacakları yazıyoruz, gizle fonksiyonu çalışırsa olacakları yazıyoruz.
* html alanında ise göster butonunu, gizle butonunu ve yazı alanımızı yazıyoruz.
* ilk başta sadece göster butonu çalışacaktır. göster butonuna tıklandığında, yazı gösterilecek, göster butonu gizlenecek, gizle butonu ise gösterilecektir. gizle butonuna da basıldığında tam tersi olacak. göster butonu tekrar aktif edilecek, yazı ve gizle butonu da gizlenecektir.

05-07-2010, 16:49:24

#4

KontW

justices adlı üyeden alıntı: mesajı görüntüle

css tanımla bunun gibi:

.bcn-goster { background-image: url(goster.jpg); }
.bcn-gizle { background-image: url(gizle.jpg); }
.bcn-buton { width: 20px; height: 20px; }

butonuda şöyle çağır:
<div class="bcn-buton bcn-goster"></div>

her toggle ettirdiğinde attr yada data özelliğini kullanarak bg değiştirip yada text ise text i döndürüp değiştirebilirsin

Asıl problemim imajı döndürme zaten. Yani gösterildiğinde göster butonunu gizle butonunu göster, gizlendiğinde ise göster butonunu göster. Bunu js ile nasıl yerleştirmem gerekecek?

ruvec adlı üyeden alıntı: mesajı görüntüle

bir javascript kütüphanesi ile değil de, basit bir javascript betiği ile de bunu yapabiliriz

<html>

<head>
<style type="text/css" >
	#alan{display:none;}
	span#goster{cursor:pointer;}
	span#gizle{display:none; cursor:pointer;}
</style>
<script type="text/javascript" >
	function goster() {
		document.getElementById("goster").style.display = "none";
		document.getElementById("gizle").style.display = "block";
		document.getElementById("alan").style.display = "block";
	}
	
	function gizle() {
		document.getElementById("gizle").style.display = "none";
		document.getElementById("goster").style.display = "block";
		document.getElementById("alan").style.display = "none";
	}
</script>
</head>

<body>

<span id="goster" onclick="goster();" >göster</span>
<span id="gizle" onclick="gizle();" >gizle</span>

<div id="alan" >
	<p>
		lorem ipsum dolor sit amet.
	</p>
</div>

</body>

</html>

biraz da bilgi vermem gerekirse:

* önce css ile etkileşim olmadan gösterilmeyecek alanı gizliyoruz.
* ardından yine css ile, göster butonunu gösteriyor, gizle butonunu gizliyoruz.
* daha sonra, javascript ile göster fonksiyonu çalışırsa olacakları yazıyoruz, gizle fonksiyonu çalışırsa olacakları yazıyoruz.
* html alanında ise göster butonunu, gizle butonunu ve yazı alanımızı yazıyoruz.
* ilk başta sadece göster butonu çalışacaktır. göster butonuna tıklandığında, yazı gösterilecek, göster butonu gizlenecek, gizle butonu ise gösterilecektir. gizle butonuna da basıldığında tam tersi olacak. göster butonu tekrar aktif edilecek, yazı ve gizle butonu da gizlenecektir.

Verdiğiniz bilgilerden dolayı teşekkür ederim hocam. Fakat bir eksiği var ki bu da benim eylemi slide olarak gerçekleştirmek istememdir.

05-07-2010, 16:54:30

#5

ruvec

KontW adlı üyeden alıntı: mesajı görüntüle

Verdiğiniz bilgilerden dolayı teşekkür ederim hocam. Fakat bir eksiği var ki bu da benim eylemi slide olarak gerçekleştirmek istememdir.

aslında basitte olsa mantığı anlayarak slide da yapılabilir, javascript kütüphanesine ihtiyaç duymadan. tabii slide yapacaksanız, hazır jquery yada mootols kütüphanelerini kullanmak daha mantıklı olacaktır.

http://www.bildirgec.org/yazi/en-iyi-10-jquery-slider

göz atmanızı öneririm.

05-07-2010, 17:16:54

#6

KontW

Arkadaşlar istediğimi şu şekilde gerçekleştirdim.

$('document').ready(function(){
$('.top20more').hide();
$(".hide").hide(); 
$('.top20button').click(function(){
$(".hide").show(); 
$(".show").hide(); 
$('.top20more').slideToggle('slow'); 
}); 
});

fakat birer kere göster ve gizle butonlarına tıklayınca buton değişmiyor, gizle butonu olarak kalıyor maalesef.

05-07-2010, 21:03:13

#7

mystec

tek butonla işi çözebilirsin;

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var gizli = true;
$('document').ready(function(){
$('.top20more').hide();
$('.top20button').click(function(){
degistir();
}); 
});
function degistir(){
	if(gizli){
		$('.top20button').attr('src','buton-2.jpg');
		gizli = false;
	}else{
		$('.top20button').attr('src','buton-1.jpg');
		gizli = true;
	}
	$('.top20more').slideToggle('slow'); 
}
</script>
<img src="buton-1.jpg" class="top20button" />

$('document').ready(function() içinde yapmaya çalışırsan olmaz.

06-07-2010, 09:17:41

#8

justices

Alıntı

Asıl problemim imajı döndürme zaten. Yani gösterildiğinde göster butonunu gizle butonunu göster, gizlendiğinde ise göster butonunu göster. Bunu js ile nasıl yerleştirmem gerekecek?

.bcn-goster { background-image: url(goster.jpg); }
.bcn-gizle { background-image: url(gizle.jpg); }
.bcn-buton { width: 20px; height: 20px; }

butonuda şöyle çağır:
<div class="bcn-buton bcn-goster"></div>

burda toggle ettirirken addClass removeClass ile bcn-goster i yada bcn-gizle class ını değiştireceksin. class lardaki resimler background lar farklı oldukları için halletmiş olacaksın.

07-07-2010, 22:51:19

#9

KontW

Cevaplarınızı ancak inceleyebildim arkadaşlar. justices, bahsettiğin yöntemi araştırıp uyguladım. Gayet işime yarar bir yöntem oldu, teşekkür ederim.

Cevap yazan diğer arkadaşlara da ilgilerinden dolayı teşekkür ederim, iyi çalışmalar.