JavaScript Need some help with a scrolling marquee

I'm trying to get a scrolling marquee javascript to run on my sites taskbar, amd I'm not having much luck. I need a script that I can put five or six lines in. I've found some, and it runs fine my side (computer), but won't run when I get it on the server. Any ideas?

Here's the site I need to run it on http://foodforu.ca

 

you mean the status bar?

dont bother, the newer browsers have the defaults set to have the status bar off.

it'd be better if you made your own bar at the bottom and rolled or flashed your messages on those.

firstly, you're talking of many lines, so you're gonna need an array. you don't know how many lines you want, and ur in luck because javascript doesnt force you to define that when you make an array.

<script language="javascript">
var myLines = new Array(); //constructing the array
myLines[0] = "Welcome to my site"; // remember the first string is at [0]
myLines[1] = "This is line 1.";
myLines[2] = "This is line 2.";
// add as many as you like
</script>

next thing we need is a place to put them. i suggest a box which runs the full width of the page right at the bottom. so you need to add this code just before the </body> tag:
<div id="mylinesholder">Initialising... If you see this text the script hasn't started yet.</div>
</body>

now we can fix the lines holders settings in CSS
<style type="text/css">
#mylinesholder {
position: absolute; /*allows pin-point positioning on the page*/
bottom: 0px; /*the box sits on the bottom*/
left: 0px; /*stuck to the left*/
width: 95%; /*width of page/parent element*/
height: 30px; /*enough to show one line of text at a time*/
background-color: black; /*self-explanatory*/
color: white; /*font color*/
font-family: Arial; /*choose a font*/
font-weight: bold; /*bolded*/
font-size: 26px; /*fits inside the 30px high box*/
line-height: 30px; /*will take up full height of box and so middle-align the text*/
display: inline; /*prevents DIV from making line breaks wherever it is placed*/
}
</style>

now the lines and the lines holder is ready, u just need a simple script to read through them and display your lines.

<script language="javascript">
var displaycount = 0;
//this will keep track of which line is being shown
function displaymylines(arrayoflines,linedelay) {
//this construction requires 2 parameters: the array to use, the delay between lines
var arraylength = arrayoflines.length;
//finds the no. of items in the array
if (displaycount < arraylength) {
/*
if the counter is less than the array length, then continue, otherwise see 'else'.
eg: say there are 4 strings in the array, mylines[0], mylines[1], mylines[2], mylines[3]
we use: mylines[displaycount] so that if we set displaycount to 1 it shows mylines[1]
but we start displaycount at 0, after myline[0] has shown we increment displaycount
and then we can go through the array. when we get to the last item: mylines[3] and
then increment displaycount again, displaycount < arraylength is no longer true,
because dislpaycount is 4 and arraylength is 4, so this IF statement jumps to ELSE,
where we reset displaycount to 0 and loop the array.
*/
document.getElementById('mylinesholder').innerHTML=arrayoflines[displaycount];
//sets the lines holder DIV with the current line content
displaycount++;
alert(displaycount);
//increments our counter
} else {
displaycount = 0;
//resets displaycount to loop through the array
}//end of if-else statement

}//end of function
</script>

all this script does is read the array, copy and display the current line, then increment the current line counter (displaycount) so that next time it runs it will display the next line.

that means so far if we make a button like this:
<a href="#" onClick="displaymylines(myLines,3000);">Next line</a>
and load the page with what we have so far, we can keep clicking the link and it will go through the script one step at a time.

so now we need to make the script run itself, without having to click for each next line.
to do this is simple: we split the function into 2 functions, the first one initialises the 2nd one, and the 2nd one calls the first one, creating a loop.

so now our old script looks like this:
<script language="javascript">
var displaycount = 0;
//this will keep track of which line is being shown
function displaymylines(arrayoflines,linedelay) {
//this construction requires 2 parameters: the array to use, the delay between lines

loopScript(arrayoflines,linedelay);

}//end of function
</script>

notice that the entire IF-ELSE statement has been replaced by the calling of a function called 'loopScript()' which passes on the same parameters. we must create that function.

