Solved

How to share code across different HTML files

Posted on 2004-09-11
15
347 Views
Last Modified: 2006-11-17
I want to find a way to share HTML code that can be used in different HTML file.

For example, for things such as menus, company name, my phone number, my e-mail address that could be on any page, instead of typing them in each time, I just want to “import” them, from some type of library file.

That way, if I change something like me e-mail address, I only need to change my HTML in one place, and all my pages will be automatically updated next time they are loaded in the browser.


Any help would be appreciated.
Regards.
0
Comment
Question by:MPountley
15 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 12034465
Hi

The only two ways to do that with HTML/Javascript is either with an iframe, and you can put styles in it to make it without a border etc., or to use xmlhttp which isn't worth it.

I recommend you use a server-side language, for instance, PHP. PHP has an include() statement you can just plop into your code and it'll do that.

Regards,
Zyloch
0
 
LVL 8

Expert Comment

by:klykken
ID: 12034533
Zyloch is to the point advicing you to use server side includes.
If you are using PHP like he suggested, you can for example have a file called copyright.inc with your copyright statement like this:

<div class="copy">Copyright&copy;2004, MPountley. All Rights Reserved</div>

If you're going to include this on your page, you would need to change the filename of the html file to one that is going to be parsed as php from your server.
So if you had file.html
Change it to file.php

Inside file.php include this line of code that will include the code from your copyright.inc
<? include("copyright.inc"); ?>

And frames is an out-of-date web technology and should only be used in closed environments like an intranet, imho.
0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12034624
I have done this for the US Airforce.  They did not want server side for anything on a certain project for some reason so it had to be entirly html.  What you should use is JavaScript.

Place all your code that you want to share in javascript files.  Then include that file in your pages like so...


<html>
<head>
<title>ACES - Training CD</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table><tr><td>
<SCRIPT LANGUAGE="JavaScript" SRC="js/nav.js"></SCRIPT>
    </td>
  </tr>
<tr><td>My content</td></tr>
</table>
</body>
</html>

in the nav.js file put somthing like this:


var rightNav = ""

rightNav =+ "<br>";
rightNav =+ "<A name=\"link_L2\" class=\"navbutton\" HREF=\"default.htm\">Link 1</A>";
rightNav =+ "<br>";
rightNav =+ "<A name=\"link_L2\" class=\"navbutton\" HREF=\"default.htm\">Link 1</A>";


Just another way to do it.  But a good way without server side coding.

-Jason

0
Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

 
LVL 36

Expert Comment

by:Zyloch
ID: 12034628
Ah yes, never thought of that. Wouldn't you also want document.write(rightNav); though?
0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12034633
Yes.  sorry i forgot that part.

LOL

-Jason
0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12034670
this will work as well if you want to put all the sections you are including in one JS file and give them seperate variables.

Place this with the variable name you are writing for each one in the places that  you need it.

<SCRIPT LANGUAGE="JavaScript">                                    
      document.write(rightNav);
</script>


both ways work. just depends if you want to seperate each javascript into seperate files each seaction you are includeing or put them all in one JS file and give them seperate variables.

-Jason

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12034707
Ah, well, because everyone's sharing, I might as well too:
This is the xmlhttp method: (Not on Mozilla at least, won't work)

var xmlHTTP = (document.all) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xmlHTTP.open("GET", "http://www.google.com", false);
if (document.all) {
   xmlHTTP.send();
} else {
   xmlHTTP.send(null);
}

var resText = xmlHTTP.responseText;

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12034708
Just change google with something else
0
 
LVL 4

Expert Comment

by:Neil_Simpson
ID: 12034824
Well here's my suggestion, different again. You should use server-side includes (SSI). All you need to do is create a file navigation.txt and add the HTML code directly to that. In each HTML page you add:
<!--#include virtual='/navigation.txt' --> and the server will add the contents of the file to this location.

This method requires the HTML file to be parsed before the server returns it, this is a configurable server setting. It is common that you will have to rename files to *.shtml in order to get the server to parse them.

I would advocate this method over javascript and PHP purely because it is neater and it doesn't make your code quite so ugly. :o)
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12034946
Actually, PHP doesn't make the code uglier, it's basically the same thing. You can replace any single

<!--#include virtual='/navigation.txt'--> with
<?php include('/navigation.txt'); ?>

But the concept still remains.

(Note for the SSI method, your server must be set up to allow SSI)
0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12035171
Zyloch
,

uglier?  Come on..  I don't want to make this thread become a code bashing war but i think that ASP is better then PHP. I know them both and have to say that uglier is a strong word when you are talking about a simple thing as an include statement. If you were talking about a complete function or somthing there would be an agument there but somthing as simple as this.  I think not.

Let jsut give suggestions and nothing more.

-Jason
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12036766
Yes, I know, I was just stating my opinion. For all I know, ASP might be much better, but in syntax, I would think that the two include statements don't hold much difference, I was only replying to

>>I would advocate this method over javascript and PHP purely because it is neater and it doesn't make your code quite so ugly. :o)

just to clear some facts up. Of course, if you think the PHP for the include statement is still tons uglier than the include, be my guest, but I didn't want MPountley to be turned away from PHP because of Neil's opinions (no offense, Neil, your opinion is your opinion :-) PHP may just be uglier, but it's just a matter of opinion.

P.S. I would do the same for ASP, heh
0
 

Author Comment

by:MPountley
ID: 12036797
The JavaScript sounds sounds very close to what I want, but I can't get the example to work. <grin>
Here is my HTML and my JS file. I have placed them in the same directory and have tried with IE and Mozilla.
I just get "My content"
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table><tr><td>
<script LANGUAGE="JavaScript" src="nav.js">                          

   
     document.write(rightNav);
</script>

    </td>
  </tr>
<tr><td>My content</td></tr>
</table>
</body>
</html>

(*** NAV.JS ***)
var rightNav = ""

rightNav =+ "<br>WOW";


Any suggestions would be great.

Regards,
Mark
0
 
LVL 1

Accepted Solution

by:
JsonTerre1 earned 125 total points
ID: 12036812
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">
</head>
<SCRIPT LANGUAGE="JavaScript" SRC="nav.js"></SCRIPT>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table><tr><td>
<script LANGUAGE="JavaScript">                          
     document.write(rightNav);
</script>



    </td>
  </tr>
<tr><td>My content</td></tr>
</table>
</body>
</html>




// JavaScript Document

var rightNav = ""

rightNav = rightNav + "<br>";
rightNav = rightNav + "<A name=\"link_L2\" class=\"navbutton\" HREF=\"default.htm\">Link 1</A>";
rightNav = rightNav + "<br>";
rightNav = rightNav + "<A name=\"link_L2\" class=\"navbutton\" HREF=\"default.htm\">Link 1</A>";


there you are.  Sorry about that.

-Jason


0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12036820
Oops again....


the nav.js file:



// JavaScript Document

var rightNav = ""

rightNav = rightNav + "<br>";
rightNav = rightNav + "<A name=\"link_L1\" class=\"navbutton\" HREF=\"Page1.htm\">Link 1</A>";
rightNav = rightNav + "<br>";
rightNav = rightNav + "<A name=\"link_L2\" class=\"navbutton\" HREF=\"Page2.htm\">Link 2</A>";

-Jason
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question