Need help with a javascript transition

scoobydoo9749

So I was on here the other day looking for help with the getElementByName method and recieved excellent help quickly. (Thankyou GITS) Now, I'm looking for some help with making some dynamic content transition (every 4 seconds).
Essentially what I have is 5 hidden divs in a php page. In my javascript code they get stored into an array and the setTimeout method is used to call then them one after the other. Instead of just having them switch I would like them to have an animated transition (a vertical push to be exact). The js code is listed below and the website to view this code is www.thenicheplayers.com

Expand|Select|Wrap|Line Numbers

 
// Rotating headlines
 
var headlines = [];

var idx = -1;
 
function get_headline_containers() {

    var all_divs = document.getElementsByTagName('div');

    var hdl_divs = [];
 
    for (var i = 0; i < all_divs.length; i++) {

        var div = all_divs[i];
 
        if (div.className == 'headline') {

            hdl_divs.push(div);

        }

    }
 
    return hdl_divs;

}
 
function display_headline(idx) {

    for (var i = 0; i < headlines.length; i++) {

        headlines[i].style.display = i == idx ? 'block' : 'none';

    }

}
 
function rotate_headlines() {

    idx++;
 
    if (idx >= headlines.length) {

        idx = 0;

    }
 
    display_headline(idx);
 
    window.setTimeout(function() {

        rotate_headlines();

    }, 4000);

}
 
function init_page() {

    headlines = get_headline_containers();

    rotate_headlines();

}

pbmods

Heya, Scooby.

Please use CODE tags when posting source code:

[CODE=javascript]
JavaScript code goes here.
[/CODE]

acoder

What do you mean by a vertical push? Could you give an example?

scoobydoo9749

http://elouai.com/javascript/javascript-transitions-6.php

If you scroll halfway down the page theirs buttons in two columns. Left hand side, the second one says "transition Slide push". It works if youre using IE but not Firefox. Thats the kind of animation Im looking for but the stipulations are:
1) It would be pushed down, instead of pushed to the left
2) It would have better browser compatibility (ie IE, Firefox, and Safari)
3) It would go every 4 seconds, as called out by the setTimeout method in the code above.

gits

hi ...

may be you want to have a look at the mootools ... goto the demo page and have a look at the slide transitions ... perhaps you will find what you are looking for ...

kind regards

Need help with a javascript transition

re: Need help with a javascript transition

re: Need help with a javascript transition

re: Need help with a javascript transition

re: Need help with a javascript transition

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about