here it is:
<script language="javascript">
function loopScript(arrayoflines,linedelay) {
//created the new function
//ALL OF THE FOLLOWING IS CUT FROM THE OLD SCRIPT:
var arraylength = arrayoflines.length;
//finds the no. of items in the array
if (displaycount < arraylength) {
/*
if the counter is less than the array length, then continue, otherwise see 'else'.
eg: say there are 4 strings in the array, mylines[0], mylines[1], mylines[2], mylines[3]
we use: mylines[displaycount] so that if we set displaycount to 1 it shows mylines[1]
but we start displaycount at 0, after myline[0] has shown we increment displaycount
and then we can go through the array. when we get to the last item: mylines[3] and
then increment displaycount again, displaycount < arraylength is no longer true,
because dislpaycount is 4 and arraylength is 4, so this IF statement jumps to ELSE,
where we reset displaycount to 0 and loop the array.
*/
document.getElementById('mylinesholder').innerHTML=arrayoflines[displaycount];
//sets the lines holder DIV with the current line content
displaycount++;
//increments our counter
} else {
displaycount = 0;
//resets displaycount to loop through the array
}//end of if-else statement
//OLD SCRIPT FINISHES ONE STEP HERE

displaymylines(arrayoflines,linedelay);
//we call the first function again, creating a loop.

}//end of loop function
</script>

at this stage we have a box, decorated with CSS, and a script to feed lines into the box, what's missing is a timer.

if we leave the script as it is, you will see the box flashing several times per second with new lines. we need to make a delay between each message.

we do this by going back to the code that loops the script:
displaymylines(arrayoflines,linedelay);

and wrapping a timer around it:
setTimeout(function(){displaymylines(arrayoflines,linedelay);arrayoflines=null;linedelay=null},linedelay);

note: linedelay was passed as a parameter from the beginning:
<a href="#" onClick="displaymylines(myLines,3000);">Next line</a>

the delay is in miliseconds i.e. 1000 = 1 second and 3000 = 3 seconds.

finally the script is fully functional. the only thing left to do is to remove the link:
<a href="#" onClick="displaymylines(myLines,3000);">Next line</a>

and make the script start onLoad i.e.:
<body onLoad="displaymylines(myLines,3000);">

Please check the ZIP file attached for the final script.

 

in case no one cares about the tutorial side of it, this is the final script without the commenting:

<html>
<head>
<title> Script written by Ozzy - Use as you wish </title>
<style type="text/css">
#mylinesholder {
position: absolute;
bottom: 0px;
left: 0px;
width: 95%;
height: 30px;
background-color: black;
color: white;
font-family: Arial;
font-weight: bold;
font-size: 26px;
line-height: 30px;
display: inline;
}
</style>
<script language="javascript">
var myLines = new Array();
myLines[0] = "Welcome to my site";
myLines[1] = "This is line 1.";
myLines[2] = "This is line 2.";
// add as many as you like
</script>
<script language="javascript">
var displaycount = 0;
function displaymylines(arrayoflines,linedelay) {
loopScript(arrayoflines,linedelay);
}
function loopScript(arrayoflines,linedelay) {
var arraylength = arrayoflines.length;
if (displaycount < arraylength) {
document.getElementById('mylinesholder').innerHTML=arrayoflines[displaycount];
displaycount++;
} else {
document.getElementById('mylinesholder').innerHTML="*";
displaycount = 0;
}
setTimeout(function(){displaymylines(arrayoflines,linedelay);
arrayoflines=null;linedelay=null},linedelay);
}
</script>
</head>
<body onLoad="displaymylines(myLines,3000);">
<div id="mylinesholder">Initialising... If you see this text the script hasn't started yet.</div>
</body>
</html>

 

$7 dollars can feed one person for 2 weeks ??

 

£7.00 x 1.5 = $10.50

wake up to the world!

i was born & brought up in london where the average meal outside is £8, but my parents are pakistani and when i went there for holidays i found out that the average person can buy dinner (curry and fresh naan bread from a tandoor) for like 20 rupees (now its like 30 rupees). But at that time 20 rupees was £0.20, which at that time was about $0.35.

getting back to the topic, <marquee> is an IE invention and only works in IE. urm, i kinda figured this guy just wanted something to flash text in the status bar (which cant scroll, it displays one message at a time) so the script i wrote makes a bar at the bottom which displays as many messages as u want (1 at a time).

 

hey man i just checked your website and its jam packed with content - which is good, but its so difficult to navigate through!! the files of recipes shouldn't be downloaded, they should be displayed; one recipe per page. the front page is deceiving cos it looks like a site with nothing there...the only thing which made me look through it is the bit about you having 25,000 recipes, and i'm thinking where?!