Solved

How to share code across different HTML files

Posted on 2004-09-11
15
339 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
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 style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now