• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 209
  • Last Modified:

Exact Code From One Page to the Next

How do you call HTML code from one page and merge it to another?  I'm sorry, I don't know what this process is called, but I've seen a lot sites that have the same header and navigation bar (made with tables) on every single page.  I'm sure they didn't write the whole code for all the pages, as that wouldn't practical.
0
strider031598
Asked:
strider031598
  • 6
  • 6
  • 6
  • +1
1 Solution
 
augblayCommented:
you create the header and navigation bars and then. use the include statement to include them .
example

header file=header.asp
footer file=footer.asp

then create a new asp page and do the following:


<!--#include file="header.asp"-->

....
a lot of html
....

<!--#include file="footer.asp"-->

0
 
strider031598Author Commented:
I tried your method, but it didn't work.  Do I need a CGI-Bin to do this or something?  Please take a look at this site:  http://geoshock.dhs.org/

Notice that when you click on one of the links in the left side, the same header, nav bar, and footer appear on the next page.  The only thing that changes is the middle part.
0
 
augblayCommented:
it should work, what is the error you are getting. take a look at
wwww.idev.com
and i used the same technology for that
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
rdivilbissCommented:
RE:  http://geoshock.dhs.org/

The whole page changes each time...it just has the same elements in the same place on each page.

0
 
strider031598Author Commented:
Yes, good observation.  Now, how do I get the same elements
in the same place on each page without having to write out the code on each page?
0
 
BrigidCommented:
Do you even have ASP (Active Server pages) installed and properly configured on your server?
If not, it will not work.
0
 
BrigidCommented:
Do you even have ASP (Active Server pages) installed and properly configured on your server?
If not, it will not work.
0
 
strider031598Author Commented:
No, I was hoping it would work both locally (on my hard drive) and on the server, without the need of ASP, CGI-Bin, etc.  Please take a look at the example site I gave earlier:  http://geoshock.dhs.org/.  How does that site do it?
0
 
BrigidCommented:
Do you even have ASP (Active Server pages) installed and properly configured on your server?
If not, it will not work.
0
 
BrigidCommented:
Okay, don't know WHY that was posted twice...

I looked at his site, but it's near to impossible to tell what he's using. It looks like plain straight html.
Which means, yes, he included that junk on every page, unless he used a CGI <!--#include file="header.html"-->
Which is possible.

With straight html, you can either copy and paste and put it on every page, or create frames for your site so you do not have to.
0
 
strider031598Author Commented:
It's not convenient to do it with straight HTML, because if you update something, you have to go back and fix it on every single page you had that code on.  And I don't like frames, which is I was hoping to learn it this way.
0
 
BrigidCommented:
Hey, just thought of something. Use the iframe tag (Supported IE 3.0 and up, don't know about netscape) to define a floating frame area with your file in it.:

<iframe src="header.html">
</iframe>

The ending tag is required. See if that works!
0
 
BrigidCommented:
Okay, so you don't like frames, but well.. that's the best I can do at moment.
And I didn't mean to propose an answer. Damn that stupid thing. I wish it'd default to comment.
0
 
rdivilbissCommented:
>>Yes, good observation.  Now, how do I get the same elements
in the same place on each page without having to write out the code on each page?

You could copy and paste <g>. or

You could put all the navigation on the page dynamically using script.  Then you can simply do a <script><src='myfile.js'></script> in the header of your page.

I have a page that way somewhere...if I can find the URL I'll post it and you can steal the code.
0
 
rdivilbissCommented:
Okay, how about this.

http://www.cssnetworks.com/test/Incstuff.htm

The header, left navigation and footer are written out by a javascript file, dynamically.  You include the same tag in the header of each page:
<head>
<script src="incstuff.js"></script>
</head>

On each page you add these tags:

<body -----whatever>
<script>dofirst();</script>
your body goes here
..
..

<script>dosecond();</script>
</body>

For this example, I'm assuming a table with width 600 pixels, with the header and footer covering the entire width and a left navigation area 100 pixels wide.  The body, therefore must fit within a table cell of 500 pixels.  Since all the table around the body is done with script, you can edit the body normally, including preview, etc.  (To keep your layout simple, I'd put the body inside a table 500 pixels wide as in the example page, but that is not necessary.

If a non-script browser encounters your page, they would still see the body normally (so you might want back-up text links in the body).

Cheers,
Rod
0
 
strider031598Author Commented:
rdivilbiss, your answer seems like what I'm looking for.  Could you please email me all of the source files of you used for the above example?  My address is jedijose@nettaxi.com

I need to see what the sources look like before the browser executes it.
0
 
rdivilbissCommented:
I'll paste it here for all:

--------- incstuff.htm --------
<html>

<head>
<meta name="author" content="CSS Networks http://www.cssnetworks.com">
<title>Included Stuff</title>
<script src="incstuff.js"><!--//--></script>
</head>

<body bgcolor="#FFFFFF">

<script>dofirst();</script>

<table border="1" width="500" bordercolor="#FF0000" cellpadding="2">
  <tr>
    <td width="100%">BODY OF MY PAGE<br>
      <img border="0" src="images/Incstu1.gif" width="300" height="200"></td>
  </tr>
</table>

<script>dosecond();</script>
</body>

</html>



----------- incstuff.js -----------

function dofirst()
{
document.write('<table border="1" width="600">');
document.write('<tr><td width="100%" colspan="2">HEADER</td>');
document.write('</tr><tr><td width="100">NAVLEFT<p>');
document.write('link<br>link<br>link<br></td><td width="500">');
}

function dosecond()
{
document.write('</td></tr><tr><td width="100%" colspan="2">FOOTER</td></tr></table>');
}


I do not know if you know javascript, but you do not need to for this to work.
All you have is

document.write('');

statements writing the HTML code for the common stuff. (Header, footer, table structure before and after the body, etc.)

If it was me, I would slightly change this.  By putting the header, footer and nav bar inside their own table.  Then I would use whatever editor I prefered to design them as separate pages.  When satisfied, you would simply cut and paste the HTML within document.write(''); statements inside your functions.  Anytime I needed to change the Header, I would reopen the header page (even though it is only used for design) make the changes, then cut and paste over the old code in the js file.

The only reason to put them in their own tables is simply to clearly define where they go inside the js file.

Rod
0
 
rdivilbissCommented:
The js file is simply a text file with the extension .js

All browsers since NS 2.?? and IE 3.0 should have no problem with this.  If you cut your table strcture as I did, the body can exist on its own in a browser that does not implement javascript.

BTW:  This may be a little more clear.

function dofirst()
{
Document.Write('<table border="0" width="600" cellspacing="0" cellpadding="0">');
Document.Write('  <tr>');
Document.Write('    <td width="100%" colspan="2">');
Document.Write('      //HEADER HERE');
Document.Write('    </td>');
Document.Write('  </tr>');
Document.Write('  <tr>');
Document.Write('    <td width="100">');
Document.Write('      //NAV BAR HERE');
Document.Write('    </td>');
Document.Write('    <td width="500"> // END OF DoFirst() PART');
}

      // BODY HERE

function dosecond()
{
Document.Write('    </td>  // BEGINING OF DoSecond() PART');
Document.Write('  </tr>');
Document.Write('  <tr>');
Document.Write('    <td width="100%" colspan="2">');
Document.Write('      // FOOTER HERE');
Document.Write('    </td>');
Document.Write('  </tr>');
Document.Write('</table>');
}

0
 
strider031598Author Commented:
Thanks!
0
 
rdivilbissCommented:
Thanks for the points...is there any other explanation reqired?

Cheers,
Rod
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 6
  • 6
  • 6
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now