1) Create 3 gloabal variables named timeID, marqueeTxt, & marqueeOff. Set marqueeOff variable to true.
2) Have the browser run the defineMarquee() function when the page loads.
3) Create the defineMarquee() function.
a) Populate the contents of the marqueeTxt array with all the elements from the document that belong to the marqueeTxt class.
b) For every item in the marqueeTxt array, store the value of the top style from the css style sheet in a variable named topValue. After you have calculated a value for the topValue variable, store that value in the top style property for the current item in the marqueeTxt array.
c) The web page has two form buttons with ID values of startMarquee and stopMarquee. Add event handlers to these buttons to run the startMarquee() and stopMarquee() functions, respectively.
4) Create the startMarquee() function.
a) Insert an if condition that tests whether the value of the marqueeOff variable is true.
b) if the marqueeOff is true, then run the moveText() function at intervals of 50 milliseconds. Store the ID of the time interval in the timeID variable. Set the value of the marqueeOff variable to false.
5) Create the stopMarquee() function.
a) Clear the time interval function indicated by the timeID variable.
b) Reset the marqueeOff variable to true.
6) Create the moveText() function.
a) Create a For loop that loops through each item in the marqueeTxt array.
b) For each item, store the value of the top style in the variable topPos. Be sure to use the parseInt() method to extract the numeric value from the text string.
c) If the value of topPos is less than -110, set the value of the top style for the marquee item to 700px; otherwise, decrease the value of the top style by 1.
This code is contained within a file named marquee.js. The objective is to open the byso.htm file. Click the Start Marquee button and verify that the text scrolls vertically up through the marquee box, reappearing again at the bottom of the box. Click the Pause Marquee button and verify the scrolling action is paused until the Start Marquee button is pressed again.
MY CURRENT CODE:
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
window.onload = defineMarquee;
function defineMarquee(){
var topValue = 0;
var allElems = document.getElementsByTagName("*");
for (var i=0; i < allElems.length; i++){
if (allElems[i].className =="marqueeTxt") marqueeTxt.push(allElems[i]);
}
for (i = 0; i < marqueeTxt.length; i++) {
if (window.getComputedStyle) {
topValue = marqueeTxt[i].document.defaultView.getPropertyValue("top");
} else if (marqueeTxt[i].currentStyle) {
topValue = marqueeTxt[i].currentStyle["top"];
}
}
document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;
}
function startMarquee(){
if (marqueeOff) {
timeID = setInterval("moveMarquee()", 50);
marqueeOff = false;
}
}
function stopMarquee(){
clearInterval(timeID);
marqueeOff = true;
}
function moveMarquee(){
for (var i=0; i < marqueeTxt.length; i++){
topPos = parseInt(marqueeTxt.style.top);
if (topPos < -110) {
topPos = 700;
} else {
topPos -= 1;
}
marqueeTxt.style.top = topPos + "px";
}
}