• Status: Solved
• Priority: Medium
• Security: Public
• Views: 208

# Falling links that stack on each other

Hello,
this is maybe best solved with DHTML and to complex to be asked but I give it a try here.

I would like to have a code for 6 links that fall down from the top, one by one with a time intervall, they stack on each other. After the process has ended it should start over.
I try to illustrate it below :)

1)         2)     3)   etc
.           .       .

0
Jennie2004
• 4
• 3
1 Solution

Commented:
Example:

<html>
<script type="text/javascript">

var startPos = [0,100,100,200,200,200];    // X position of links
var initScrollHeight;
var currentScrollHeight;
function init(firstRun){
var el = document.createElement('A');
el.style.position='absolute';
el.style.display='none';
el.style.left=startPos[no];
el.style.top='0px';
document.body.appendChild(el);
}
if(firstRun){
initScrollHeight = document.body.clientHeight/1 - 25;
}
currentScrollHeight = initScrollHeight;

startFalling();
}

var loopCounter=0;
var currentX = 0;
function startFalling(){
var yPos = el.style.top.replace('px','');
yPos = yPos/1 + 5;    // Position change for each iteration of loop
el.style.top = yPos + 'px';
if(yPos/1>currentScrollHeight){
loopCounter++;
var thisLeft= obj.style.left.replace('px','');
if(thisLeft==currentX){
currentScrollHeight-=20;
}else{
currentScrollHeight = initScrollHeight;
}
currentX = thisLeft;
}
}

}else{
currentX = 0;
loopCounter=0;
el.style.top='0px';
el.style.display='none';
}
currentScrollHeight = initScrollHeight;

}
setTimeout('startFalling()',2);    // Speed
}

</script>

</body>
</html>
0

Author Commented:
Haha! Batalf it is you! I thought that I would have to remove this question after a couple of weeks.
But I turned out that you came up with the answer while I was trying to write an email :)

Is there a way to set up so that there is timeintervall pause after all 6 have loaded?
and to set what y-pos the bottom should start building from?
I am very impressed!
0

Commented:
Thank you !

Here's the new code where you could specify startY

var startY = 40;

and how long to wait after all 6 have been loaded

setTimeout('restart()',2000);

= 2 seconds.

<html>
<script type="text/javascript">

var startPos = [0,100,100,200,200,200];      // X position of links
var initScrollHeight;
var currentScrollHeight;
var startY = 40;
function init(firstRun){
var el = document.createElement('A');
el.style.position='absolute';
el.style.display='none';
el.style.left=startPos[no];
el.style.top=startY+'px';
document.body.appendChild(el);
}
if(firstRun){
initScrollHeight = document.body.clientHeight/1 - 25;
}
currentScrollHeight = initScrollHeight;

startFalling();
}

var loopCounter=0;
var currentX = 0;
function startFalling(){
var yPos = el.style.top.replace('px','');
yPos = yPos/1 + 5;      // Position change for each iteration of loop
el.style.top = yPos + 'px';
if(yPos/1>currentScrollHeight){
loopCounter++;
var thisLeft= obj.style.left.replace('px','');
if(thisLeft==currentX){
currentScrollHeight-=20;
}else{
currentScrollHeight = initScrollHeight;
}
currentX = thisLeft;
}
}
setTimeout('startFalling()',2);      // Speed
}else{
currentX = 0;
loopCounter=0;
currentScrollHeight = initScrollHeight;
setTimeout('restart()',2000);      // Timeout between loops
}

}

function restart(){
el.style.top=startY+'px';
el.style.display='none';
}
startFalling()

}

</script>

</body>
</html>
0

Author Commented:
:D
I am sorry I wasn't clear. Now link1 starts at 40 which is good and usable to me but finishes at the bottom of the page.
I would like it to finish at y-position 100 for example. Fall between 40 to 100 in y-position.
Hope it doesn't give any problem...
I am sorry Maestro.
0

Commented:
Change

initScrollHeight = document.body.clientHeight/1 - 25;

to

initScrollHeight = 100;

where 100 is pixels from top edge of the browser

0

Author Commented:
Thanks! You turn nightmares into laughter :D
0

Commented:
You're welcome:-)