javascript alternative to marquee with hover pause

Question

I know the html marquee tag is deprecated and for proper markup we shouldn't use it so I'm trying to write an alternative with javascript. My problem is the following:

I need to have directional arrows to change the scroll direction

I need it to pause on hover

Here is what I have so far....

<style type="text/css">

#container-HmS {
 position:relative;
 width:710px;
 height:75px;
 overflow:hidden;
 border:1px solid #ccc;
 background-color:#fff;
 margin:0 auto;
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#div1-HmS {
 position:absolute;
 left:0px;
 top:0px;
 width:708px;
 height:73px;
}
#div2-HmS {
 position:absolute;
 left:713px;
 top:0px;
 width:713px;
 height:73px;
 }

</style> 
<script type="text/javascript">
 var m=0;
 var n=713;
 var speed=20;
 function scrollPics() {
 document.getElementById('div1-HmS').style.left=m+'px';
 document.getElementById('div2-HmS').style.left=n+'px';
 m--;
 n--;
 if(m==-713) {
 m=713;
 }
if(n==-713) {
 n=713;
 }
setTimeout('scrollPics()',speed);
 } 
window.onload=function() {
 scrollPics();
 }
</script>


<div id="container-HmS">

<div id="div1-HmS">
<a href="http://store.vibrant.com/Cisco_bymfg_9-8-1.html"><img src="assets/templates/v32028/images/logo-slider_01.png" alt=""></a>
<a href="http://store.vibrant.com/Dell_bymfg_4-8-1.html"><img src="assets/templates/v32028/images/logo-slider_02.png" alt=""></a>
<a href="http://store.vibrant.com/HP_bymfg_18-8-1.html"><img src="assets/templates/v32028/images/logo-slider_03.png" alt=""></a>
<a href="http://store.vibrant.com/ibm-_bymfg_133-8-1.html"><img src="assets/templates/v32028/images/logo-slider_04.png" alt=""></a>
<a href="http://store.vibrant.com/search.asp?keyword=oracle"><img src="assets/templates/v32028/images/logo-slider_05.png" alt=""></a>
<a href="http://store.vibrant.com/EMC_bymfg_22-8-1.html"><img src="assets/templates/v32028/images/logo-slider_06.png" alt=""></a>
</div>

<div id="div2-HmS">
<a href="http://store.vibrant.com/Cisco_bymfg_9-8-1.html"><img src="assets/templates/v32028/images/logo-slider_01.png" alt=""></a>
<a href="http://store.vibrant.com/Dell_bymfg_4-8-1.html"><img src="assets/templates/v32028/images/logo-slider_02.png" alt=""></a>
<a href="http://store.vibrant.com/HP_bymfg_18-8-1.html"><img src="assets/templates/v32028/images/logo-slider_03.png" alt=""></a>
<a href="http://store.vibrant.com/ibm-_bymfg_133-8-1.html"><img src="assets/templates/v32028/images/logo-slider_04.png" alt=""></a>
<a href="http://store.vibrant.com/search.asp?keyword=oracle"><img src="assets/templates/v32028/images/logo-slider_05.png" alt=""></a>
<a href="http://store.vibrant.com/EMC_bymfg_22-8-1.html"><img src="assets/templates/v32028/images/logo-slider_06.png" alt=""></a>
</div>

</div>

I am completly out of ideas....anyone?

Answer 1

Use setInterval instead of setTimeout . You can use clearInterval to stop the interval from triggering the given function. To change directions, just do speed *= -1 .

Here's an example of how it could look like: http://jsfiddle.net/zapux/

Answer 2

I felt the other answers could be improved for you. I have commented the source code and changed things where I felt was appropriate.

Source:

var m = 0;
var n = 713;
var speed = 20;
var scrollDirection = -1;
var timeout; // this holds the timeout for the animation

// collect all of the elements we are going to be working with once instead of each time, collecting them is expensive and we wan't to reduce that as much as possible. 
var wrap1 = document.getElementById('div1-HmS'),
    wrap2 = document.getElementById('div2-HmS'),
    invert = document.getElementById('invert'),
    cont = document.getElementById('container-HmS');

// start the scroll (because the function is hoisted don't be concerned this is above 
scrollPics();
// when they click on the invert button
invert.addEventListener('click', function() {
    scrollDirection *= -1; // change direction
}, false);
// when they mouse over the container
cont.addEventListener('mouseover', function() { 
    clearTimeout(timeout); // clear the timeout (pause the animation)
}, false);
// when they mouse out
cont.addEventListener('mouseout', function() {
    timeout = setTimeout(scrollPics, speed); // re-start the animation
}, false);

function scrollPics() {
    // set the left position
    wrap1.style.left = m + 'px';
    wrap2.style.left = n + 'px';
    // increment the new left position
    m += scrollDirection;
    n += scrollDirection;
    // reset the left if it is over the limits
    if (m == -713) {
        m = 713; // these limits can be obtained with window.getComputedStyle(cont).width
    }
    if (n == -713) {
        n = 713;
    }
    // make the function recursive with the timeout.
    timeout = setTimeout(scrollPics, speed);
}

Demo:

http://jsfiddle.net/zapux/3/