JavaScript Scroller

**Silent Troopa** · Nov 20, 2001, 16:33

Hi all!

I have this script that I have been editing to fit into a page design but there are a couple of things that I can't work out and hope that someone here might be able to.

The first thing is this. When the page loads for the first time or after refresh the text within the scroller is black for a brief time and then it turns to white. I have tried changing the values but can't get it to start with white text?

The other thing is I would like to be able to have a hypertext link within the text but I tried using the normal <a href> tags but this doesn't work. Can you see a way of doing this?

Here is the script.

<script language="JavaScript1.2">

var delay=3600 //set delay between message change (in miliseconds)
var fcontent=new Array()
begintag='<font face="arial" size=2>' //set opening tag, such as font declarations
fcontent[0]="<b>Todays Hot News!</b><br>All todays hot news would go in this first screen this would stay on screen long enought to read."
fcontent[1]="This next portion of text could be more hot news or it could be special offers, or maybe the joke of the day."
fcontent[2]="Ok, enough with these pointless messages. I'm sure you get the idea behind this script."
closetag='</font>'

var fwidth=200 //set scroller width
var fheight=35 //set scroller height

///No need to edit below this line/////////////////

var ie4=document.all&&!document.getElementById
var ns4=document.layers
var DOM2=document.getElementById
var faderdelay=0
var index=0

if (DOM2)
faderdelay=3600

//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb(255,255,255)"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
else if (ns4){
document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
document.fscrollerns.document.fscrollerns_sub.document.close()
}

index++
setTimeout("changecontent()",delay+faderdelay)
}

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com

frame=20;
hex=0 // Initial color value.

function colorfade() {
// 20 frames fading process
if(frame>0) {
hex-=0; // increase color value
document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")"; // Set color value.
frame--;
setTimeout("colorfade()",0);
}
else{
document.getElementById("fscroller").style.color="rgb(255,255,255)";
frame=20;
hex=255
}
}

if (ie4||DOM2)
document.write('<div id="fscroller" style="width:'+fwidth+';height:'+fheight+';padding:1px"></div>')

window.onload=changecontent
</script>
<ilayer id="fscrollerns" width=12 height=10 left="10" top="15">
<layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer>
</ilayer>

It all goes between the <body> tags but I have put it within another layer <div> as I can then position it where I want.

Hope someone can help

bfn
Silent Troopa

**weirdbeardmt** · Nov 21, 2001, 06:59

Not quite what you are asking, but I have seen a working version of the script you are after..

It is from www.dynamicdrive.com and can be seen in action at www.thedomainpros.com

Code:

<script language="JavaScript1.2">

/*
Cross browser marquee script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/


//Specify the marquee's width (in pixels)
var marqueewidth=740
//Specify the marquee's height (in pixels, pertains only to NS)
var marqueeheight=20
//Specify the marquee's scroll speed (larger is faster)
var speed=4
//Specify the marquee contents
var marqueecontents='contents goes in here'

if (document.all)
document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}

window.onload=regenerate2
</script>


<ilayer width=&{marqueewidth}; height=&{marqueeheight}; name="cmarquee01">
<layer name="cmarquee02"></layer>
</ilayer>

You change the code and can use <font> tags and <a href> in it. It is a bit clumsy and you will need to keep editing it to add new content, but it works.

And there should be a work around to populate it from a DB if that is what you wanted.

Hope that helps

**Silent Troopa** · Nov 22, 2001, 03:18

Hi weirdbeardmt and thanks for your input. The script that is on thedomainpros.com site is completely different as it is a left to right scroller and the one that I am using is a fade in fade out script.

Is there a generic code line for hypertext links within JavaScript like in HTML?

Silent Troopa
"Working all night, working all day, when all the works done it's time play"

**weirdbeardmt** · Nov 22, 2001, 08:21

OK, I know the problems with the href tags. This works:

Code:

fcontent[2]="<A HREF='something.html'>Ok, enough with these pointless messages. I'm sure you get the idea 

behind this script</A>."

Notice the use of ' and not " in the href tags.

But I tried it, and it wasn't fading as you suggest it should...? Is it Netscape only? [i am using IE6]

**Silent Troopa** · Nov 23, 2001, 05:55

Thanks weirdbeardmt that href tag works fine

I am testing this in IE5.5 it will be run on IE5 only once completed as the page is part of an intranet only.

The black text is now that important as it is only on the screen for a few seconds when the page first loads, but if anyone does work out what part I need to change please do let me know.

Thanks again
Silent Troopa

**weirdbeardmt** · Nov 23, 2001, 06:09

OK i added color=#ffffff to the inital font tag and that made it start off as white.

However I don't know if this will kill the fading effect seeing as how it isn't working on IE6...

Code:

begintag='<font face=arial size=2 color=#ffffff>'

**Silent Troopa** · Nov 23, 2001, 11:52

Thanks weirdbeardmt that does the job

I lost the fade but that's not a problem, the text transitions are enough for this.

Thanks again
Silent Troopa

The SitePoint Forums have moved.

User Tag List

Thread: JavaScript Scroller

Thread Tools

Display

JavaScript Scroller

Fading Scroller

Bookmarks

Bookmarks

Posting Permissions