Including Text Files directly into HTML Documents

Is there an efficient way to include HTML code which repeats throughout my website and hold the code in a text file. I have seen a way by linking javascript files. However the HTML Code is so large this method makes things less maintainable as the HTML need to much modification to be a javascript string.

Any suggestions would be greatly appreciated

Thanks in advance
LVL 4
The_KingAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BustaroomsCommented:
server side includes will do the trick...if your web server supports them
0
COBOLdinosaurCommented:
If your server does not support includes you can use this script to bring external include files into a layer in the page, or insert the text inline:

<script language='JavaScript'>
<!--
function include(lyr,url)
{
   if (document.all)
   {
      // IE version
      var xml = new ActiveXObject("Microsoft.XMLHTTP");
      // older versions (IE4 and some IE5.0) might be using MSXML2.XMLHTTP.4.0
      xml.Open( "GET", url, false );
      xml.Send()
      document.getElementById(lyr).innerHTML=xml.responseText;
   }
   else
   {
      // Mozilla/Netscrap 6+ version
            var xml=new XMLHttpRequest();
            xml.open("GET",url,false);
            xml.send(null);
            document.getElementById(lyr).innerHTML=xml.responseText;
   }
}
//-->
</script>
You can trigger the script off the load:
<body onLoad="include('somediv','http://somepath/somefile.html'">
where somediv looks like: <div id="somediv">&nbsp;</div>

Or dynamically from a link:
<a href="#" onClick="include('somediv','http://somepath/somefile.html');return false">
   load alternate page
</a>

or inline as a conventional include:

<script language='JavaScript'>
   document.write('<div id="somediv">&nbsp;</div>');
   include('somediv','http://somepath/somefile.html');
</script>

If the string returned from the call contains valid HTML it will be rendered, otherwise it will display as plain text.

Does not work for older browser like Netscrap 4.x that do not know what XML is.

It can produce an alert if the user security settings have activeX disabled

Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BustaroomsCommented:
that's awesome cd&
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

seanpowellCommented:
You've returned! What caused the change of heart?
0
The_KingAuthor Commented:
COBOLdinosaur that code is very nice and works nearly exactly as i need. However After including my first include file everything on the page gets pushed about 3/4 of a page down. However this doesn't happen after i include my footer file. Have you any ideas how to fix this.


My HTML is like this (if you need to see anything else just say and ill post it)


html>
<head>
      <meta http-equiv="Content-Type" content="text/html">
      <LINK REL="stylesheet" Type="text/css" href="stylesheets\excss.css">
      <script language="javascript" src="inc.js"></script>
</head>

<body>

      <Div id="Header">&nbsp</Div>

<script>
      include("Header","Header.inc");
</script>

      <H2>Bibliography</H2>
      <p class="links"><a href="http://www.wired.com/news/digiwood/0,1412,60222,00.html">http://www.wired.com/news/digiwood/0,1412,60222,00.html</a></p>
      <p class="links"><a href="http://arstechnica.com/archive/news/1065153546.html">http://arstechnica.com/archive/news/1065153546.html</a></p>
      <p class="links"><a href="http://www.theregister.co.uk/content/6/33166.html">http://www.theregister.co.uk/content/6/33166.html</a></p>
      <p class="links"><a href="http://www.ananova.com/news/story/sm_824916.html">http://www.ananova.com/news/story/sm_824916.html</a></p>
      <p class="links"><a href="http://news.bbc.co.uk/1/hi/magazine/3117505.stm">http://news.bbc.co.uk/1/hi/magazine/3117505.stm</a></p>
      <p class="links"><a href="http://www.bbc.co.uk/dna/h2g2/A157178">http://www.bbc.co.uk/dna/h2g2/A157178</a></p>
      <p class="links"><a href="http://www.noolearning.ac.uk/burks/foldoc/24/76.htm">http://www.noolearning.ac.uk/burks/foldoc/24/76.htm</a></p>
      <p class="links"><a href="http://scitsc.wlv.ac.uk/~c9818573/MM/web%20page/main.html">http://scitsc.wlv.ac.uk/~c9818573/MM/web%20page/main.html</a></p>
      <p class="links"><a href="http://www.espico.co.uk/mpeg2d1.htm">http://http://www.espico.co.uk/mpeg2d1.htm</a></p>
      <p class="links"><a href="http://http://www.mp3-mac.com/Pages/Books1.html">http://http://www.mp3-mac.com/Pages/Books1.html</a></p>
      <p class="links"><a href="http://www.erg.abdn.ac.uk/ip-dvb/archive/msg00118.html">http://http://www.erg.abdn.ac.uk/ip-dvb/archive/msg00118.html</a></p>

      <Div id="Footer">&nbsp</Div>

