Browsing articles tagged with " javascript nedir"
genel, teknoloji
Kas 8, 2009
İsmail PERİM
No Comments

Blog Dergisi Sayı 4

blog dergisi kasım sayısı

Türkiye’nin ilk  ve tek online Blog Dergisi “Kasım” Sayısı:
Blog-İnternet:
Sanal Şehirlere Yolculuk
Black Hat Seo
Blogger Devamını Oku Özelleştirme
Blogcularla Röportaj
Çin Günlüğü
Oyun:
İnceleme – Need For Speed: Shift
İnceleme – Mini Ninjas
Ayın Mini Oyunu – DayMare Town
Oyun Haberleri
Sinema:
Türk Korku Sineması
Vizyondakiler KASIM
Müzik:
Süleyman SAİT ile röportaj
Programlama:
Javascript Nedir?
Rengarenk:
Bir Otostopçunun Günlüğü
Yalnız(lık)
Yorgun Savaşçı (Şiir)
Mizah:
Düz Yazı
Onur Gürleyen’den Karikatürler
BlogStar

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

javascript - ajax
Nis 8, 2009
İsmail PERİM
5 Comments

javascript slide

resimleri sırasıyla basit bir kayma efekti ile göstermek isterken ortaya çıkan şey :) ;

<script type="text/javascript">var kutuSayi = 5;
var sure = 5000;
var divYukseklik = 60;
var interval=0;
var say=0;
function art()
{
	say+=1;
	if(say<divYukseklik+1)
	{
		document.getElementById("divKutu").scrollTop+=1;
	}
	else
	{
		say=0;
		clearInterval(interval);
	}
}
function kutu()
{
var divID = eval(document.getElementById("divID").innerHTML);
 
	for(i=1;i<kutuSayi+1;i++)
	{
	var iArti=i+1;
 
 
		if(i==divID)
		{
 
			//document.getElementById("goster"+i).style.visibility="visible";
 
 
			if(kutuSayi==divID)
			{
				document.getElementById("divID").innerHTML=null;
				document.getElementById("divID").innerHTML=1;
				document.getElementById("divKutu").scrollTop=0;
 
			}
			else
			{
				document.getElementById("divID").innerHTML=null;
				document.getElementById("divID").innerHTML=iArti;
				//document.getElementById("divKutu").scrollTop+=60;
 
 
				interval=setInterval("art()",30);
 
 
			}
 
		}
 
	}
 
}
function n(){}
function yukseklik(yuk)
{
	for(h=1;h<kutuSayi+1;h++)
	{
		document.getElementById("goster"+h).style.height=yuk;
		document.getElementById("goster"+h).style.border="1px dashed black";
		divYukseklik=yuk;
 
	}
}
function yukle()
{
	yukseklik(divYukseklik);
 
}
window.setInterval('kutu()',sure);
 
 
</script>
<div id="divID" style="visibility:hidden;">1</div>
<div id="divKutu" style="overflow: hidden; height: 60px; width: 150px;">
<div id="goster1">bir</div>
<div id="goster2">iki</div>
<div id="goster3">uc</div>
<div id="goster4">dort</div>
<div id="goster5">bes</div>
</div>

demo

ETİKET BULUTU

Bağlantılar

Meta