How to reduce the time interval of marquee loop?

Question

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?

Disregarding the question, don't use marquee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee — Sam A. Horvath-Hunt, Jun 13 '17 at 10:34
https://stackoverflow.com/questions/31951282/why-is-marquee-deprecated-and-what-is-the-best-alternative https://stackoverflow.com/questions/26360339/html-marquee-alternatives — Turnip, Jun 13 '17 at 10:37
@Turnip, Already those answers were not accepted by the user and those answers doesn't give me a better solution.. — Maniraj Murugan, Jun 13 '17 at 10:46
They give you many alternatives to the marquee tag. Do your own research. — Turnip, Jun 13 '17 at 10:57

Nagaraju · Answer 1 · 2017-06-13T11:09:56.593

This uses the combination of SCROLLAMOUNT and SCROLLDELAY

Reference: marquee reference

  

<div class="row">
      <h3 class="news_title"> Latest Events </h3>
      <marquee SCROLLAMOUNT=5 SCROLLDELAY=10 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>

As suggested by others this feature is obselete and try to avoid using it.

Here are some alternatives where you can use like marquee.

Another alternative that uses pure css animations to give effect like marquee

If you are intrested in a plugin(jQuery), you can do the following way:

FIrst include this:

<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

Marquee content:

<div class="marquee">jQuery marquee is the best <b>marquee</b> plugin in the world</div>

Include css:

.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

Javascript:

$('.marquee').marquee();

marquee plugin reference

Please read the **[Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee)**... This feature is **obsolete**. Although it may still work in some browsers, its use is discouraged since **it could be removed at any time. Try to avoid using it**. — Zakaria Acharki, Jun 13 '17 at 10:54
The above answer was also same as the older one should avoid the white space for a long interval between the set of events ends and the next one starts.. — Maniraj Murugan, Jun 13 '17 at 10:57
You're closer than ever @Raj, just google for 'marquee tag alternative'.. — Zakaria Acharki, Jun 13 '17 at 10:59

Hardik Leuwa · Accepted Answer · 2017-06-13T11:35:24.787

  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>

You are almost done what i want, but i need like this for 3 set of ```ul```, if i give it only one set of ```ul``` runs other was not if i change id also it doesn't works.. — Maniraj Murugan, Jun 13 '17 at 11:22
You can initialise another zxcMarquee with diff id and give it to another DIV — Hardik Leuwa, Jun 13 '17 at 11:31

Haroon · Answer 3 · 2017-06-13T10:51:21.047

You are setting the scrollamount as 2 , remove that and fallback to the normal marquee behaviour. I have update the code snippet below:

<div class="row">
      <h3 class="news_title"> Latest Events </h3>
      <marquee behavior="scroll" loop="infinite" direction="up" 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>

Understand my requirement clearly, If the list of 5 events under the ```
``` ends, the next set takes lots of time to appear and there is a white space for long time.. I need a solution for it.. — Maniraj Murugan, Jun 13 '17 at 10:42
Please read the **[Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee)**... This feature is **obsolete**. Although it may still work in some browsers, its use is discouraged since **it could be removed at any time. Try to avoid using it**. — Zakaria Acharki, Jun 13 '17 at 10:53

How to reduce the time interval of marquee loop?

3 Answers3