ana sayfa | makaleler | kodlar | hakkında | cv | referanslar | iletisim
 

javascript ile taşınabilir pencereler

        bilişim ile geçen bir aydan sonra tekrar merhaba.okulların açıldığı ve binlerce bt’ci adayının okul sıralarda ter atmaya başladığı şu günlerde bir çok insan sıkıntısını sahip olduğu web sitesi ile atıyor.genelde web sitesini daha dinamik ve enteraktif hale getirmeye çalışan web site sahipleri, bu yolda genelde javascript’in yardımına başvuruyorlar.
bizde bu ay siteniz için ilginç bir uygulama yapacağız.bu uygulama ile sitenizdeki tablolar canlanacak.sanki bir programda gibi kullanıcılar tablolarınızı istediği yere taşıyacak.aşağıdaki kod javascript source (www.javascriptsource.com) adresinden alınmıştır.
bu aşağıdaki kodu tablom.js adında kaydedin.


<scrıpt language="javascript">
<!-- original:  randy bennett (rbennett@thezone.net) -->
<!-- web site:  http://home.thezone.net/~rbennett/utility/javahead.htm -->

<!-- this script and many more are available free online at -->
<!-- the javascript source!! http://javascript.internet.com -->

<!-- begin
function checkversion4() {
var x = navigator.appversion;
y = x.substring(0,4);
if (y>=4) setvariables();moveob();
}

function setvariables() {
if (navigator.appname == "netscape") {
h=".left=";v=".top=";ds="document.";sd="";
}
else{
h=".pixelleft=";v=".pixeltop=";ds="";sd=".style";
}
objectx="object11"
xx=-70;
yy=-70;
ob=11;
}

function setobject(a) {
objectx="object"+a;
ob=a;
xx=eval("xpos"+a);
yy=eval("ypos"+a);
}

function getobject() {
if (isnav) document.captureevents(event.mousemove);
}

function releaseobject() {
if (isnav) document.releaseevents(event.mousemove);
check="no";
objectx="object11";
document.close();
}

function moveob() {
eval(ds + objectx + sd + h + xpos);
eval(ds + objectx + sd + v + ypos);
}

var isnav = (navigator.appname.indexof("netscape") !=-1);
var isıe = (navigator.appname.indexof("microsoft") !=-1);
nsvalue=(document.layers);
check="no";
function movehandler(e) {
xpos = (isıe) ? event.clientx : e.pagex;
ypos = (nsvalue) ? e.pagey : event.clienty;
if (check=="no") {
diffx=xx-xpos;
diffy=yy-ypos;
check="yes";
if (objectx=="object11") check="no";
}
xpos+=diffx;
ypos+=diffy;
if (ob=="1") xpos1=xpos,ypos1=ypos;
moveob();
}
if (isnav) {
document.captureevents(event.clıck);
document.captureevents(event.dblclıck);
}
xpos1=450;  // burası (sol tarafa olan uzaklık)
ypos1=150;  // ve burası (üst tarafa olan uzaklık)
xpos11 = -50;
ypos11 = -50;
xpos=5;
ypos=5;
document.onmousemove = movehandler;
document.onclick = getobject;
document.ondblclick = releaseobject;
//  end -->
</script>

bu kodları tabloyu koymak istediğiniz sayfaya yerleştiriniz.kodları sayfanın <head>...</head> etiketleri arasına koyunuz.daha sonra hareketli tablonuzu sayfanıza koyacaksınız.fakat sadece <table> etiketi ile değil.bu hareketli tablonuzun <dıv> etiketi ile sayfadaki yerini belirleyeceksiniz.aşağıdaki örnek kodlar bulacaksınız burada değişecek yerler “left:450px;top:150px” şeklindeki yerler.pixel cinsinden bu değerleri gireceksiniz.ilk değer tablonun sol tarafa olan uzaklığı, ikinci değerse tablonun üst tarafa olan uzaklığı.
bundan başka çok küçük bir değişiklik daha yapacaksınız.yukarıdaki kodlarda “burası, ve burası” diye belirtilen sayıları da az önce değiştirdiğiniz sayılarla aynı şekilde değiştirerek yapmanız gerekenleri bitireceksiniz.

<html>
<head>
<script language=”javascript” src=”tablom.js”></script>
<tıtle>canlı tablom</tıtle>
</head>
<body onload="checkversion4()">

<b>tabloyu canlandırmak için "tıklayın" yazısına tıklayın.böylece tablo canlanacak.bırakmak istediğiniz zaman çift tıklayın</b>
<br>
<div id="object1" style="position:absolute; visibility:show; left:450px; top:150px; z-index:2">
<table border=1 bordercolorlight="silver" bordercolordark="white" cellspacing="0" cellpadding=2>
<tr>
<td bgcolor=#eeeeee><a href="javascript:void(0)" onmousedown="setobject(1)"><font face="verdana" size="1">tıklayın!</font></a></td>
</tr>
<tr>
<td>
<a href="javascript:void(0)"><font face="verdana" size="1">öğe 1</font></a><br>
<a href="javascript:void(0)"><font face="verdana" size="1">öğe 2</font></a><br>
</td>
</tr>
</table>
</div>

<div id="object11" style="position:absolute; visibility:show; left:-70px; top:-70px; z-index:2">
</div>


 

maxiasp.net
maxiasp.com
evren ayan
yusuf öztürk
windowsclient.net
thewpfblog.com
msakademik.net
bildirgec
burak selim şenyurt
yazgelistir.com
cocuk.com

ffwinmobile
secim2007
pixelMaxi
db2class
filmhatalari
Tarihci



bu site bahadır arslan tarafından tasarlanmış ve kodlanmıştır