Pause slideshow on mouseover

rcrago · Joined: 08 Feb 2010 Posts: 6

I would like to have an onmouseover event pause each div in this script. I've tried several things and can't get it to work. I guess I'll need the code and instructions on where to put it. Can anyone help?

<html>
<head>
</head>
<body>
<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 169px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}

window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

<table cellspacing="0" align="center" bgcolor="#E8E8E8" border="1" bordercolor="#CC0000"><tr><td align="center">
<div class="dyncontent" style="display: block">First scroller content</div>
<div class="dyncontent">Second scroller content</div>
<div class="dyncontent">Third scroller content</div>
<div class="dyncontent">Fourth scroller content</div>
<div class="dyncontent">Fifth scroller content</div>
</tr></td></table>
</body>
</html>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4273 Location: MS

Have you played with:

rcrago · Joined: 08 Feb 2010 Posts: 6

Thanks for the reply. I tried the code (onmouseover="this.stop()" ) every way I could think of and could not get it to work. I also tried, in every way I could think of, this suggestion I found elsewhere:
-----------------------------------------------
"personally... i would create a global boolian variable
var pause=false;
then in your rotating function
if(pause==true) return;
then you simply put an onmouseover/out pause=true/false;
this way it will start rotating onload(when you set that part of the program up) and when you mouseover it, it'll pause, and mouseout it'll resume where it left off... "
-----------------------------------------------
Most times it showed no result. The most promising result I got was an error on page message.

rcrago · Joined: 08 Feb 2010 Posts: 6

I kept playing with this and found a solution. No further replies needed.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4273 Location: MS

That's great news. If you would, would you post your solution here for any members that may have been following this topic? Thank you.

rcrago · Joined: 08 Feb 2010 Posts: 6

This is the script that worked for me:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var pause = false;
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 169px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
if(pause==true) return;
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}

window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

<table cellspacing="0" align="center" bgcolor="#E8E8E8" border="1" bordercolor="#CC0000"><tr><td align="center">
<div class="dyncontent" style="display: block" onmouseover="pause=true;" onmouseout="pause=false;">First scroller content</div>
<div class="dyncontent" onmouseover="pause=true;" onmouseout="pause=false;">Second scroller content</div>
<div class="dyncontent" onmouseover="pause=true;" onmouseout="pause=false;">Third scroller content</div>
<div class="dyncontent" onmouseover="pause=true;" onmouseout="pause=false;">Fourth scroller content</div>
<div class="dyncontent" onmouseover="pause=true;" onmouseout="pause=false;">Fifth scroller content</div>
</tr></td></table>
</body>
</html>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4273 Location: MS

Thank you very much for taking the time to post the solution. Sorry we weren't able to help you quicker.