Posts tagged js

js tasarım aracı

Ara 6th

Yazar : Ä°smail PERÄ°M Kategori genel

Yorum yok

İnternette dolaşırken gördüğüm basit ama güzel bir Javascript aracını paylaşmak istedim sizinle.
Bu araç, tarayıcımızda açmış olduğumuz sayfanın üzerine dinamik olarak eklenen basit bir js dosyası ile çalışıyor.
Ne işe yaradığına gelince;

tıklayın

Yukarıdaki linke tıkladığınızda ekranın sağ alt köşesinde koyu renkli bir kutu belirecek. Bu kutunun içinde ise 4 adet araç bulunmakta. Bu araçlar sayfa üzerinde çeşitli şekillerde ölçümler yapmanıza olan sağlıyor.

Bu aracı diğer sayfalarda nasıl kullanacağınıza gelirsek;

javascript:function%20fnStartDesign(sUrl)%20{var%20nScript%20=%20document.createElement(’script’);nScript.setAttribute(‘language’,'JavaScript’);nScript.setAttribute(’src’,sUrl);document.body.appendChild(nScript);}fnStartDesign(‘http://www.sprymedia.co.uk/design/design/media/js/design-loader.js’);

Yapmanız gereken ÅŸey yukarıdaki “tıklayın” linkini Mozillanızın hızlı baÄŸlantılar sekmesine sürükleyip kaydetmeniz ve bu aracı kullanmak istediÄŸiniz sayfalarda baÄŸlantıya basmanız veya 2. bir alternatif olarak yukarıdaki kodu biryerde saklayıp, aracı kullanmak istediÄŸinizde tarayıcınızın adres çubuÄŸuna yapıştırmanız…

, , , ,

js currency formatter

Kas 22nd

Yazar : Ä°smail PERÄ°M Kategori genel

2 Yorum

Yaptığım bir projede ihtiyacım üzerine karaladığım küçük 2 fonksiyonu paylaşmak istedim.
js dosyamın içinde 2 fonksiyon bulunmakta;

void IsNumber(element)
Fonksiyonu text nesnemizin onkeypress ve onkeyup olaylarına yazıyoruz.  Bu olaylarda fonksiyonumuza nesnemizi gönderdiÄŸimiz zaman bastığımız karakterleri kontrol ederek geçersiz karakterlerin yazımını kısıtlıyor. Sadece rakamlar,  ‘.’ ve  ‘,’ karakterlerinin yazımına izin veriyor.
Örnek Kullanım :  <input type=”text” name=”price” onkeypress=”IsNumber(this)” onkeyup=”IsNumber(this)” />

void CurrencyFormat(element)
Bu fonksiyonumuzu da nesnemizin onblur olayına yazarak parametre olarak text nesnemizi gönderiyoruz. Fonksiyon yazım işimiz bittikten ve text nesnemizin içinden çıktıktan sonra içindeki yazıyı algılayarak formatlandırma işlemini yapıyor. Örneğin, bin lira otuz beş kuruş = 1000,35 yazdığınızda, fonksiyonumuz bunu 1.000,35 haline dönüştürüyor.
Örnek Kullanım : <input type=”text” name=”price” onblur=”CurrencyFormat(this)”  />
<input type=”text” name=”price” onblur=”CurrencyFormat(this)” onkeypress=”IsNumber(this)” onkeyup=”IsNumber(this)” />


Örnek 1 :

Örnek 2 :

CurrencyFormat.js

, , , , , , , , , , ,

ManÅŸet Haber

AÄŸu 22nd

Yazar : Ä°smail PERÄ°M Kategori genel

4 Yorum

Daha önce projelerimde kullanmak üzere yazdığım manşet haber scriptim. Sistem javascript kullanılarak yazılmış olup 4 resim ve bu resimlere ait başlık-özet bölümlerini gösterebilmekte. Diğer sistemlerle entegrasyonunun kolay olması açısından JSON tekniğine uygun veri alışı yapmakta.

Demo

Source

, , , , , , , , , , ,

javascript açılır kapanır kutular

Nis 12th

Yazar : Ä°smail PERÄ°M Kategori javascript - ajax

7 Yorum

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

, , , , , , , ,