yatay açılır/kapanır div

La Haine · 11.01.2007

ABC

A...............>BC
AB...............>C
ABC>...............

(*) boyle bir açılır/kapanır div icin bir prototip var midir..
(**) ek: click degil de, mouse-over durumu'nda acilir/kapanirsa cok sevinirim.

simdiden, tesekkurler..

cgencer · 11.01.2007

JavaScript kullanıp event yazman gerekir sanırım...

tesera · 11.01.2007

Bu işini görebilir sanırım.

metsatöll · 11.01.2007

onmouseover da layer gösteriliyor, ama gösterilen layerin tekrar gizlenmesi icin tekrar onmouseover yapmak gerekli.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<head>
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>

<style>
#wrap {width:600px;}
.linkler {width:200px; float:left;}
.kutular  {width:400px; float:left;}

a, a:visited { height:1em;}
#div1 { width:400; height:100; background-color: cyan; float:right; }
#div2 { width:400; height:100; background-color: gray; float:right;}
#div3 { width:400; height:100; background-color: green; float:right; }
#div4 { width:400; height:100; background-color: red; float:right;}
</style>
</head>

<body>
<div id="wrap">
  <div class="linkler">
    <a href="#" onmouseover="showhide('div1'); return(false);">Show 1</a><br>
    <a href="#" onmouseover="showhide('div2'); return(false);">Show 2</a><br>
    <a href="#" onmouseover="showhide('div3'); return(false);">Show 3</a><br>
    <a href="#" onmouseover="showhide('div4'); return(false);">Show 4</a><br>
  </div>
  <div class="kutular">
    <div id="div1" style="display: none;">1</div>
    <div id="div2" style="display: none;">2</div>
    <div id="div3" style="display: none;">3</div>
    <div id="div4" style="display: none;">4</div>
  </div>
</div>
</body></HTML>

11.01.2007

soyle bisey yaptim;
(ff2 ve ie7'de denedim)(opclhor_content elementine icerigi yerlestirip opclhor_element_width_min degiskenine element kapandiginda kac px olacagini belirlemen gerekiyor| default 20px)

Kod:

<HTML>
<style>

	#opclhor { width:300px; background:rgb(20,120,220); padding:3px; font:13px Trebuchet MS; color:rgb(255,255,255); }
	#opclhor_button { text-decoration:none; font:24px 'Arial'; font-weight:bold; color:rgb(255,255,255);   }
</style>
<div id='opclhor'>
	<a href='#' id='opclhor_button'>‹</a>
	<div id='opclhor_content'>
		<ul><li>Fooooooo bar oo bar oo</li><li>Baaaaaaaarrrr foo rrr foo rrr</li><li>foobaaaarrroooffooooo foobar ooo oo foobar oo</li></ul>
		<ul><li>Fooooooo bar oo bar oo</li><li>Baaaaaaaarrrr foo rrr foo rrr</li><li>foobaaaarrroooffooooo foobar ooo oo foobar oo</li></ul>
		<ul><li>Fooooooo bar oo bar oo</li><li>Baaaaaaaarrrr foo rrr foo rrr</li><li>foobaaaarrroooffooooo foobar ooo oo foobar oo</li></ul>
		<ul><li>Fooooooo bar oo bar oo</li><li>Baaaaaaaarrrr foo rrr foo rrr</li><li>foobaaaarrroooffooooo foobar ooo oo foobar oo</li></ul><ul><li>Fooooooo bar oo bar oo</li><li>Baaaaaaaarrrr foo rrr foo rrr</li><li>foobaaaarrroooffooooo foobar ooo oo foobar oo</li></ul>
		<ul><li>Fooooooo bar oo bar oo</li><li>Baaaaaaaarrrr foo rrr foo rrr</li><li>foobaaaarrroooffooooo foobar ooo oo foobar oo</li></ul><ul><li>Fooooooo bar oo bar oo</li><li>Baaaaaaaarrrr foo rrr foo rrr</li><li>foobaaaarrroooffooooo foobar ooo oo foobar oo</li></ul>
		<ul><li>Fooooooo bar oo bar oo</li><li>Baaaaaaaarrrr foo rrr foo rrr</li><li>foobaaaarrroooffooooo foobar ooo oo foobar oo</li></ul>
	</div>
</div>
<script>
	var opclhor_element = document.getElementById('opclhor');
	var opclhor_element_content = document.getElementById('opclhor_content');
	var opclhor_button = document.getElementById('opclhor_button');
	var opclhor_element_contentHtml = opclhor_element_content.innerHTML;
	var opclhor_closed = false;
	var opclhor_interval = null;

	var opclhor_element_width = parseInt(opclhor_element.offsetWidth);
	var opclhor_element_height = parseInt(opclhor_element.offsetHeight);
	var opclhor_element_width_min = 20; // div kapatildiginda kac pixel genislik olacak? // eger 0 yaparsan opclhor_button elementini disariya cikarmak gerekir
	
	try
	{
		opclhor_button.addEventListener('mouseover',opclhor,false);
	}
	catch (e)
	{
		opclhor_button.attachEvent('onmouseover',opclhor);
	}
	
	function opclhor()
	{
		
		if(!opclhor_closed)
		{
			opclhor_element.style.width = opclhor_element_width_min + 'px';
			opclhor_element.style.height = opclhor_element_height + 'px';
			opclhor_element_content.innerHTML = '';
			opclhor_button.innerHTML = '›';
			opclhor_closed = true;
		}
		else
		{
			opclhor_element.style.width = opclhor_element_width + 'px';
			opclhor_element.style.height = opclhor_element_height + 'px';
			opclhor_element_content.innerHTML = opclhor_element_contentHtml;
			opclhor_button.innerHTML = '‹';
			opclhor_closed = false;
		}
		

	}

	
</script>

La Haine · 11.01.2007

arkadaslar, cok tesekkur ederim..
yatay'dan kastim; ba kubah'in algiladigi sekildeydi;
cozulmus oldu sorun..

tesekkurler..

11.01.2007	#1 (permalink)
La Haine Üyelik Tarihi: 23.09.2002 Yer: istanbul Yaş: 34 Mesaj: 864	yatay açılır/kapanır div ABC A...............>BC AB...............>C ABC>............... () boyle bir açılır/kapanır div icin bir prototip var midir.. () ek: click degil de, mouse-over durumu'nda acilir/kapanirsa cok sevinirim. simdiden, tesekkurler.. __________________ anti-pop.com* 21.yüzyıl için fanzin \| creativeroom

11.01.2007	#2 (permalink)
cgencer Üyelik Tarihi: 02.08.2001 Yer: istanbul Yaş: 38 Mesaj: 1,542	Re: yatay açılır/kapanır div JavaScript kullanıp event yazman gerekir sanırım... __________________ obsesif v2 + daha iyi net + uçuca + facebook + linkedin

11.01.2007	#6 (permalink)
La Haine Üyelik Tarihi: 23.09.2002 Yer: istanbul Yaş: 34 Mesaj: 864	Re: yatay açılır/kapanır div arkadaslar, cok tesekkur ederim.. yatay'dan kastim; ba kubah'in algiladigi sekildeydi; cozulmus oldu sorun.. tesekkurler.. __________________ anti-pop.com 21.yüzyıl için fanzin \| creativeroom

Sponsorlu Bağlantılar
Zoque.Forum Reklam