Fading scroller script

[Dazza30]

1) Script Title: Fading scroller

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...fadescroll.htm

3) Describe problem: First off my appologies for the link as this threads name, it was a mistake and not deliberate.

Im looking for ways to increase my page load times.
Ive been told that calling external js scripts is a good method of doing this.

How would i go about making the fading scroller script one i could use externally?

And is it possible to do this with multiple scripts?

Here's a link to the page im using the fading scroller on www.dream4mobiles.co.uk

[rangana]

Just save it to an external file..and save it, for example script.js.

When you use the JS, externally, just add src attribute

<script type="text/javascript" src="script.js">

See if it helps

[Dazza30]

Thanks for the reply

If you noticed the fading scroller script works where you put it, if i use the script externally how can i keep it in the same place.

Here's the script on my page


<td class="style117"><script type="text/javascript">
/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var delay = 2000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,69,0); // start color (red, green, blue)
var endcolor=new Array(255,69,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: Bold 16px Tahoma; padding: 1px;">'; //set opening tag, such as font declarations
fcontent[0]="<br>Dream4mobiles.co.uk";
fcontent[1]="<br>Home of thousands of great mobile phone deals";
fcontent[2]="<br>With free gifts and cash back deals available";
fcontent[3]="<br>From over 30 of the UKs top retailers";
fcontent[4]="<br>Updated daily";
closetag='</div>';
var fwidth='500px'; //set scroller width
var fheight='50px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:0px solid black;width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script></td>

[rangana]

If you want it to be an external JS, change your markups (HTML) to:

<script type="text/javascript" src="name.js">
/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Note the one highlighted in red. This will be your JS file.

...then save your JS to your desired name (which will be in red):

var delay = 2000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,69,0); // start color (red, green, blue)
var endcolor=new Array(255,69,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: Bold 16px Tahoma; padding: 1px;">'; //set opening tag, such as font declarations
fcontent[0]="<br>Dream4mobiles.co.uk";
fcontent[1]="<br>Home of thousands of great mobile phone deals";
fcontent[2]="<br>With free gifts and cash back deals available";
fcontent[3]="<br>From over 30 of the UKs top retailers";
fcontent[4]="<br>Updated daily";
closetag='</div>';
var fwidth='500px'; //set scroller width
var fheight='50px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) { 
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
} 
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:0px solid black;width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

See if it helps

[Dazza30]

Thanks again for the reply ill be able to try this out it about an hour, so ill post back the results.

One more thing before i do it, will this actualy help improve page load times ?

[Dazza30]

Thanks it worked great ive done it with all my javascript know and it does speed up load times, all i need do know is find out how to do it with css.