PDA

View Full Version : Horizontal scrolling Marquee, My text insists on bunching together when function is a



gmac87
Mar 3rd, 2015, 01:47 AM
So Im creating a vertically scrolling marquee, which uses javascript to alter the the top position of the text. A function runs at timed intervals creating the illusion of several groups of text moving vertically within the marquee from bottom to top and back again. Everything is working fine Except the groups of text insist of been bunched together at the top of the marquee when the function is activated. I want to resolve this problem using only javascript, and not changing any of the existing CSS... Can anybody offer advice ???
window.onload = defineMarquee;

var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
var topPos= 20;

/* defineMarquee()
Initializes the contents of the marquee, determines the
top style positions of each marquee item, and sets the
onclick event handlers for the document
*/
function defineMarquee() {

var topValue;

var allElems = document.getElementsByTagName("*");

for(var i = 0; i < allElems.length; i++){
if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
}

//Extract the "top" CSS class from marqueeTxt

for(var i = 0; i < marqueeTxt.length; i++){
if(marqueeTxt[i].getComputedStyle) {
topValue = marqueeTxt[i].getPropertyValue("top")
marqueeTxt[i].style.top = topValue +"px";
}
else if (marqueeTxt[i].currentStyle) {
topValue = marqueeTxt[i].currentStyle("top");
marqueeTxt[i].style.top = topValue +"px";
}


}




document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;


}

/* startMarquee()
Starts the marquee in motion
*/

function startMarquee() {
if(marqueeOff == true) {
timeID = setInterval("moveText()", 50);
marqueeOff = false;
}
}

/* stopMarquee()
Stops the Marquee
*/

function stopMarquee() {
clearInterval(timeID);
marqueeOff = true;
}

/* moveText ()
move the text within the marquee in a vertical direction
*/

function moveText() {



for(var i = 0; i < marqueeTxt.length; i++) {
if(marqueeTxt[i].getComputedStyle) {
topPos = parseInt(marqueeTxt.getPropertyValue("top"));
}
else if(marqueeTxt[i].currentStyle) {
topPos = parseInt(marqueeTxt.currentStyle("top"));
}

if(topPos < -110) {
topPos = 700;
} else { topPos -= 1;
}

marqueeTxt[i].style.top = topPos + "px";


}


}

vwphillips
Mar 3rd, 2015, 09:39 AM
please post the CSS and HTML

or better a link to your page