PDA

Volledige versie bekijken : [JS] getPos voor div of table


Terror-web
%Europe/Berlin %603 %2007, 15:29
Hallo FF,

Ben bezig met een idee wat ik had. Het betreft een pagina waarna in gescrolled kan worden, van boven naar beneden en andersom. Ik heb hierbij het volgende stukje code:
<script language=javascript>

/************************************************** *********/
/* let op Alle plaatjes moeten dezelfde grootte hebben */
/************************************************** *********/

bilder = new Array("images/welkom.png","images/home.png","images/historie.png","images/hovek.png","images/projecten.png","images/leveranciers.png","images/contact.png","images/werkgebied.png"); // naam van plaatjes

/**************************************************/

rahmenBreite = 775; // de breedte van dit raam is dezelfde als het plaatje
rahmenHoehe = 425; // de hoogte van dit raam is dezelfde als het plaatje
srollVarianten = 0; // 0 = plaatjes gaan van onderen naar boven, 1 = van rechts naar links

/**************************************************/

(srollVarianten==0) ?
document.write("<div id='jumper' style='position:relative;top:0;left:0;'>") :
document.write("<div id='jumper' style='position:relative;left:0;top:18;'>");

(srollVarianten==0) ?
document.write("<table width="
+rahmenBreite+" cellspacing=0 cellpadding=0>") :
document.write("<table height="
+rahmenHoehe+" cellspacing=0 cellpadding=0>");

for (i=0;i<bilder.length;i++)
{
(srollVarianten==0) ?
document.write("<tr><td width="
+rahmenBreite+" height="
+rahmenHoehe+">") :
document.write("<td width="
+rahmenBreite+" height="
+rahmenHoehe+">");

(srollVarianten==0) ?
document.write("<img src="+bilder[i]+"></td></tr>"
+"<tr><td><br></td></tr>") :
document.write("<img src="+bilder[i]+"></td>"
+"<td><div style='width:25'></div></td>");
}

document.write("</table></div></div>");

document.write("</center>");

var thePos=dimx=Dimx=0,time;

function getPos(pos)
{
thePos = pos-(pos*2)+18;

browser = navigator.appName;
usAgent = navigator.userAgent;

if (browser == "Microsoft Internet Explorer" || usAgent.indexOf("Opera") >- 1)
clearTimeout(time);

dmx();
}
function dmx()
{
time = setTimeout("dmx()",0);

dimx = Math.round(Dimx+=((thePos)-Dimx)*4/20);

if (document.getElementById)
{
(srollVarianten==0) ?
document.getElementById("jumper").style.top = dimx :
document.getElementById("jumper").style.left = dimx;
}
else if (document.all)
{
(srollVarianten==0) ?
document.all["jumper"].style.top = dimx :
document.all["jumper"].style.left = dimx;
}

if (thePos == dimx) clearTimeout(time);
}
</script>
Hij verspringt door de volgende link, waarbij 0 de waarde is van de y:
<a href='javascript:getPos("0")' onfocus='this.blur()'>link</a>
Orginele script / Online voorbeeld. (http://www.java24.net/scripts/grafik/dmx-slidershow.html)

Heel mooi dat dit JS plaatjes automatisch onder elkaar zet, maar niet als je er HTML in wilt verwerken!
Ik zie dat onder (srollVarianten==0) de HTML in elkaar wordt gezet. Hier zou ik graag mijn Div's met tekst/links/enz in willen voegen en het scrollen behouden. Nu krijg ik bij elke poging een fout en ben ik zelf niet zo'n JS-held.

Let wel: ik ben niet op zoek naar een kant-en-klare oplossing. Ben heel google al afgeweest op "getPos" en andere termen. Wie weet waar ik beter op kan zoeken, een oplossing of een betere/andere manier?


Vraag 2:
Ik wil dit script graag uitbreiden naar het scrollen naar y en x, wie weet een goed javascript (online) handboek?

liendp
%Europe/Berlin %620 %2007, 15:53
Kan je anders eens snel de link geven waar jou voorbeeld staat dat werkt al een stuk sneller.

Terror-web
%Europe/Berlin %650 %2007, 16:36
Orginele script / Online voorbeeld. (http://www.java24.net/scripts/grafik/dmx-slidershow.html)
Heb m'n post iets aangepast, hier een online voorbeeld.