Solved

Including Text Files directly into HTML Documents

Posted on 2003-11-14
15
1,222 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
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
 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

623 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