Mani Raj Mani Raj -4 years ago 62
HTML Question

How to reduce the time interval of marquee loop?

My snippet is as follows,





<div class="row">
<h3 class="news_title"> Latest Events </h3>
<marquee behavior="scroll" loop="infinite" direction="up" scrollamount="2" onmouseover="this.stop();" style="height:200px" onmouseout="this.start();">
<ul>
<li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…t-day-15-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – EDUCATION DEVELOPMENT DAY 15.07.2015</a></li>
<li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-03-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – CLUB INAUGURATION – 03.07.2015</a></li>
<li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-18-06-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – FATHER’S DAY CELEBRATION – 18.06.2015</a></li>
<li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ation-16-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – RAMZAN CELEBRATION – 16.07.2015</a></li>
<li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ition-20-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – ENVIRONMENT DAY COMPETITION – 20.07.2</a></li>
</ul>
</marquee>
</div>





Here i have used the marquee to loop a set of events one by one, if the first set of events ends, then there is a lot of time duration for the second one to run. My requirement is that, i need the next set of events to continue after the first one with only a little interval of time.. How to do it?

Answer Source

  var zxcMarquee = {

            init: function (o) {
                var mde = o.Mode, mde = typeof (mde) == 'string' && mde.charAt(0).toUpperCase() == 'H' ? ['left', 'offsetWidth', 'top', 'width'] : ['top', 'offsetHeight', 'left', 'height'], id = o.ID, srt = o.StartDelay, ud = o.StartDirection, p = document.getElementById(id), obj = p.getElementsByTagName('DIV')[0], sz = obj[mde[1]], clone;
                p.style.overflow = 'hidden';
                obj.style.position = 'absolute';
                obj.style[mde[0]] = '0px';
                obj.style[mde[3]] = sz + 'px';
                clone = obj.cloneNode(true);
                clone.style[mde[0]] = sz + 'px';
                clone.style[mde[2]] = '0px';
                obj.appendChild(clone);
                o = this['zxc' + id] = {
                    obj: obj,
                    mde: mde[0],
                    sz: sz
                }
                if (typeof (srt) == 'number') {
                    o.dly = setTimeout(function () { zxcMarquee.scroll(id, typeof (ud) == 'number' ? ud : -1); }, srt);
                }
                else {
                    this.scroll(id, 0)
                }
            },

            scroll: function (id, ud) {
                var oop = this, o = this['zxc' + id], p;
                if (o) {
                    ud = typeof (ud) == 'number' ? ud : 0;
                    clearTimeout(o.dly);
                    p = parseInt(o.obj.style[o.mde]) + ud;
                    if ((ud > 0 && p > 0) || (ud < 0 && p < -o.sz)) {
                        p += o.sz * (ud > 0 ? -1 : 1);
                    }
                    o.obj.style[o.mde] = p + 'px';
                    o.dly = setTimeout(function () { oop.scroll(id, ud); }, 50);
                }
            }
        }

        function init() {

            zxcMarquee.init({
                ID: 'marquee1',     // the unique ID name of the parent DIV.                        (string)
                Mode: 'Vertical',   //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
                StartDelay: 2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)
                StartDirection: -1  //(optional) the auto start scroll direction'.                  (number, default = -1)
            });

            zxcMarquee.init({
                ID: 'marquee2',     // the unique ID name of the parent DIV.                        (string)
                Mode: 'Vertical', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
                StartDelay: 2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)
                StartDirection: -1  //(optional) the auto start scroll direction'.                  (number, default = -1)
            });

        }

        if (window.addEventListener)
            window.addEventListener("load", init, false)
        else if (window.attachEvent)
            window.attachEvent("onload", init)
        else if (document.getElementById)
            window.onload = init
   .container {
            position: relative;
            width: 300px; /*marquee width */
            height: 300px; /*marquee height */
            overflow: hidden;
            background-color: white;
            border: 3px solid orange;
            padding: 2px;
            padding-left: 4px;
        }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    
</head>

<body>
    <div id="marquee1" class="container" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
        <div style="position: absolute; width: 98%;">

            <ul>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…t-day-15-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – EDUCATION DEVELOPMENT DAY 15.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-03-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – CLUB INAUGURATION – 03.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-18-06-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – FATHER’S DAY CELEBRATION – 18.06.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ation-16-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – RAMZAN CELEBRATION – 16.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ition-20-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – ENVIRONMENT DAY COMPETITION – 20.07.2</a></li>
            </ul>
        </div>
    </div>
       
       
          <div id="marquee2" class="container" onmouseover="zxcMarquee.scroll('marquee2',0);" onmouseout="zxcMarquee.scroll('marquee2',-1);">
        <div style="position: absolute; width: 98%;">

            <ul>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…t-day-15-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – EDUCATION DEVELOPMENT DAY 15.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-03-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – CLUB INAUGURATION – 03.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href=" http://sowdambikaa.edu.in/news/chellammal-matri…ation-18-06-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – FATHER’S DAY CELEBRATION – 18.06.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ation-16-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – RAMZAN CELEBRATION – 16.07.2015</a></li>
                <li><i class="fa fa-cog fa-spin"></i><a href="http://sowdambikaa.edu.in/news/chellammal-matri…ition-20-07-2015/">CHELLAMMAL MATRIC. H.S.S, THIRUVERUMBUR – ENVIRONMENT DAY COMPETITION – 20.07.2</a></li>
            </ul>
        </div>
    </div>
       
</body>


</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download