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

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
.           .       .
.           .       link3
.           link2  link2
link1     link1  link1

Then I can adjust it with inserting different links and timeintervalls.



0
Jennie2004
Asked:
Jennie2004
  • 4
  • 3
1 Solution
 
BatalfCommented:
Example:

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


var linkUrls = ['http://www.whatever.com','http://www.whatever.com','http://www.whatever.com','http://www.whatever.com','http://www.whatever.com','http://www.whatever.com']
var linkTitles = ['link1','link2','link3','link4','link5','link6'];    // Text of links
var startPos = [0,100,100,200,200,200];    // X position of links
var initScrollHeight;
var currentScrollHeight;
function init(firstRun){
    for(var no=0;no<linkUrls.length;no++){
        var el = document.createElement('A');
        el.href = linkUrls[no];
        el.id = 'myLink'+no;
        el.innerHTML = linkTitles[no];
        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(){
    if(init)document.getElementById('myLink0').style.display='inline'
    if(loopCounter<linkUrls.length){
        var el = document.getElementById('myLink'+loopCounter);
        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++;        
            if(document.getElementById('myLink'+loopCounter)){
                var obj = document.getElementById('myLink'+loopCounter);
                var thisLeft= obj.style.left.replace('px','');                
                if(thisLeft==currentX){
                    currentScrollHeight-=20;                                        
                }else{
                    currentScrollHeight = initScrollHeight;
                }
                currentX = thisLeft;                
                document.getElementById('myLink'+loopCounter).style.display='inline';
            }
        }    
       
    }else{
        currentX = 0;
        loopCounter=0;
        for(var no=0;no<linkUrls.length;no++){
            var el = document.getElementById('myLink'+no);            
            el.style.top='0px';
            el.style.display='none';
        }
        currentScrollHeight = initScrollHeight;
   
    }
    setTimeout('startFalling()',2);    // Speed
}

</script>
</head>
<body onload="init(true)">

</body>
</html>
0
 
Jennie2004Author 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
 
BatalfCommented:
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>
<head>
<script type="text/javascript">


var linkUrls = ['http://www.whatever.com','http://www.whatever.com','http://www.whatever.com','http://www.whatever.com','http://www.whatever.com','http://www.whatever.com']
var linkTitles = ['link1','link2','link3','link4','link5','link6'];      // Text of links
var startPos = [0,100,100,200,200,200];      // X position of links
var initScrollHeight;
var currentScrollHeight;
var startY = 40;
function init(firstRun){
      for(var no=0;no<linkUrls.length;no++){
            var el = document.createElement('A');
            el.href = linkUrls[no];
            el.id = 'myLink'+no;
            el.innerHTML = linkTitles[no];
            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(){
      if(init)document.getElementById('myLink0').style.display='inline'
      if(loopCounter<linkUrls.length){
            var el = document.getElementById('myLink'+loopCounter);
            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++;            
                  if(document.getElementById('myLink'+loopCounter)){
                        var obj = document.getElementById('myLink'+loopCounter);
                        var thisLeft= obj.style.left.replace('px','');                        
                        if(thisLeft==currentX){
                              currentScrollHeight-=20;                                                            
                        }else{
                              currentScrollHeight = initScrollHeight;
                        }
                        currentX = thisLeft;                        
                        document.getElementById('myLink'+loopCounter).style.display='inline';
                  }
            }      
            setTimeout('startFalling()',2);      // Speed
      }else{
            currentX = 0;
            loopCounter=0;
            currentScrollHeight = initScrollHeight;
            setTimeout('restart()',2000);      // Timeout between loops      
      }
      
}

function restart(){
      for(var no=0;no<linkUrls.length;no++){
            var el = document.getElementById('myLink'+no);                  
            el.style.top=startY+'px';
            el.style.display='none';
      }      
      startFalling()
      
}

</script>
</head>
<body onload="init(true)">

</body>
</html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Jennie2004Author 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
 
BatalfCommented:
Change

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

to

initScrollHeight = 100;

where 100 is pixels from top edge of the browser

0
 
Jennie2004Author Commented:
Thanks! You turn nightmares into laughter :D
0
 
BatalfCommented:
You're welcome:-)

Glad I could help!

Batalf
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now