Confused using getElementsByTagName

[scoobydoo9749]

hey everyone,
so ive been going around the internet all day trying to help guide me in creating a div that rotates content every 4 seconds using ajax and ive decided a forum post might be the most effective at this point. my js script code below is obviously and the current problem im having is figuring out how to build the array to store the information of each of the hidden divs (class = "headline").

// Rotating headlines
 
 
function headlineRotate ( )
{
    var HeadArray=new Array()
    var numofHeads=document.getElementsByTagName("div");
    var x = 0
 
    for (var i=0; i<numofHeads; i++){
        if (document.className=="headline"){
            HeadArray.push(alldivs[i])
        }
    }  
  if (x<3){
      x++;
  }
  else{
      x=0;
  }
  document.getElementById('currentHeadline').innerHTML = numofHeads[3].value;
}
 
function rotater() {
    setInterval ( "headlineRotate()", 4000);
}

[gits]

hi ...

welcome to TSDN ...

as far as i can see ... the script wouldn't work in any way ... sorry that i have to say that ... but it doesn't matter ... lets try from the beginning, with an analysis of the task you have ... please show the html you are using and tell us how you fill the hidden? divs with content. then tell us exactly what your 'rotator'-function should do ... may be you don't need 4 divs ... simply one that is updated with content that we might get from a list (object that was filled instead of 4 divs) ...

kind regards ...

[scoobydoo9749]

This would be the block of code Im working from. My plan was to have the getElementsByTagName load all my divs then from there select the ones in the class of "headline". Into an array via the for loop. From there display them one after another. My main question was how to get them loaded into that array but if you have a better suggestion on how to achieve what I'm looking to do here please fill me in (obviously Im somewhat new to js).

//Top 5 headlines from the different sections
echo "<div class=\"headline\" style=\"background:#e9e9e9\">";
echo "<div align=\"left\" style=\"background: url(topstoriesbg.jpg) center center repeat-x\"><img src=\"politicsthumb.gif\"/>&nbsp;&nbsp;<a href=\"http://www.thenicheplayers.com/news/politics.php\" class=\"topStoryHeader\">Politics</a></div><br />";
echo "<img src=\"images/".$political['img']."\" width=\"160\" height=\"175\" style=\"float: left; margin: 0 10px 5px; border: 4px; border-color: #5F7E93; border-style: inset\" />";
echo "<br style=\"clear: left\" />";
echo "<a href=\"news.php?news_id=".$political['filename']."\" class=\"topStory\">".$political['title']."</a>";
echo "<br style=\"clear: left\" />";
echo "</div>";
 
echo "<div class=\"headline\" style=\"background:#e9e9e9\">";
echo "<div align=\"left\" style=\"background: url(topstoriesbg.jpg) center center repeat-x\"><img src=\"entertainmentthumb.gif\"/>&nbsp;&nbsp;<a href=\"http://www.thenicheplayers.com/news/entertainment.php\" class=\"topStoryHeader\">Entertainment</a></div><br />";
echo "<img src=\"images/".$entertainment['img']."\" width=\"160\" height=\"175\" style=\"float: left; margin: 0 10px 5px; border: 4px; border-color: #5F7E93; border-style: inset\" />";
echo "<br style=\"clear: left\" />";
echo "<a href=\"news.php?news_id=".$entertainment['filename']."\" class=\"topStory\">".$entertainment['title']."</a>";
echo "<br style=\"clear: left\" />";
echo "</div>";
 
echo "<div class=\"headline\" style=\"background:#e9e9e9\">";
echo "<div align=\"left\" style=\"background: url(topstoriesbg.jpg) center center repeat-x\"><img src=\"sportsthumb.gif\"/>&nbsp;&nbsp;<a href=\"http://www.thenicheplayers.com/news/sports.php\" class=\"topStoryHeader\">Sports</a></div><br />";
echo "<img src=\"images/".$sports['img']."\" width=\"160\" height=\"175\" style=\"float: left; margin: 0 10px 5px; border: 4px; border-color: #5F7E93; border-style: inset\" />";
echo "<br style=\"clear: left\" />";
echo "<a href=\"news.php?news_id=".$sports['filename']."\" class=\"topStory\">".$sports['title']."</a>";
echo "<br style=\"clear: left\" />";
echo "</div>";
 
