PDA

Click to See Complete Forum and Search --> : using multiple external .js files

davidosullivan
09-10-2004, 06:30 PM
Hi!
I am editing a website, removing javascript that is repeated on each page and placing it in external files. I can do it for text or images (see header.js) but the mouseover menubar uses other js functions which were originally in a external js called runtime.js.

How can I include or call the functions from runtime.js in my menubar.js file?

We are dealing with four files.
home.html
runtime.js
header.js
menubar.js

There is also a CSS (uses Czech naming and comments!)


home.htm (Here is a shortened version)
<html>
<head>
<link rel="Stylesheet" type="text/css" href="stylyNN.css" DISABLED>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
if (document.all) document.createStyleSheet("styly.css");
//-->
</SCRIPT>
<script language="JavaScript" src="runtime.js"></script>
<title>myTitle</title>
</head>
<body>
<div class="bodyenv">
<!--MENUBAR-- NOT WORKING-->
<script language="javascript" src="menubar.js"></script>
<!--HEADER-- WORKING-->
<script language="javascript" src="scripts/header.js"></script>
</div>
</body>
</html>


runtime.js (functions for mouseover etc)
function LeftMenuItemOver(ID)
{
var Src = ID
if (Src.defSrc == null)
Src.defSrc = Src.src.substring(0,Src.src.lastIndexOf('.'));
Src.src = Src.defSrc + "_.gif"
}
function LeftMenuItemOut(ID)
{
var Src = ID
Src.src = Src.defSrc + ".gif"
}
function LeftMenuOnClick(urlAddress)
{
window.location.href = urlAddress
}


header.js (My new file, I simply removed the html from home.htm
and placed it in header.js using document.write()
statements.)
document.write('<!--HEADER -->');
document.write('<div class="nadpis">');
document.write(' <!--SMALL FLAGS, UK, GERMANY, FRANCE, SPAIN-->');
document.write(' <div class="smallflags">');
document.write(' <img src="images/cw_flag_uk_small.gif" >');
document.write(' <img src="images/cw_flag_ge_small.gif" >');
document.write(' <img src="images/cw_flag_fr_small.gif" >');
document.write(' <img src="images/cw_flag_small.gif" >');
document.write(' </div>');
document.write(' <img class="cwflag" src="images/cw_flag_cz.gif">');
document.write(' <img src="images/topbar.gif">');
document.write('</div>');


menubar.js (THIS IS THE PROBLEM FILE! Like header.js I simply cut
the code from home.htm and put it in this file with
document.writes)

