pause a ticker when onclick toggle is used

[rustyarmour]

The following code is used to automatically rotate 4 pieces of html on my page. I also need it to be regulated by the user with small buttons, so I've added the toggle.

The issue I have is that I don't know how to make the ticker pause when the toggle is implemented with the onclick. Using the code below, the onclick works, but it also still shows the div that is currently in rotation below it.

Any ideas? Thanks much!

var tickspeed=4000
var enablesubject=0 

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

var firstDiv=0
var allDivs=0

function contractall(){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}

function expandone(){
var firstDivObj=document.getElementById("dropmsg"+firstDiv)
contractall()
document.getElementById("dropcontentsubject").innerHTML=firstDivObj.getAttribute("subject")
firstDivObj.style.display="block"
firstDiv=(firstDiv<allDivs-1)? firstDiv+1 : 0
setTimeout("expandone()",tickspeed)
}

function startscroller(){
while (document.getElementById("dropmsg"+allDivs)!=null)
allDivs++
expandone()
if (!enablesubject)
document.getElementById("dropcontentsubject").style.display="none"
}

if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
     e.style.display = 'none';
    else
     e.style.display = 'block';
  }

[Fotiman]

You probably want to record the id of the setTimout call, and then call cancelTimeout on that id when the user clicks one of the buttons (if I understand your problem correctly). For example:

setTimeout("expandone()",tickspeed)

would become

timerId = setTimeout(expandone,tickspeed);

(note, I've changed "expandone()" from the string to the function reference of expandone, which is more efficient).
And then you could call:

cancelTimeout(timerId);

timerId would need to be a global like firstDiv.

[rustyarmour]

Hi Fotiman,

Thanks, but I am still having issues. With onclick, the second image is still showing below the first one. Also, with the changes above, depending on where we are in the rotation cycle, the button clicked image will either be the top image (which is what I want because it displays within the styled div) or, if the onclick image falls after the current displayed image in the rotation sequence, it will show up as the second image underneath. Ugh...Help?

[Fotiman]

the second image is still showing below the first one.

Oh, I think I see what you're trying to do. You probably want to do something like this:

function toggle_visibility(id) {
  var e = document.getElementById(id);
  contractall();
  if(e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

Note, I've added a call to contractall. However, the timer will still be running in this case, but I'm not sure what your expected behavior is with regards to the timer.

Also, you could rewrite that to be a little more compact:

function toggle_visibility(id) {
  var e = document.getElementById(id);
  contractall();
  e.style.display = (e.style.display == 'block'? 'none': 'block');
}

[rustyarmour]

Awesome Fotiman....You are THE Man! I'm not too concerned about the timer at this point. It's mainly to allow the user to skip ahead if they want, or back if they missed something. The functionality is now there. BIG thanks for your help.

[Fotiman]

You're welcome. :)