linking div to js

[neilkw]

Yes, I'm brand new to js...

I want to understand how I assign a div to link to an externally hosted js file.

I have successfully added the external link to the head but am unsure as to where i assign the class or id to a div that links to the specific js file.

Could someone quickly show me what syntax to use. I have named the js file as "latestnews_fader.js".


My js is...

<script type="text/javascript">

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 12px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>What\'s new?</b><br>purus, mollis at condimentum nec, cursus id eros. Phasellus ut sapien lectus. Nunc sit amet tellus est. Praesent vel dui eros, in rhoncus nibh. Etiam gravida, velit at posuere commodo, lacus justo cursus erat, nec fringilla lorem felis a ligula. Praesent nunc quam, suscipit a aliquam et, ornare et risus. Donec rhoncus, sapien vitae interdum luctus, erat odio congue tellus, vitae aliquet nisi odio sit amet augue. Morbi mollis porta tincidunt. Cras at urna ac ligula fringilla rhoncus<a href='link.htm'>More Info - Click here</a>";
fcontent[1]="<b>What\'s new?</b><br>text here</a>";
fcontent[2]="<b>What\'s new?</b><br>Click here</a>";
closetag='</div>';

var fwidth='220px'; //set scroller width
var fheight='250px'; //set scroller height

var fadelinks=0; //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++
}



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:1px 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>

[Beverleyh]

Firstly, you must keep reference to Dynamic Drive in the js otherwise you're in violation of usage terms. In case you aquired the code from another site, here's the script page here on DD: http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm

The usage instructions on the page might also help clear things up for you - in this case you dont need to add the external js link to the head section (that might be where you're getting tangled), you just need to add it into the body where you want the scroller to appear:

<script type="text/javascript" src="path/to/js/script.js"></script>
Usually, if a div is referenced in an external js file, you can alter the css/contents directly in the external js file OR in the case of CSS, the div in the external js file might use a class/id that is referenced in an external CSS file and you can alter styling there.

I hope that helps

[neilkw]

Thanks,

the code was more of an example really..

I want to learn the exact code to link the div to js.

what code do i need to put in the js to make the link to the div? assuming i use an div id of latestnews_fader.js

[Beverleyh]

I think you're referring to "getElementByID" ?

[neilkw]

yes that sounds like the one!

How do i assign the id name to the js and what is the correct way to reference it from the html?

[Beverleyh]

http://www.tizag.com/javascriptT/javascript-getelementbyid.php

[neilkw]

beautiful woman xx

thanks