<script>
      include("Footer","footer.inc");
</script>      
</body>
</html>




Thanks in advance
0
seanpowellCommented:
What's in header.inc?
0
The_KingAuthor Commented:
HEADER.INC


      <a name="top"></a>
      <table width=100% height=100% border=2>
      <tr height=5%>
            <td colspan="3">
                  <H1>Multimedia And The Internet!</H1>
            </td>
      </tr>
      <tr height="10%" >
            <td width="15%">
            <img align="right" src="images\fire.gif" />
            </td>
            <td width="70%">
                  <applet code="tinyHScroll.class" width="100%" height="30">
                        <param name="BGRED" value="168" />
                        <param name="BGGREEN" value="255" />
                        <param name="BGBLUE" value="255" />
                        <param name="FGRED" value="34" />
                        <param name="FGGREEN" value="34" />
                        <param name="FGBLUE" value="255" />
                        <param name="BACKGROUND" value="" />
                        <param name="DELAY" value="10" />
                        <param name="FONTNAME" value="Tahoma" />
                        <param name="FONTSIZE" value="20" />
                        <param name="YPOS" value="25" />
                        <param name="DIRECTION" value="0" />
                        <param name="MESSAGE" value="Jim Is Buzzing!" />
                  </applet>
            </td>
            <td width="15%">
            <img align="left" src="images\fire.gif" />
            </td>
      </tr>
      <tr>
            <td colspan=3>
                  <center>
                        <applet code="tinyHScroll.class" width="70%" height="30">
                              <param name="BGRED" value="34" />
                              <param name="BGGREEN" value="34" />
                              <param name="BGBLUE" value="255" />
                              <param name="FGRED" value="168" />
                              <param name="FGGREEN" value="255" />
                              <param name="FGBLUE" value="255" />
                              <param name="BACKGROUND" value="" />
                              <param name="DELAY" value="10" />
                              <param name="FONTNAME" value="Tahoma" />
                              <param name="FONTSIZE" value="20" />
                              <param name="YPOS" value="25" />
                              <param name="DIRECTION" value="1" />
                              <param name="MESSAGE" value="THE MENU SYSTEM WILL BE HERE!" />
                        </applet>                  
                  </center>
            </td>
      </tr>
      <tr height="80%">
            <td width="15%">
            </td>
            <td width="70%" valign="top">






FOOTER.INC





            </td>
            <td width="15%">
            </td>
      </tr>      
      <tr height="5%">
            <td colspan="3">
                  <br />
                  <center>
                  <a href="#top" >Back To Top</a>
                  </center>
            </td>
      </tr>
      </table>
0
The_KingAuthor Commented:
I think the problem is that the table opens inside the Div tag and the /Div is before the close of the table.

Have you any idea how i can achieve a way around this?

thanks
0
seanpowellCommented:
Your original table is set to a height of 100% and the last row is set to 80%. Those will cause you problems depending on what height you're asking the table to be 100% of...

If you remove them, and try and specify heights according to the content, you should be okay...
0
seanpowellCommented:
In your example:
<Div id="Header">&nbsp</Div>
<script>
     include("Header","Header.inc");
</script>

the div is being closed "before" the include, so you should be okay with that.
0
The_KingAuthor Commented:
The table is ok when the code isnt being loaded.

when i turn on the table borders the code after the include in the html is underneath the table.

I think the code is pasted inside the div tags with the html?

and as it opens a table and row and column which it doesnt close. makes the div tag close out of order.
0
COBOLdinosaurCommented:
Because you are working inside a table structure, any include whether it is client side like this or server side it going to impact the rendering of the table.  Height as a percentage is no valid HTML, though most browsers will try to figure how to size the element, but anytime there is dynamic content you will get some unpredictable results with height 100%.  I have found it is generally bes to let the browser optimize height itself, or where I really need to control it I give it a fixed value in pixels that the browser can override if it has to.

George,

No change of heart; just covering the 3000 for the month.

Cd&
0
The_KingAuthor Commented:
WOW

nice thanks.

works perfect.

thanks again.

yipppeeeeee!!!
0
seanpowellCommented:
>>No change of heart; just covering the 3000 for the month.
Darn - I miss your input... would be nice to have you around again.
0
COBOLdinosaurCommented:
Glad we could help.  Thanks for the A. :^)

George,

I post just as much as ever; just doing most of it on small sites where it has not been turned into a game.

Cd&

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.