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?
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>