Dear Techyv,
I need to have a sample for JavaScript on continuous scrolling text demo along with a button for start and stop scrolling. Please provide me the script that will scroll the text vertically. Please do the needful for providing the script along with notes, for me to understand the script, so that I can edit with further changes.
Thanks,
Simon M Fouche
Hello Simon, here is sample code into adding a continuous scrolling text using JavaScript
Copy the following JavaScript and save it as vert.js
function start() {
new mq(‘m1′);
new mq(‘m2′);
mqRotate(mqr); // must come last
}
window.onload = start;
// Continuous text Vertical Scroller with stop/start button
function startstopchange(m,txt) {for (var j=m.length – 1; j > -1; j–) document.getElementById(‘ss’+m[j].id).value = txt;}
function startstop(m,n) {var ss = document.createElement(‘form’);var sd = document.createElement(‘div’);ss.appendChild(sd);var sb = document.createElement(‘input’);
sb.type=’button’;sd.appendChild(sb);sb.id = ‘ss’+n.id;sb.value = ‘STOP’; sb.onclick = function() {if (this.value == ‘STOP’) {clearTimeout(m[0].TO); startstopchange(m,’START’);} else {mqRotate(m); startstopchange(m,’STOP’);}}; n.parentNode.insertBefore(ss,n);}
function objHeight(obj) {if(obj.offsetHeight) return obj.offsetHeight; if (obj.clip) return obj.clip.height; return 0;} var mqr = []; function mq(id){this.mqo=document.getElementById(id); var ht = objHeight(this.mqo.getElementsByTagName(‘div’)[0])+ 5; var fulht = objHeight(this.mqo); var txt = this.mqo.getElementsByTagName(‘div’)[0].innerHTML; this.mqo.innerHTML = ”; var wid = this.mqo.style.width; this.mqo.onmouseout=function() {mqRotate(mqr);startstopchange(mqr,’STOP’);}; this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO); startstopchange(mqr,’START’);}; this.mqo.ary=[]; var maxw = Math.ceil(fulht/ht)+1; for (var i=0;i < maxw;i++){this.mqo.ary[i]=document.createElement(‘div’); this.mqo.ary[i].innerHTML = txt; this.mqo.ary[i].style.position = ‘absolute’; this.mqo.ary[i].style.top = (ht*i)+’px’; this.mqo.ary[i].style.height = ht+’px’; this.mqo.ary[i].style.width = wid; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);startstop(mqr,this.mqo);} function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length – 1; j > -1; j–) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x = mqr[j].ary[i].style; x.top=(parseInt(x.top,10)-1)+’px’;} var y = mqr[j].ary[0].style; if (parseInt(y.top,10)+parseInt(y.height,10)<0) {var z = mqr[j].ary.shift(); z.style.top = (parseInt(z.style.top) + parseInt(z.style.height)*maxa) + ‘px’; mqr[j].ary.push(z);}} mqr[0].TO=setTimeout(‘mqRotate(mqr)’,10);}
Next is attach the script to your web page, where you wish to display it. Add the following code into the head section of your page.
