Browsing articles tagged with " javascript box"
javascript - ajax
Nis 12, 2009
İsmail PERİM
8 Comments

javascript açılır kapanır kutular

ne için lazım olduğunu bilmiyorum ama bi aralar yazdığım efektli açılır kapanır kutucuklar (:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

<html>
<head>
<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////
//                                                                                  
//    Code By ismailperim                                                    
//    http://www.ismailperim.net                                          
//    <ismailperim@gmail.com>                                             
//                                                                                                                                          
//    Açıklama            : JavaScript Açılır Kapanır Kutucuklar
//
//////////////////////////////////////////////////////////////////////////
 
var slide_divYukseklik = 350;
var slide_say=0;
var slide_intervalID;
var slide_divID;
var slide_px_oran = 10;
function slideKucult_kaynak()
{	
	slide_say+=slide_px_oran;
 
	var id=slide_divID;
	var s = document.getElementById(id).style.height;
	s = eval(s.replace("px",""));
 
	document.getElementById(id).style.height = (s-slide_px_oran) +"px";
	//document.getElementById(id).style.opacity=((20/slide_say));
 
	if(slide_say==slide_divYukseklik-30 || slide_say>slide_divYukseklik-30)
	{	
		document.getElementById(id).style.display="none";
		clearInterval(slide_intervalID);
		slide_say=0;
		document.getElementById(id).style.height="0px";
 
		slide_intervalID=0;
	}	
 
}
function slideKucult(getID)
{
	slide_divID=getID;
	slide_intervalID=setInterval("slideKucult_kaynak()",1);
 
}
 
 
function slideBuyut_kaynak()
{	
	slide_say+=slide_px_oran;
 
	var id = slide_divID;
	var s = document.getElementById(id).style.height;
	s = eval(s.replace("px",""));
 
	document.getElementById(id).style.display="block";	
	//document.getElementById(id).style.opacity=eval(0.003*slide_say);
	document.getElementById(id).style.height = (s+slide_px_oran) +"px";
 
 
 
	if(slide_say==slide_divYukseklik || slide_say>slide_divYukseklik)
	{	
		slide_say=0;
		document.getElementById(id).style.opacity=1;
		clearInterval(slide_intervalID);
	}	
 
}
function slideBuyut(getID)
{
 	if(document.getElementById(getID).style.height=="0px")
	{
		slide_divID=getID;
		slide_intervalID=setInterval("slideBuyut_kaynak()",1);
 
	}	
}
 
 
</script>
 <style type="text/css">
 .div-kutu-css
 {
	border:1px solid black;
	width:350px;
	overflow:hidden;
	background-color:#FEFE9B;
	padding:3px;
	height:0px;
	display:none;
 }
 </style>
 </head>
<body>
<br>
<div class="div-kutu-css" id="div-kutu" style="height:0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac nunc sed ligula interdum lacinia. Curabitur fringilla magna sit amet dui. Duis urna nunc, laoreet at, vehicula id, dictum sit amet, enim. Quisque lacus dolor, ullamcorper ac, sollicitudin feugiat, mattis nec, mauris. Sed pellentesque semper turpis. Pellentesque vitae enim volutpat purus mattis feugiat. Quisque pellentesque est quis nisl. In porta porttitor elit. In sit amet eros imperdiet mi porta ullamcorper. Duis posuere accumsan nibh. Fusce metus. Nulla nibh. Ut feugiat. Maecenas pulvinar est sit amet velit. Pellentesque tortor enim, convallis vel, feugiat quis, adipiscing sed, mi. Cras interdum varius diam. Sed dapibus. Phasellus faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam risus magna, consectetur in, varius in, porta vitae, lectus. 
 </div>
<a href="javascript:slideKucult('div-kutu');">kapat</a>
<a href="javascript:slideBuyut('div-kutu');">aç</a>
 
</body>
</html>

test

ETİKET BULUTU

Bağlantılar

Meta