'javascript code to stop text scrolling on mouseover and to start text scrolling on mouseout

The following is the javascript code for text scrolling. Can you please extend the javascript so that scrolling will be stopped when the mouse is on text and will start again once the mouse is out of text. Thanks in advance.

<html>
    <head>
        <style type="text/css">
        #scroll{
            position : absolute;
            white-space : nowrap;
            top : 0px;
            left : 200px;
        }
        #oScroll{
            margin : 0px;
            padding : 0px;
            position : relative;
            width : 200px;
            height : 20px;
            overflow : hidden;
        }
        </style>
        <script type="text/javascript">
        function scroll(oid,iid){
            this.oCont=document.getElementById(oid)
            this.ele=document.getElementById(iid)
            this.width=this.ele.clientWidth;
            this.n=this.oCont.clientWidth;
            this.move=function(){
                this.ele.style.left=this.n+"px"
                this.n--
                if(this.n<(-this.width)){this.n=this.oCont.clientWidth}
            }
        }
        var vScroll
        function setup(){
            vScroll=new scroll("oScroll","scroll");
            setInterval("vScroll.move()",20)
        }
        onload=function(){setup()}
        </script>
    </head>
    <body>
        <div id="oScroll">
            <div id="scroll">This is the scrolling text</div>
        </div>
    </body>
</html>
javascripthtmlcss


Solution 1:[1]

If you are looking for a marquee effect that stops on hover

      <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Go on... hover over me!</marquee>

Solution 2:[2]

Use clearInterval() to pause the text and setInterval() to resume again

<html>
<head>
    <style type="text/css">
        #scroll {
            position: absolute;
            white-space: nowrap;
            top: 0px;
            left: 200px;
        }

        #oScroll {
            margin: 0px;
            padding: 0px;
            position: relative;
            width: 200px;
            height: 20px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        var intervalHandle = null;
        function pauseScroll() {
            clearInterval(intervalHandle);
        }
        function resumeScroll() {
            intervalHandle = setInterval("vScroll.move()", 20);
        }
        function scroll(oid, iid) {
            this.oCont = document.getElementById(oid)
            this.ele = document.getElementById(iid)
            this.width = this.ele.clientWidth;
            this.n = this.oCont.clientWidth;
            this.move = function () {
                this.ele.style.left = this.n + "px"
                this.n--
                if (this.n < (-this.width)) { this.n = this.oCont.clientWidth }
            }
        }
        var vScroll
        function setup() {
            vScroll = new scroll("oScroll", "scroll");
            intervalHandle = setInterval("vScroll.move()", 20)
        }
        onload = function () { setup() }
    </script>
</head>
<body>
    <div id="oScroll" onmouseover="pauseScroll()" onmouseout="resumeScroll()">
        <div id="scroll">This is the scrolling text</div>
    </div>
</body>
</html>

Solution 3:[3]

    <marquee behavior="scroll" direction="left" scrolldelay="1" scrollamount="1" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);">

This is a test marquee to pause on hover 

onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);"

</marquee>

Solution 4:[4]

we can also use javascript event on element for stop and restart marquee. 

<html>
<title>Demo</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>

<marquee id='scroll_news' style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080" >


<div style="width:99%">

 <div style="float:left; width:100%;" onMouseOver="document.getElementById('scroll_news').stop();" onMouseOut="document.getElementById('scroll_news').start();">
   News 1 News 2 News 3 News 4 ....... More news here </div>

<div style="fload:right; width:100%;" onMouseOver="document.getElementById('scroll_news').stop();" onMouseOut="document.getElementById('scroll_news').start();">News 1 News 2 News 3 News 4 ....... More news here1 </div>

</div>

</marquee>
</body>
</html>

Exampl : http://www.delhincrjob.com/blog/marquee-for-scroll-text-and-stop-on-mouseover/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A J
Solution 2 Johan
Solution 3 Ram
Solution 4 Rajendraseo Pandey

Related Questions