External Javascript File

Anthony2oo4

03-19-2005, 09:36 PM

Hi guys. Just a simple request really. I have just made a template, and it dosn't require fancy PHP etc to run, but I simply want to see if I can store my menu in an external javascript file so I can simply edit one file instead of tones of HTML files.

Here is source of my page:

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Site Navigation</title>
</head>

<body bgcolor="#E1E1E1">

<div align="center">
<table border="1" width="69%" id="table1" cellspacing="0" cellpadding="0" bordercolor="#E1E1E1">
<tr>
<td bordercolor="#000000" colspan="2"><A
href="http://your_website.com">
<IMG src="images/logo.png"
border=0 width="100%" height="117"></A></td>
</tr>
<tr>
<td bordercolor="#E1E1E1" colspan="2"> </td>
</tr>
<tr>
<td bordercolor="#E1E1E1" width="20%" valign="top">
<TABLE cellSpacing=1 cellPadding=4 width="92%" bgColor=#000000
border=0 id="table2">
<TBODY>
<TR>
<TD width="51%" background=images/tile_back.gif
bgColor=#E1E1E1 style="font-size: 10px; color: #000000; font-family: verdana"><FONT color=#ffffff><B>Site
Navigation</B></FONT></TD></TR>

<TR><TD width="51%" bgColor=#e1e1e1 style="font-size: 10px; color: #000000; font-family: verdana"><FONT color=black>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 1</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 2</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 3</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 4</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 5</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 6</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 7</A>
</TD></TR></TBODY></TABLE>

<p style="margin-top: 0; margin-bottom: 0"> </td>
<td bordercolor="#E1E1E1" width="79%">
<TABLE cellSpacing=1 cellPadding=4 width="100%" bgColor=#000000
border=0 id="table3">
<TBODY>
<TR>
<TD width="69%" background=images/tile_back.gif
bgColor=#E1E1E1 style="font-size: 10px; color: #000000; font-family: verdana"><FONT color=#ffffff><B>Site
Navigation</B></FONT></TD></TR>

<TR><TD width="69%" bgColor=#e1e1e1 style="font-size: 10px; color: #000000; font-family: verdana"><FONT color=black>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 1</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 2</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 3</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 4</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 5</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 6</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 7</A>
</TD></TR></TBODY></TABLE>

<p style="margin-top: 0; margin-bottom: 0"> </p>
<TABLE cellSpacing=1 cellPadding=4 width="100%" bgColor=#000000
border=0 id="table4">
<TBODY>
<TR>
<TD width="51%" background=images/tile_back.gif
bgColor=#E1E1E1 style="font-size: 10px; color: #000000; font-family: verdana"><FONT color=#ffffff><B>Site
Navigation</B></FONT></TD></TR>

<TR><TD width="51%" bgColor=#e1e1e1 style="font-size: 10px; color: #000000; font-family: verdana"><FONT color=black>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 1</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 2</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 3</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 4</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 5</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 6</A><BR>
»<A href="" style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 7</A>
</TD></TR></TBODY></TABLE>

<p style="margin-top: 0; margin-bottom: 0"> </td>
</tr>
<tr>
<td bordercolor="#000000" colspan="2" bgcolor="#808080"> </td>
</tr>
</table>
</div>

</body>

</html>

So to make the menu open in a external file I tried this:

<SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>

And in menu.js I put this:

document.write("<TD width="51%" background=images/tile_back.gif bgColor=#E1E1E1 style="font-size: 10px; color:

#000000; font-family: verdana"><FONT color=#ffffff><B>Site Navigation</B></FONT></TD></TR><TR><TD width="51%"

bgColor=#e1e1e1 style="font-size: 10px; color: #000000; font-family: verdana"><FONT color=black>»<A href=""

style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 1</A><BR>»<A href=""

style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 2</A><BR>»<A href=""

style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 3</A><BR>»<A href=""

style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 4</A><BR>»<A href=""

style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 5</A><BR>»<A href=""

style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 6</A><BR>»<A href=""

style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 7</A></TD>")

(i did put all that code on one line)

I get this error "expected ")""

And help please?

Thanks for your time ;)

mark87

03-19-2005, 09:59 PM

Not sure but I think it's probably due to have speech marks in the actual document write thing as well.

_Aerospace_Eng_

03-19-2005, 10:03 PM

yep mark is right, your javascript document.write needs to be opposite when it comes to the quotes, if you use single quotes in your html then use a double quote to begin the document.write and vice versa
document.write('<TD width="51%" background=images/tile_back.gif bgColor=#E1E1E1 style="font-size: 10px; color:');
document.write('#000000; font-family: verdana"><FONT color=#ffffff><B>Site Navigation</B></FONT></TD></TR><TR><TD width="51%"');
document.write('bgColor=#e1e1e1 style="font-size: 10px; color: #000000; font-family: verdana"><FONT color=black>»<A href=""');
document.write('style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 1</A><BR>»<A href=""');
document.write('style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 2</A><BR>»<A href=""');
document.write('style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 3</A><BR>»<A href=""');
document.write('style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 4</A><BR>»<A href=""');
document.write('style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 5</A><BR>»<A href="" ');
document.write('style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 6</A><BR>»<A href=""');
document.write('style="color: #000000; font-family: verdana; text-decoration: none"> Link Link 7</A></TD>');
see if that works for you, may get an unterminated string constant dunno haven't tested, yeah you would need to put all of the code on one line which could get hectic later on or use multiple document.writes

Anthony2oo4

03-19-2005, 10:19 PM

Thanks guys, I already figured it out so "mark" your where right ;)
I also took your advide "_Aerospace_Eng_", I used multiple lines cause its easier. Here is how I solved it if anyone needs it. You need to put a "\" in front of all the "'s inside the documnet.write so it knows that thats not the end of the line.

Thanks guys. :thumbsup:

document.write("<TD width=\"51%\" background=images/tile_back.gif bgColor=#E1E1E1 style=\"font-size: 10px; color: #000000; font-family: verdana\"><FONT color=#ffffff><B>Site Navigation</B></FONT></TD></TR>");
document.write("<TR><TD width=\"51%\" bgColor=#e1e1e1 style=\"font-size: 10px; color: #000000; font-family: verdana\"><FONT color=black>");
document.write("»<A href=\"\" style=\"color: #000000; font-family: verdana; text-decoration: none\"> Link Link 1</A><BR>");
document.write("»<A href=\"\" style=\"color: #000000; font-family: verdana; text-decoration: none\"> Link Link 2</A><BR>");
document.write("»<A href=\"\" style=\"color: #000000; font-family: verdana; text-decoration: none\"> Link Link 3</A><BR>");
document.write("»<A href=\"\" style=\"color: #000000; font-family: verdana; text-decoration: none\"> Link Link 4</A><BR>");
document.write("»<A href=\"\" style=\"color: #000000; font-family: verdana; text-decoration: none\"> Link Link 5</A><BR>");
document.write("»<A href=\"\" style=\"color: #000000; font-family: verdana; text-decoration: none\"> Link Link 6</A><BR>");
document.write("»<A href=\"\" style=\"color: #000000; font-family: verdana; text-decoration: none\"> Link Link 7</A></TD>");

_Aerospace_Eng_

03-19-2005, 10:21 PM

that works to, its called escaping the quotes, its similar to php in a sense because in php you have to also escape the quotes, when you are trying to echo something