document.write('<!--MENUBAR -->');
document.write(' <div class="levy-sloupecEnv">');
document.write(' <div class="LeftMenuItems">');
document.write(' <img src="images/menu/menuitem_03__.gif" >');
document.write(' <img src="images/menu/menuitem_05.gif"
onmouseover="LeftMenuItemOver(this)"
onmouseout="LeftMenuItemOut(this)"
onclick="LeftMenuOnClic('xx.htm')">');
document.write(' </div>');
document.write('</div>');

The line with the onmouseover calls a function from runtime.js which is called in the head of the home.htm.
If I remove this line the .js file is called and the image in the line above it (menuitem_03) is displayed.
If the code in this menubar.js file is placed directly in the bosy of home.htm (As it was originally) it works fine, but I need it in an external file (menubar.js) but it doesn't work, WHY? I have tried copying the functions directly from runtime.js into menubar.js but its still no good!
The CSS file couldn't be part of the problem could it? I doubt it.

Your help would be greatly appreciated, I've been at this for three days!!

David O'Sullivan
JPnyc
09-10-2004, 06:41 PM
Either link each js to the page the functions will be called from, or put all the functions in one external js. You can have as many linked script tags as you need.
davidosullivan
09-10-2004, 07:04 PM
I have tried many things like that DUNSEL but nothing has worked so far!

Right now the link tio runtime.js is in home.htm, same as it was before I made my changes.

<script language="javascript" src="menubar.js"></script> is in a specific location in the body of the page.

menubar.js needs runtime.js so do I put code in it to link it to runtime.js??

(Slowly going insane here!)
JPnyc
09-10-2004, 07:14 PM
I don't believe you can call 1 function from an external js, to another external js. Put the code in 1 file, or place just the function you need in both files that require it.
davidosullivan
09-10-2004, 07:31 PM
Yes I tried that too but it doesn't work for some reason.
I added the functions from runtime.js into menubar.js as shown below but its no good.

Here is the altered menubar.js that I tried

function LeftMenuItemOver(ID)
{
var Src = ID
if (Src.defSrc == null)
Src.defSrc = Src.src.substring(0,Src.src.lastIndexOf('.'));
Src.src = Src.defSrc + "_.gif"
}
function LeftMenuItemOut(ID)
{
var Src = ID
Src.src = Src.defSrc + ".gif"
}
function LeftMenuOnClick(urlAddress)
{
window.location.href = urlAddress
}
document.write('<!--MENUBAR -->');
document.write(' <div class="levy-sloupecEnv">');
document.write(' <div class="LeftMenuItems">');
document.write(' <img src="images/menu/menuitem_03__.gif" >');
document.write(' <img src="images/menu/menuitem_05.gif"
onmouseover="LeftMenuItemOver(this)"
onmouseout="LeftMenuItemOut(this)"
onclick="LeftMenuOnClick('profil.htm')">');
document.write(' </div>');
document.write('</div>');
davidosullivan
09-10-2004, 07:36 PM
By the way the reason I want to use multiple .js files is because they can all use the CSS in the main HTML page so when I finish I would like to have external scripts that I can place on the page in a certain order to give the look that I want.

Example.

<body>

<div class="bodyenv">

<!--MENUBAR-->
<script language="javascript" src="menubar.js"></script>

<!--HEADER-->
<script language="javascript" src="scripts/header.js"></script>

<!--MARGUEE-->
<script language="javascript" src="marquee.js"></script>

<!--PAGE CONTENT-->
<script language="javascript" src="content.js"></script>


</div>
</body>

Other pages will use some but not all of these files.
JPnyc
09-10-2004, 08:31 PM
If they don't work from the same file, then there's something wrong with the functions.
Nedals
09-10-2004, 08:33 PM
document.write(' <img src="images/menu/menuitem_05.gif"
onmouseover="LeftMenuItemOver(this)"
onmouseout="LeftMenuItemOut(this)"
onclick="LeftMenuOnClick('profil.htm')">');

There are a couple of problems here
1. This should all be on one line (maybe it is but the forum is wrapping it)
2. You need to 'escape' the '
LeftMenuOnClick(\'profil.htm\')">
JPnyc
09-10-2004, 09:23 PM
You don't need to escape em when they're single inside double quotes, or double inside single quotes. As long as the outer quote type you use appears nowhere else in the string, you're ok.
JPnyc
09-10-2004, 09:25 PM
You know what, you're right. They DO appear elsewhere in the string. So they do need to be escaped.
davidosullivan
09-11-2004, 06:29 AM
Nedals, DUNSEL,
Its morning time here in the Czech republic, I have just gotten out of bed, I have to go out straight away but when I come back and check what you two have suggested and it works I am going to be a very very happy man!
davidosullivan
09-11-2004, 10:24 AM
Okay people....Thanks for your help!
Good news and bad news...

The good news is that when I inserted the \ into the lines as shown here:

document.write('<img src="images/menu/menuitem_05.gif"
onmouseover="LeftMenuItemOver(this)"
onmouseout="LeftMenuItemOut(this)"
onclick="LeftMenuOnClick(\'profil.htm\')">
');

It works perfectly!

But I was immediately hit by another problem.
I thought it would be the same problem with the second js file marguee.js but there are no ' quotes within the writelns!

Here is marquee.js (Displays scrolling text)
document.write('<!--MARGUEE-->');
document.write('<div class="infolineEnvelope">');
document.write(' <div class="infoline">');
document.write(' <marquee direction="left"
scrollAmount="1"
trueSpeed ="true"
SCROLLDELAY="20"
class="InfolineMQ">
');
document.write(' Scrolling text line 1 ');
document.write(' <span class="infolinedivider">&nbsp;</span>');
document.write(' Scrolling text line 2 ');
document.write(' </marquee>
document.write(' </div>
document.write('</div>

The problem is probably in the marquee parameters line (all one line in the program)
It is called from home.htm like the others but does not work!!!

Here is home.htm
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<meta http-equiv="Content-language" content="cs">
<link rel="Stylesheet" type="text/css" href="stylyNN.css" DISABLED>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
if (document.all) document.createStyleSheet("styly.css");
//-->
</SCRIPT>
<script language="JavaScript" src="Scripts/runtime.js"></script>
<title>myTitle</title>
</head>
<body>
<div class="bodyenv">
<!--MENUBAR THIS NOW WORKS THANKS TO YOUR ADVICE-->
<script language="javascript" src="menubar.js"></script>
<!--HEADER THIS ALWAYS WORKED-->
<script language="javascript" src="scripts/header.js"></script>
<!--MARGUEE--NOT WORKING-->
<scriptlanguage="javascript"src="marquee.js"></script>
<!--PAGE CONTENT WORKING-->
<script language="javascript" src="home.js"></script>
</div>
</body>
</html>

Both marguee and menubar require functions from runtime.js but if menubar can now access them what is the problem with marquee.js??

Can you help guys?


I include the contents of runtime.js here for completion:

function LeftMenuItemOver(ID)
{
var Src = ID
if (Src.defSrc == null)
Src.defSrc = Src.src.substring(0,Src.src.lastIndexOf('.'));
Src.src = Src.defSrc + "_.gif"
}

function LeftMenuItemOut(ID)
{
var Src = ID
Src.src = Src.defSrc + ".gif"
}

function LeftMenuOnClick(urlAddress)
{
window.location.href = urlAddress
}

function FormIconClick(ID)
{
var Src = ID
if (Src.defSrc == null)
Src.defSrc = Src.src.substring(0,Src.src.lastIndexOf('.'));
if (Src.clicked)
{
Src.clicked=false;
Src.src = Src.defSrc + ".gif";
}
else
{
Src.src = Src.defSrc + "_.gif"
Src.clicked=true;
}

}

function LongTextOver(ID)
{
var Src = ID;
if (Src.scrollWidth<=Src.offsetWidth)
return;
if (Src.fullText == null)
{
var newh = document.createElement("DIV");
newh.className='LongTextHint';
newh.style.width=Src.scrollWidth+10;

newh.innerHTML = Src.innerHTML;
Src.fullText = Src.insertAdjacentElement('beforeBegin',newh);
}
else
Src.fullText.style.display='block';

}

function LongTextOut(ID)
{
var Src = ID;
if (Src.fullText != null)
Src.fullText.style.display='none';
}



function SubmitForm()
{
window.status='Submit';
}


function r(n,v) {
/* DYNAMICKY PRIRADI STYL PODLE POLOHY MYSI NAD DATALISTEM
PARAMETRY>
n ( this ) - identifikace aktualniho radku
v ( integer ) - cislo pozadovaneho stylu v rozsahu (1 az 4)
*/

n.className = v;
}
Nedals
09-11-2004, 10:55 AM
Is it this simple or is this just a typo?

document.write(' </marquee>
document.write(' </div>
document.write('</div>

These need closing ');
davidosullivan
09-11-2004, 11:07 AM
Dear Nedels and DUNSEL,

Thank you so much for taking the time, I really appreciate it, now I can get on with the work I am supposed to be dong!

Yes Nedels you were right (again!) I can't believe I was so stupid, I made a shortened version of marguee.js to use to post to the forum and thats where the typo crept in!

Cheers to the Supreme Masters of the Web!!
Nedals
09-11-2004, 12:03 PM
No doubt you realize that your whole site is going to fall apart if a user has javascript disabled.
A better way to do all this is to use server-side scripting. If it's available to you, you might want to look into using PHP to handle all the document.write() stuff and a common external .js file to handle all the non-critical JS functions.
JPnyc
09-11-2004, 12:07 PM
He's right. You should at least use an index page that tells them you need JS enabled to view this site, which also calls those functions if they have JS enabled. Sort of like a default redirect.
davidosullivan
09-11-2004, 12:17 PM
Yes I do realise this but I've been asked to do a number of things with this site, including translate it to English from Czech, I am just going to do that because I don't have time to learn PHP.