Coding Forum

**Gem** · 06-29-2004, 07:40 AM

Hi, I'm creating a page that utilises quite a lot of javascript on every page: rollovers, a marquee, a clock etc, and so decided to put all the code into an external javascript file on the advice of a friend.

However, I can't get all the javascript to now work! I've searched online tutorials about external javascript pages, and I cannot find anything to help me this problem.

Basically, the rollover links work, and I can see why - the javascript is 'called' from the .js file, but I have no idea how do 'call' the clock or marquee script. They both used to exist in cells, and now i've taken all the code out of those cells and put them in the external file, there is no code left in the cells to activate ther required script.

I'm afraid I don't know anything about coding javascript myself, and all the code I have used has been borrowed from free resource sites.

Can anyone please help?

**Kyrnt** · 06-29-2004, 09:02 AM

Put your desired functionality inside a function.

Code:

function myFunctionality()
{

    // Insert your code here.....

}

Then you should be able to invoke the functionality the same as with the rollovers - by calling the functions.

**Christopher** · 06-29-2004, 01:27 PM

You have to include the source file within your HTML,

Code:

<script language="javascript" src="yourfile.js"></script>

And make sure you don't have the <script ...></script> HTML tags within your .js file, just the javascript is required.

**Gem** · 08:15 PM

Sorry, I forgot to add in the initial post that I have included that in my html, and it has meant that my rollovers work, it's just that nothing else included in the .js file does.

I think it is just a case of creating functions.

Thanks!

**Christopher** · 06-29-2004, 06:00 PM

If the javascript was just 'there' before, out of any functions, then yes -- just stick them all in one funtion. Just copy and paste all of the code in a function and name it something like 'init':

Code:

function init()
{
    // all the code
}

Then on your HTML page, add an onload to your body tag:

HTML Code:

<body onload="init()">

**Gem** · 07:53 PM

I tried that, but I think I'm doing it wrong! I'm sorry I must seem so dense! I tried putting all the code within the function suggested, but it still didn't work! And then I took out the rollover one from that function, as that worked anyway, but still the rest didn't.

Basically my .js file contains:

HTML Code:

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! [url]http://javascript.internet.com[/url] -->

<!-- Begin



image1 = new Image();


image1.src = "http://southside.34sp.com/~gemma/SVGA/9red.jpg";


image2 = new Image();


image2.src = "http://southside.34sp.com/~gemma/SVGA/13red.jpg";

image3 = new Image();


image3.src = "http://southside.34sp.com/~gemma/SVGA/15red.jpg";


image4 = new Image();


image4.src = "http://southside.34sp.com/~gemma/SVGA/17red.jpg";



// End -->

   //-->



<!-- //Hide script from old browsers


   //Set arrays of day and month for dynamic display




      dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");


      monName = new Array ("Jan.", "Feb.", "Mar.", "Apr.", "May", "June", "July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec.");



      now = new Date;


   //Set the year for dynamic date display with y2k correction


      thisYr = now.getYear();

      if (thisYr < 1900) {

     thisYr = thisYr + 1900;


      }



/*



Cross browser Marquee script- © Dynamic Drive ([url]www.dynamicdrive.com[/url])

For full source code, 100's more DHTML scripts, and Terms Of Use, visit [url]http://www.dynamicdrive.com[/url]



Credit MUST stay intact


*/


//Specify the marquee's width (in pixels)




var marqueewidth="305px"


//Specify the marquee's height


var marqueeheight="15px"




//Specify the marquee's marquee speed (larger is faster 1-10)

var marqueespeed=2


//configure background color:


var marqueebgcolor="#595959"

//Pause marquee onMousever (0=no. 1=yes)?


var pauseit=1


//Specify the marquee's content (don't delete <nobr> tag)

//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<nobr><font face="verdana" color="#ffffff"><b>News:</b> There are still places available aboard the Cheshire Voyager as she makes her way from Stoke On Trent to York Railway Museum on 10th July. <a href="news.htm">Click here</a> for more details....  Are you a train enthusiast? Then why not join <i>Full Steam Ahead</i> and receive news letters and club discounts, click <a href="fullsteam.htm">here</a> to find out more...</font></nobr>'



////NO NEED TO EDIT BELOW THIS LINE////////////

marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS

var copyspeed=marqueespeed

var pausespeed=(pauseit==0)? copyspeed: 0

var iedom=document.all||document.getElementById


if (iedom)


document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')

var actualwidth=''


var cross_marquee, ns_marquee


function populate(){


if (iedom){

cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee




cross_marquee.style.left=parseInt(marqueewidth)+8+"px"


cross_marquee.innerHTML=marqueecontent


actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth

}



else if (document.layers){



ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8

ns_marquee.document.write(marqueecontent)

ns_marquee.document.close()

actualwidth=ns_marquee.document.width
}


lefttime=setInterval("scrollmarquee()",20)

}

window.onload=populate
function scrollmarquee(){


if (iedom){


if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))

cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"



else


cross_marquee.style.left=parseInt(marqueewidth)+8+"px"



}
else if (document.layers){

if (ns_marquee.left>(actualwidth*(-1)+8))



ns_marquee.left-=copyspeed

else


ns_marquee.left=parseInt(marqueewidth)+8


}


}

if (iedom||document.layers){

with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')

write('</div></div>')
}

else if (document.layers){


write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')

write('</ilayer>')

}
document.write('</td></table>')

}


}

<!-- //Hide script from old browsers


      document.write(dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate() + ", " + thisYr);

   //-->