Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1233
  • Last Modified:

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
0
The_King
Asked:
The_King
  • 5
  • 5
  • 3
  • +1
1 Solution
 
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
 
BustaroomsCommented:
that's awesome cd&
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

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