...

View Full Version : need help with javascript scroller background



cssmonster
11-01-2012, 01:20 AM
Hi,
I have some script I am trying to modify and would like to add an image to the background. It's a simple scroller and I just want to add a background image. I removed the style for the border in these lines of code:


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


I'm not sure if I can add it above or add a var to the code I received.

Below is the full code I received.

Thanks for any help!


<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,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)


var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>";
fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>";
closetag='</div>';


var fwidth='200px'; //set scroller width
var fheight='150px'; //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[inde x]+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="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>

VIPStephan
11-01-2012, 02:00 AM
In future, if you post any code please put it in between
tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

vwphillips
11-01-2012, 11:28 AM
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+';background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);"></div>');

felgall
11-01-2012, 07:32 PM
Don't use document.write - it ceased to serve any purpose when Netscape 4 died - since then beginners have been able to use innerHTML which has far fewer problems.

Also there's not much point in testing for IE4 when even IE6 is now dead.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum