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") .

[CODE=javascript]// Rotating headlines


function headlineRotate ( )
{
var HeadArray=new Array()
var numofHeads=docu ment.getElement sByTagName("div ");
var x = 0

for (var i=0; i<numofHeads; i++){
if (document.class Name=="headline "){
HeadArray.push( alldivs[i])
}
}
if (x<3){
x++;
}
else{
x=0;
}
document.getEle mentById('curre ntHeadline').in nerHTML = numofHeads[3].value;
}

function rotater() {
setInterval ( "headlineRotate ()", 4000);
}[/CODE]

[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 getElementsByTa gName 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).

[CODE=php]//Top 5 headlines from the different sections
echo "<div class=\"headlin e\" style=\"backgro und:#e9e9e9\">" ;
echo "<div align=\"left\" style=\"backgro und: url(topstoriesb g.jpg) center center repeat-x\"><img src=\"politicst humb.gif\"/>&nbsp;&nbsp; <a href=\"http://www.thenichepla yers.com/news/politics.php\" class=\"topStor yHeader\">Polit ics</a></div><br />";
echo "<img src=\"images/".$politica l['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=".$pol itical['filename']."\" class=\"topStor y\">".$politica l['title']."</a>";
echo "<br style=\"clear: left\" />";
echo "</div>";

echo "<div class=\"headlin e\" style=\"backgro und:#e9e9e9\">" ;
echo "<div align=\"left\" style=\"backgro und: url(topstoriesb g.jpg) center center repeat-x\"><img src=\"entertain mentthumb.gif\"/>&nbsp;&nbsp; <a href=\"http://www.thenichepla yers.com/news/entertainment.p hp\" class=\"topStor yHeader\">Enter tainment</a></div><br />";
echo "<img src=\"images/".$entertainmen t['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=".$ent ertainment['filename']."\" class=\"topStor y\">".$entertai nment['title']."</a>";
echo "<br style=\"clear: left\" />";
echo "</div>";

echo "<div class=\"headlin e\" style=\"backgro und:#e9e9e9\">" ;
echo "<div align=\"left\" style=\"backgro und: url(topstoriesb g.jpg) center center repeat-x\"><img src=\"sportsthu mb.gif\"/>&nbsp;&nbsp; <a href=\"http://www.thenichepla yers.com/news/sports.php\" class=\"topStor yHeader\">Sport s</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=".$spo rts['filename']."\" class=\"topStor y\">".$sports['title']."</a>";
echo "<br style=\"clear: left\" />";
echo "</div>";

echo "<div class=\"headlin e\" name=\"headline \" style=\"backgro und:#e9e9e9\">" ;
echo "<div align=\"left\" style=\"backgro und: url(topstoriesb g.jpg) center center repeat-x\"><img src=\"businesst humb.gif\"/>&nbsp;&nbsp; <a href=\"http://www.thenichepla yers.com/news/business.php\" class=\"topStor yHeader\">Busin ess</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=".$bus iness['filename']."\" class=\"topStor y\">".$busine ss['title']."</a>";
echo "<br style=\"clear: left\" />";
echo "</div>";

echo "<div class=\"headlin e\" name=\"headline \" style=\"backgro und:#e9e9e9\">" ;
echo "<div align=\"left\" style=\"backgro und: url(topstoriesb g.jpg) center center repeat-x\"><img src=\"miscthumb .gif\"/>&nbsp;&nbsp; <a href=\"http://www.thenichepla yers.com/news/misc.php\" class=\"topStor yHeader\">Misce llaneous</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=".$mis c['filename']."\" class=\"topStor y\">".$misc['title']."</a>";
echo "</div>";
echo "</div>";
mysql_close($co n);
?>
<div class="paginati on" id="currentHead line">This sucks!</div>
<p>
<script type="text/javascript">
rotater()
</script>
</p>[/CODE]

[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:

[CODE=javascript]var headlines = [];
var idx = 0;

function get_headline_co ntainers() {
var all_divs = document.getEle mentsByTagName( '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(d iv);
}
}

return hdl_divs;
}

function display_headlin e(idx) {
for (var i = 0; i < headlines.lengt h; i++) {
headlines[i].style.display = i == idx ? 'block' : 'none';
}
}

function rotate_headline s() {
idx++;

if (idx > headlines.lengt h) {
idx = 0;
}

window.setTimeo ut(function() {
display_headlin e(idx);
}, 4000);
}

function init_page() {
headlines = get_headline_co ntainers();
display_headlin e(idx);
rotate_headline s();
}
[/CODE]

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:

[CODE=javascript]function rotate_headline s() {
idx++;

if (idx > headlines.lengt h) {
idx = 0;
}

window.setTimeo ut(function() {
display_headlin e(idx);
rotate_headline s();
}, 4000);
}
[/CODE]
kind regards

[gits]

and a little bit better ;)

[CODE=javascript]
function rotate_headline s() {
idx++;

if (idx > headlines.lengt h) {
idx = 0;
}

display_headlin e(idx);

window.setTimeo ut(function() {
rotate_headline s();
}, 4000);
}

function init_page() {
headlines = get_headline_co ntainers();
rotate_headline s();
}
[/CODE]

[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