echo "<div class=\"headline\" name=\"headline\" style=\"background:#e9e9e9\">";
echo "<div align=\"left\" style=\"background: url(topstoriesbg.jpg) center center repeat-x\"><img src=\"businessthumb.gif\"/>&nbsp;&nbsp;<a href=\"http://www.thenicheplayers.com/news/business.php\" class=\"topStoryHeader\">Business</a></div><br />";
echo "<img src=\"images/".$business['img']."\" width=\"160\" height=\"175\" style=\"float: left; margin: 0 10px 5px; border: 4px; border-color: #5F7E93; border-style: inset\" />";
echo "<br style=\"clear: left\" />";
echo "<a href=\"news.php?news_id=".$business['filename']."\" class=\"topStory\">".$business['title']."</a>";
echo "<br style=\"clear: left\" />";
echo "</div>";
 
echo "<div class=\"headline\" name=\"headline\" style=\"background:#e9e9e9\">";
echo "<div align=\"left\" style=\"background: url(topstoriesbg.jpg) center center repeat-x\"><img src=\"miscthumb.gif\"/>&nbsp;&nbsp;<a href=\"http://www.thenicheplayers.com/news/misc.php\" class=\"topStoryHeader\">Miscellaneous</a></div><br />";
echo "<img src=\"images/".$misc['img']."\" width=\"160\" height=\"175\" style=\"float: left; margin: 0 10px 5px; border: 4px; border-color: #5F7E93; border-style: inset\" />";
echo "<br style=\"clear: left\" />";
echo "<a href=\"news.php?news_id=".$misc['filename']."\" class=\"topStory\">".$misc['title']."</a>";
echo "</div>";
echo "</div>";
mysql_close($con);
?>
<div class="pagination" id="currentHeadline">This sucks!</div>
<p>
<script type="text/javascript">
rotater()
</script>
</p>

[gits]

hmmm ...

i don't see any ajax-code there ... but let me summarize. you have some divs and fill them in php with the current content. i assume they are hidden and all of them have the className 'headline' assigned? ... now you want to display one of them every 4 seconds ...ok? there is no update of the content of the divs during site lifecycle or is it? so when its not and i'm right ... your idea wasn't that bad ... how do you hide the divs - is it declared in the 'headline'-class?

kind regards

[scoobydoo9749]

Correct, sorry for my inability to provide sufficient information today..I'm kinda all over the place with a few different things. The information in the mySQL database only gets updated daily so the divs do not need to be updated during the page life cycle. The "headline" class divs' display is set to hidden.

[gits]

hi ...

ok :) so lets start:

we create global vars and some functions:

var headlines = [];
var idx = 0;
 
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;
    }
 
    window.setTimeout(function() {
        display_headline(idx);
    }, 4000);
}
 
function init_page() {
    headlines = get_headline_containers();
    display_headline(idx);
    rotate_headlines();
}
 

in body's onload you call 'init_page()' ...

kind regards

[scoobydoo9749]

Alright its almost working perfectly except it only rotates once (just from the first headline to the second) then stops. I tried switching it to setInterval instead of setTimeout but that didn't fix it. The only thing I didn't do was put it in the body onload because this is a PHP include file so the body tag is not present in this block of code.

[gits]

arrgh ... my bad ... have a look:

function rotate_headlines() {
    idx++;
 
    if (idx > headlines.length) {
        idx = 0;
    }
 
    window.setTimeout(function() {
        display_headline(idx);
        rotate_headlines();
    }, 4000);
}
 

kind regards

[gits]

and a little bit better ;)

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();
}
 

[scoobydoo9749]

Thanks! It works beautifully I made to small adjustments 1) intial value for idx = -1 and 2)(idx >= because it started on the second div and showed a blank one at the end. Thanks again though, you saved me alot of time and frustration!

[gits]

hi ...

of course :) ... i forgot that after changing the initial call ...

glad to hear you go it working ... post back to the forum anytime you have more questions ...

kind regards