Solved

Including Text Files directly into HTML Documents

Posted on 2003-11-14
15
1,211 Views
Last Modified: 2013-11-18
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
Comment
Question by:The_King
  • 5
  • 5
  • 3
  • +1
15 Comments
 
LVL 10

Expert Comment

by:Bustarooms
ID: 9749503
server side includes will do the trick...if your web server supports them
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 9749611
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
 
LVL 10

Expert Comment

by:Bustarooms
ID: 9749627
that's awesome cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9749799
You've returned! What caused the change of heart?
0
 
LVL 4

Author Comment

by:The_King
ID: 9750785
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9750836
What's in header.inc?
0
 
LVL 4

Author Comment

by:The_King
ID: 9751022
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 4

Author Comment

by:The_King
ID: 9751038
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9751052
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9751062
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
 
LVL 4

Author Comment

by:The_King
ID: 9751108
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9751165
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
 
LVL 4

Author Comment

by:The_King
ID: 9751203
WOW

nice thanks.

works perfect.

thanks again.

yipppeeeeee!!!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9751274
>>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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9751315
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how to create a tile layout 1 38
Centering a nested div 16 58
Bootstrap 3 website error 14 46
ASP.net VB.net Highlight html text in yellow in body of email 5 10
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

895 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

11 Experts available now in Live!

Get 1:1 Help Now