Click to See Complete Forum and Search --> : Need help! fixing 'scrolling news box'


nash
04-02-2003, 07:08 AM
Well, I have to admit that I've achieved the following code inspiring myself from others'works (more or less thru a copy/paste/edit/adapt process)... I just started to learn javascript a week ago though!

My problem is the following, I've made a 'scolling news box' for the main page of my site, but I would like to change something and realised that I couldn't find how to do this... :(

I would like the first line of text to appear only once (on Loading) and then the 3 other messages to be repeated!

I'll post my code here (some of it is in french -that's more or less what I edited-).

Could someone who knows more about Javascript than I do have a look at it and edit what must be edited to have the first message appear only once???

CODE:

<STYLE TYPE="text/css">
.ejs_scroll {font-size:10px;font-family:Arial;color:#00ff00;font-weight:bold;}
</STYLE>

<script language="JavaScript1.2">
<!--

ejs_scroll_largeur = 200;
ejs_scroll_hauteur = 100;
ejs_scroll_bgcolor = '#808080';
ejs_scroll_background = "pics/bgnews.jpg";
ejs_scroll_pause_seconde = 5;

ejs_scroll_message = new Array;

ejs_scroll_message[0]='<SPAN STYLE="color:#00ff00;">--- LOADING ---</SPAN></FONT>';
ejs_scroll_message[1]='<a href="green/index.html"><SPAN STYLE="color:#00ff00;">The 'DG-Operation: Struggle Within' site is now online.<BR>Check it now!</SPAN></FONT></a>';
ejs_scroll_message[2]='<a href="yellow/index.html"><SPAN STYLE="color:#00ff00;">New items have been added to The Warehouse.<BR>Text, video, images, it\'s all there!</SPAN></FONT></a>';
ejs_scroll_message[3]='<SPAN STYLE="color:#00ff00;">More information to come soon.<BR>Be seeing you!</SPAN></FONT>';
function d(texte)
{
document.write(texte);
}

d('<DIV ID=ejs_scroll_relativ STYLE="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
d('<DIV ID=ejs_scroll_cadre STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
d('<div id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;" CLASS=ejs_scroll>'+ejs_scroll_message[0]+'</DIV>');
d('<div id=ejs_scroller_2 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';" CLASS=ejs_scroll>'+ejs_scroll_message[1]+'</DIV>');
d('</DIV></DIV>');

ejs_scroll_mode =1;
ejs_scroll_actuel = 0;

function ejs_scroll_start()
{
if(ejs_scroll_mode == 1)
{
ejs_scroller_haut = "ejs_scroller_1";
ejs_scroller_bas = "ejs_scroller_2";
ejs_scroll_mode = 0;
}
else
{
ejs_scroller_bas = "ejs_scroller_1";
ejs_scroller_haut = "ejs_scroller_2";
ejs_scroll_mode = 1;
}
ejs_scroll_nb_message = ejs_scroll_message.length-1;
if(ejs_scroll_actuel == ejs_scroll_nb_message)
ejs_scroll_suivant = 0;
else
ejs_scroll_suivant = ejs_scroll_actuel+1;
if(document.getElementById)
document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_message[ejs_scroll_suivant];
ejs_scroll_top = 0;
if(document.getElementById)
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
}

function ejs_scroll_action()
{
ejs_scroll_top -= 1;
document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
setTimeout("ejs_scroll_action()",10)
else
ejs_scroll_stop()
}

function ejs_scroll_stop()
{
ejs_scroll_actuel = ejs_scroll_suivant;
ejs_scroll_start()
}

window.onload = ejs_scroll_start;
// -->
</SCRIPT>


Thanx a lot!!!! ;)

AdamBrill
04-02-2003, 07:53 AM
Try this code instead:<STYLE TYPE="text/css">
.ejs_scroll {font-size:10px;font-family:Arial;color:#00ff00;font-weight:bold;}
</STYLE>
<script language="JavaScript1.2">
<!--

ejs_scroll_largeur = 200;
ejs_scroll_hauteur = 100;
ejs_scroll_bgcolor = '#808080';
ejs_scroll_background = "pics/bgnews.jpg";
ejs_scroll_pause_seconde = 5;

ejs_scroll_message = new Array;

ejs_scroll_message[0]='<SPAN STYLE="color:#00ff00;">--- LOADING ---</SPAN></FONT>';
ejs_scroll_message[1]='<a href="green/index.html"><SPAN STYLE="color:#00ff00;">The \'DG-Operation: Struggle Within\' site is now online.<BR>Check it now!</SPAN></FONT></a>';
ejs_scroll_message[2]='<a href="yellow/index.html"><SPAN STYLE="color:#00ff00;">New items have been added to The Warehouse.<BR>Text, video, images, it\'s all there!</SPAN></FONT></a>';
ejs_scroll_message[3]='<SPAN STYLE="color:#00ff00;">More information to come soon.<BR>Be seeing you!</SPAN></FONT>';
function d(texte)
{
document.write(texte);
}

d('<DIV ID=ejs_scroll_relativ STYLE=" position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
d('<DIV ID=ejs_scroll_cadre STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
d('<div id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;" CLASS=ejs_scroll>'+ejs_scroll_message[0]+'</DIV>');
d('<div id=ejs_scroller_2 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';" CLASS=ejs_scroll>'+ejs_scroll_message[1]+'</DIV>');
d('</DIV></DIV>');

ejs_scroll_mode =1;
ejs_scroll_actuel = 0;

function ejs_scroll_start()
{
if(ejs_scroll_mode == 1)
{
ejs_scroller_haut = "ejs_scroller_1";
ejs_scroller_bas = "ejs_scroller_2";
ejs_scroll_mode = 0;
}
else
{
ejs_scroller_bas = "ejs_scroller_1";
ejs_scroller_haut = "ejs_scroller_2";
ejs_scroll_mode = 1;
}
ejs_scroll_nb_message = ejs_scroll_message.length-1;
if(ejs_scroll_actuel == ejs_scroll_nb_message)
ejs_scroll_suivant = 1;
else
ejs_scroll_suivant = ejs_scroll_actuel+1;
if(document.getElementById)
document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_message[ejs_scroll_suivant];
ejs_scroll_top = 0;
if(document.getElementById)
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
}

function ejs_scroll_action()
{
ejs_scroll_top -= 1;
document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
setTimeout("ejs_scroll_action()",10)
else
ejs_scroll_stop()
}

function ejs_scroll_stop()
{
ejs_scroll_actuel = ejs_scroll_suivant;
ejs_scroll_start()
}

window.onload = ejs_scroll_start;
// -->
</SCRIPT>

Cheers! ;)

gil davis
04-02-2003, 07:56 AM
Eliminate the first line from the array so that it won't be repeated. When you call the loop for the first time, use the first line data instead of the first item in the array.document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_first_message;

nash
04-02-2003, 08:06 AM
Errrm, AdamBrill,

there seems to be a missing ';' somewhere (that's what IE tells me)...

Well, thanx anyway! :) If someone finds were the missing ';' is, pleas let me know!!!

EDIT: I checked what you did, changing the '0' to '1' for the starting point apparently doesn't work, it creates an error!!!

unfortunately I'm not good enough at that to figure out how to fix this!!!!:confused:

AdamBrill
04-02-2003, 08:23 AM
The reason for the "expected ;" error is because of these lines:ejs_scroll_message[1]='<a href="green/index.html"><SPAN STYLE="color:#00ff00;">The \'DG-Operation: Struggle Within' site is now online.<BR>Check it now!</SPAN></FONT></a>';Go through the line and put a \ before all of the single quotes. I did fix that in my version, but the forums took it out... Don't ask me why. :rolleyes: You also have some of them in some of the other lines...

nash
04-02-2003, 08:29 AM
WOOHOO!!!!:D :D :D

I've put the ''\" in and it works now...

Well, I'm sure there's other 'mistakes' in it, but well, I did what I could with my small knowledge!

Anyway, it works...:cool: