1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:38 pm May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Updating code on one page to alter every page

         

Rightz

8:55 am on Apr 12, 2006 (gmt 0)

10+ Year Member



Hi,

I want to save the following menu code on seperate page so when I update the menu I don't have to update it on each page.

Is there a way I can do this. Maybe save it as a .js page or something? I'm new to this so please be gentle.

Thanks

<STYLE>BODY {
FONT-FAMILY: arial
}
TABLE.menu1 {
FONT-SIZE: 80%; BACKGROUND: black
}
TABLE.menu1 A {
FONT-WEIGHT: bold; COLOR: black; TEXT-DECORATION: none
}
TABLE.menu {
FONT-SIZE: 80%; BACKGROUND: black
}
TABLE.menu A {
FONT-WEIGHT: bold; COLOR: black; TEXT-DECORATION: none
}
TABLE.menu1 {
TEXT-ALIGN: center
}
TABLE.menu {
LEFT: auto; POSITION: absolute
}
A:hover {
COLOR: #606060
}
TD.menu {
BACKGROUND: #fdea64
}
TABLE.menu {
FONT-SIZE: 100%; VISIBILITY: hidden; POSITION: absolute
}
</STYLE>

and.....

<TABLE id=AutoNumber1 style="BORDER-COLLAPSE: collapse" cellSpacing=1
cellPadding=2 width="88%" bgColor=#FFFFCE border=0 bordercolor="#FFFFCE">
<TBODY>
<TR bgColor=#ffffce>
<TD width="100%" colSpan=3>
<FONT style="FONT-SIZE: 9pt"
face=verdana,arial,helvetica color=#800080>
<STRONG>
<div align="center">
<center><table width="100%" cellpadding="3">
<tr>
<td style="border:2px outset #800000; font-family:Trebuchet MS,Verdana,Arial; font-size:8pt; letter-spacing:1; font-weight:bold; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px; background-color:#FFFF99"
align="center" bgcolor="#FF0000" colspan="2" rowspan="2" bordercolorlight="#800000" bordercolordark="#800000">
<a href="http://phuketdelight.com/Phukets-Best-Resorts-Spas-Hotels.htm">
<font color="#800000" face="Arial Narrow" size="1">Phuket Hotels &amp; Reviews</font></a></td>
<td style="border:2px outset #800000; font-family:Trebuchet MS,Verdana,Arial; font-size:8pt; letter-spacing:1; font-weight:bold; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px; background-color:#FFFF99"
align="center" bgcolor="#FF0000" colspan="2" rowspan="2" bordercolorlight="#800000" bordercolordark="#800000">
<font face="Arial Narrow" size="1">
<a href="http://phuketdelight.com/Phuket_Weather.htm"><font color="#800000">Phuket Weather</font></a><font color="#800000"></a></font></font></td>
<td style="border:2px outset #800000; font-family:Trebuchet MS,Verdana,Arial; font-size:8pt; letter-spacing:1; font-weight:bold; background-color:#FFFF99"
align="center" colspan="2" rowspan="2" bordercolorlight="#800000" bordercolordark="#800000">
<a href="http://phuketdelight.com/Phuket-When_to_go.htm">
<font color="#800000" face="Arial Narrow" size="1">When
to Come</font></a></td>
<td style="border:2px outset #800000; font-family:Trebuchet MS,Verdana,Arial; font-size:8pt; letter-spacing:1; font-weight:bold; background-color:#FFFF99"
align="center" colspan="2" rowspan="2" bordercolorlight="#800000" bordercolordark="#800000">
<a href="http://phuketdelight.com/Best%20Beaches.htm">
<font color="#800000" face="Arial Narrow" size="1">Phuket's Best Beaches</font></a></td>

<td style="border:2px outset #800000; font-family:Trebuchet MS,Verdana,Arial; font-size:8pt; letter-spacing:1; font-weight:bold; background-color:#FFFF99"
align="center" colspan="2" rowspan="2" bordercolorlight="#800000" bordercolordark="#800000">
<font color="#FFFF00" face="Arial Narrow" size="1">
<a target="_blank" href="http://phuketdelight.com/Phuket_Airport.htm">
<font color="#800000">Phuket
Airport</font></a></font><font color="#800000" face="Arial Narrow" size="1"></a></font></td>
<td style="border:2px outset #800000; font-family:Trebuchet MS,Verdana,Arial; font-size:8pt; letter-spacing:1; font-weight:bold; background-color:#FFFF99"
align="center" colspan="2" rowspan="2" bordercolorlight="#800000" bordercolordark="#800000">
<span style="font-weight: 400">
<STRONG>
<font color="#FFFF00" size="1" face="Arial Narrow">
<a target="_blank" href="http://phuketdelight.com/Favorite%20Restaurants.htm">
<font color="#800000">Favorite Restaurants</font></a></font><font color="#800000"></a></font></STRONG></span></td>
<FONT style="FONT-SIZE: 9pt"
face=verdana,arial,helvetica color=#FFFF00>

