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

Need to toggle STYLE.DISPLAY value of elements in an ARRAY of DIV tags.

I have a set of <DIV>'s with identical ID's such as the following:

<DIV ID="content" STYLE="display:inline;">Display Text</DIV>
<DIV ID="content" STYLE="display:none;">Display Text</DIV>
<DIV ID="content" STYLE="display:none;">Display Text</DIV>
<DIV ID="content" STYLE="display:none;">Display Text</DIV>

Notice that only the first one is actually visible.

I need to write a function that loops through the array DOCUMENT.ALL("content") and sets STYLE.DISPLAY = "none" for all elements, records which one was "inline" last, and set the next element in the array to "inline".  If it gets to the last element, then the first one needs to be set to "inline", and the sequence repeats.

The function will be called with a timer.  So each time it runs, it will examine the state of the DOCUMENT.ALL("content") elements, and roll the "inline" property to the next one in sequence.

Here's a visualization of how the function should operate if run for 7 iterations in sequence on 4 DIV objects.  X stands for "style.display = inline", O stands for "style.display = none".

1:   X    O    O    O
2:   O    X    O    O
3:   O    O    X    O
4:   O    O    O    X
5:   X    O    O    O
6:   O    X    O    O
7:   .......


Any takers?
0
MedtronicVascSR
Asked:
MedtronicVascSR
  • 2
1 Solution
 
Ryan9999Commented:
you shouldn't have multiple id's with the same value.
what are you trying to accomplish with this? i think you
are just wanting the text to change with a timer is this
correct? if it is it would be better to make and array of
the different text's you want displayed and then change
the node value for the div's text node with the setTimeout
function.
0
 
ZvonkoSystems architectCommented:
Here my example:

<html>
<head>
<title>Zvonko &#42;</title>
<script>
function rotate(){
  var cnt = document.getElementById("content");
  cnt = cnt.getElementsByTagName("div");
  for(var i=0;i<cnt.length;i++){
    if(cnt[i].style.display=="inline"){
      break;
    }
  }
  cnt[i].style.display="none";
  var n = i+1;
  if(n>=cnt.length)n=0;
  cnt[n].style.display="inline";
  setTimeout(rotate, 1000);
}
</script>
</head>
<body onLoad="rotate()">
<DIV ID="content">
<DIV STYLE="display:none;">Display Text 1</DIV>
<DIV STYLE="display:none;">Display Text 2</DIV>
<DIV STYLE="display:none;">Display Text 3</DIV>
<DIV STYLE="display:inline;">Display Text 4</DIV>
</DIV>
</body>
</html>

0
 
MedtronicVascSRAuthor Commented:
ZVonko, you're a MACHINE!  That works beautifully.

Best regards,
Carlos
0
 
ZvonkoSystems architectCommented:
:-)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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