MPountley
asked on
How to share code across different HTML files
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.
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.
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&cop
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.
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&cop
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.
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
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
Ah yes, never thought of that. Wouldn't you also want document.write(rightNav); though?
Yes. sorry i forgot that part.
LOL
-Jason
LOL
-Jason
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
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
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.X
xmlHTTP.open("GET", "http://www.google.com", false);
if (document.all) {
xmlHTTP.send();
} else {
xmlHTTP.send(null);
}
var resText = xmlHTTP.responseText;
This is the xmlhttp method: (Not on Mozilla at least, won't work)
var xmlHTTP = (document.all) ? new ActiveXObject("Microsoft.X
xmlHTTP.open("GET", "http://www.google.com", false);
if (document.all) {
xmlHTTP.send();
} else {
xmlHTTP.send(null);
}
var resText = xmlHTTP.responseText;
Just change google with something else
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)
<!--#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)
Actually, PHP doesn't make the code uglier, it's basically the same thing. You can replace any single
<!--#include virtual='/navigation.txt'-
<?php include('/navigation.txt')
But the concept still remains.
(Note for the SSI method, your server must be set up to allow SSI)
<!--#include virtual='/navigation.txt'-
<?php include('/navigation.txt')
But the concept still remains.
(Note for the SSI method, your server must be set up to allow SSI)
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
,
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
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
>>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
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
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