<td style="border:2px outset #800000; font-family:Trebuchet MS,Verdana,Arial; font-size:8pt; letter-spacing:1; font-weight:bold; background-color:#FFFF99"
align="center" colspan="2" rowspan="2" bordercolorlight="#800000" bordercolordark="#800000">
<STRONG>
<font color="#FFFF00" face="Arial Narrow" size="1">
<a target="_blank" href="http://phuketdelight.com/Best%20Island%20Drives.htm">
<font color="#800000">Phuket's Best Island Drives</font></a></font></STRONG></FONT><STRONG><span style="font-weight: 400"><FONT style="FONT-SIZE: 9pt"
face=verdana,arial,helvetica color=#800000 size="1"></a></FONT><FONT
face="Arial Narrow" color=#800080 size="1" style="font-size: 9pt"><a target="_blank" href="http://phuketdelight.com/Best%20Island%20Drives.htm"><font color="#800000">
</font></a></FONT></span></STRONG>
<td>
</FONT>
</tr>
</table>

and....

<TABLE class=menu1 width="88%">
<TBODY>
<TR bgColor=#ffcc33>
<TD bgcolor="#FFFF99" bordercolor="#800000" bordercolorlight="#800000" bordercolordark="#800000"><A
href="http://phuketdelight.com">
<font size="1" color="#800000">Home</font></A><font size="1" color="#800000"><BR>
</font></TD>
<TD onmouseover="showmenu('general')" onmouseout="hidemenu('general')" bgcolor="#FFFF99" bordercolor="#800000" bordercolorlight="#800000" bordercolordark="#800000">
<font size="1" color="#800000">
<a href="http://phuketdelight.com/Vacationing%20on%20Phuket.htm">
<font color="#800000">Visiting Phuket</font></a><BR>
</font>
<TABLE class=menu id=general width=255>
<TBODY>
<TR>
<TD class=menu width="249">
<a href="http://phuketdelight.com/Phukets-Best-Resorts-Spas-Hotels.htm">
<font size="1" color="#800000">Phuket Hotels &amp;
Resorts</font></a></TD></TR>
<TR>
<TD class=menu width="249">
<font size="1" color="#800000">
<a href="http://phuketdelight.com/Best%20Beaches.htm">
<font color="#800000">Phuket's Best </font></a></font>
<a href="http://phuketdelight.com/Best%20Beaches.htm">
<font size="1" color="#800000">Beaches</font></a></TD></TR>
<TR>
<TD class=menu width="249"><b>
<font size="1" color="#800000">
<a href="http://phuketdelight.com/Favorite%20Restaurants.htm">
<font color="#800000">Favorite </font></a> </font></b>
<a href="http://phuketdelight.com/Favorite%20Restaurants.htm">
<font size="1" color="#800000">Restaurants</font></a></TD></TR>

etc

daosmith

12:34 pm on Apr 12, 2006 (gmt 0)

10+ Year Member



Although you could, in theory, use javascript in an external file to write out your menu and simply reference this file on each page, it is a bad idea to make such an integral part of your site dependent on javascript. Some users don't have javascript enabled, and of course, no search crawlers do, so to Googlebot et al. your site pages will seem unconnected.

I would suggest that you use an <object> or <iframe> element to achieve the same thing, but without the need for javascript. I'm not sure how search-crawler friendly these constructs are but they are certainly a lot better than a javascript solution.

Probably the best solution is to use server-side includes via a language like PHP, if the facility is available to you. If not, look into using an <object> or <iframe>.

Rightz

1:29 pm on Apr 12, 2006 (gmt 0)

10+ Year Member



I'm looking into SSI at the moment... would you suggest that be a way to go?

rocknbil

6:03 pm on Apr 13, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



SSI would certainly be the easiest and is not Javascript dependent, nor is it dependent on any server-side programming for your site to function. You could also centralize your CSS and any Javascript you may have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>

<!--#include file="mymenu.txt" -->
or
<!--#include virtual="/includes/mymenu.txt" -->

</body>
</html>

The space before --> is important.

The only thing to watch for wih an SSI menu is the path in the links, that is, if you have the SSI's in varying directories

(root) index.shtml
/widgets/index.shtml
/widgets/green/plastic/index.shtml

For all of these, you should start at ROOT for any links in the SSI files, that way you don't have to count dots

<a href="/index.shtml">Home</a>

for all of the above, instead of

<a href="index.shtml">Home</a>
<a href="../index.shtml">Home</a>
<a href="../../../../index.shtml">Home</a>

One last comment, you have a style sheet but your HTML is still using deprecated elements - rip out those stupid <font> tags and bgcolor attributes and move them into your css! :-)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:38 pm May 14, 2026