I'm using Dynamic Drive's Cross Browser Marquee II scroller script find here. I had some help to alter the script where the content would have a random StartIndex on page load and the random part is working great; the forum thread for that is here. The problem I'm having now is that the altered script is not producing the pause on MouseOver function. I've made a JSFiddle here and tried everything I could think of to fix it but I'm stuck. The JavaScript is as follows:
function scrollmarquee() {
if (parseInt(cross_marquee.style.top) > (actualheight * (-1) + 8)) {
cross_marquee.style.top = parseInt(cross_marquee.style.top) - copyspeed + "px";
} else {
cross_marquee.style.top = parseInt(marqueeheight) + 8 + "px";
}
}
function marqueescroll(o) {
marqueePause(o.id);
o.srt += o.ss;
if ((o.ss < 0 && o.srt > o.h) || (o.ss > 0 && o.srt < o.ph)) {
o.s.style.top = o.srt + 'px';
} else {
o.srt = o.ss < 0 ? o.ph : o.h;
o.s.style.top = o.srt + 'px';
}
o.to = setTimeout(function () {
marqueescroll(o);
}, 60);
}
function marquee(o) {
var id = o.ID,
ss = o.Speed,
i = o.StartIndex,
srt = o.AutoDelay,
p = document.getElementById(id),
s = p ? p.getElementsByTagName('DIV')[0] : null,
ary = [],
z0 = 0;
if (s) {
var clds = s.childNodes,
o = marquee[id] = {
id: id,
p: p,
h: -s.offsetHeight,
ph: p.offsetHeight,
s: s,
ss: typeof (ss) == 'number' && ss != 0 ? ss : -2,
srt: 0
}
for (; z0 < clds.length; z0++) {
if (clds[z0].nodeType == 1) {
ary.push(clds[z0]);
}
}
ary[i] ? o.srt = -ary[i].offsetTop : null;
o.s.style.position = 'absolute';
o.s.style.top = o.srt + 'px';
typeof (srt) == 'number' && srt > 1 ? marqueeAuto(id, srt) : null;
}
}
function marqueeAuto(id, ms) {
var o = marquee[id];
o ? o.to = setTimeout(function () {
marqueescroll(o);
}, ms || 200) : null;
}
function marqueePause(id) {
var o = marquee[id];
o ? clearTimeout(o.to) : null;
}
function marqueeInit() {
marquee({
ID: 'marqueecontainer', // the unique ID name of the parent DIV.(string)
AutoDelay: 2000, //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
Speed: -1, //(optional) the scroll speed, < 0 = up. > 0 = down. (number, default = -2)
StartIndex: Math.floor(Math.random() * 4) //(optional) the index number of the element to start. (number, default = 0)
});
}
if (window.addEventListener) window.addEventListener("load", marqueeInit, false);
else if (window.attachEvent) window.attachEvent("onload", marqueeInit);
else if (document.getElementById);
window.onload = marqueeInit;
It's probably a real simple fix I'm just not catching. Any help would greatly be appreciated. Also, does anyone know of a way to make the scroller where there will be no blank space between the last and first items being scrolled in the list?
This has now been fixed and is completely cross browser and twitter bootstrap friendly. You can check out the new edited jsfiddle here. Fixed javascript is as follows:
function marqueescroll(o) {
marqueePause(o.id);
o.srt += o.ss;
if ((o.ss < 0 && o.srt > o.sz) || (o.ss > 0 && o.srt < (o.w ? -o.sz : o.psz))) {
o.s.style[o.m] = o.srt + 'px';
} else {
o.srt = (o.w ? 0 : o.ss < 0 ? o.psz : o.sz) + o.ss;
o.s.style[o.m] = o.srt + 'px';
}
o.to = setTimeout(function () {
marqueescroll(o);
}, 30);
}
function marquee(o) {
var id = o.ID,
m = o.Mode,
ss = o.Speed,
i = o.StartIndex,
srt = o.AutoDelay,
p = document.getElementById(id),
s = p ? p.getElementsByTagName('DIV')[0] : null,
clds = s ? s.childNodes : [],
ary = [],
sz, l, z0 = 0;
if (s && !marquee[id]) {
var m = typeof (m) == 'string' && m.charAt(0).toUpperCase() == 'H' ? ['left', 'offsetLeft', 'offsetWidth'] : ['top', 'offsetTop', 'offsetHeight'],
sz = p[m[2]],
slide = document.createElement('DIV'),
c;
slide.style.width = 'inherit',//added this for fluid bootstrap width
slide.style.position = s.style.position = 'absolute';
for (; z0 < clds.length; z0++) {
if (clds[z0].nodeType == 1) {
if (m[0] == 'left') {
clds[z0].style.position = 'absolute';
clds[z0].style.left = sz * ary.length + 'px';
clds[z0].style.top = '0px';
}
ary.push([clds[z0], clds[z0][m[1]]]);
}
}
l = ary[ary.length - 1][0];
o = marquee[id] = {
m: m[0],
id: id,
p: p,
sz: -(l[m[1]] + l[m[2]]),
psz: sz,
s: slide,
ss: typeof (ss) == 'number' && ss != 0 ? ss : -2,
w: o.Wrap !== false
}
o.s.appendChild(s);
c = s.cloneNode(true);
c.style.left = c.style.top = '0px';
c.style[m[0]] = o.sz * (ss > 0 ? 1 : -1) + 'px';
o.w ? o.s.appendChild(c) : null;
o.srt = ary[i] ? -ary[i][1] : 0;
o.s.style.position = 'absolute';
o.s.style[m[0]] = o.srt + 'px';
p.appendChild(o.s);
p.style.overflow = 'hidden';
typeof (srt) == 'number' && srt > 1 ? marqueeAuto(id, srt) : null;
}
}
function marqueeAuto(id, ms) {
var o = marquee[id];
o ? o.to = setTimeout(function () {
marqueescroll(o);
}, ms || 200) : null;
}
function marqueePause(id) {
var o = marquee[id];
o ? clearTimeout(o.to) : null;
}
function marqueeInit() {
marquee({
ID: 'marqueecontainer', // the unique ID name of the parent DIV. (string)
Mode: 'vertical', // the display type, 'vertical' or 'horizontal' (string. defalut = 'vertical')
AutoDelay: 2000, //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
Speed: -2, //(optional) the scroll speed, < 0 = up. > 0 = down. (number, default = -2)
Wrap: true, //(optional) true = no gap, false = gap. (boolean, default = true)
StartIndex: Math.floor(Math.random() * 4) //(optional) the index number of the element to start. (number, default = 0)
});
}
if (window.addEventListener) window.addEventListener("load", marqueeInit, false);
else if (window.attachEvent) window.attachEvent("onload", marqueeInit);
else if (document.getElementById) window.onload = marqueeInit;