Solved

How do I import the html code held in a different file into my current html file (the equivalent of a #include in C)?

Posted on 2006-11-03
12
194 Views
Last Modified: 2013-11-18
I have a menu defined in a html file called menu.html.
I want to read this menu into each html page of my web site.
Do you know the html command this i need in order to import the menu code?
What I am after is the equivalent of a #include in C

Thanks very much!
0
Comment
Question by:adr2205
  • 5
  • 3
  • 2
  • +1
12 Comments
 
LVL 15

Expert Comment

by:mattisflones
ID: 17870412
Your only opt is to use frames or Iframes.
You need server side technology to do a include.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17870524
adr2205,

Frames or iframes would change the look and not be the best option for a menu and similar code blocks.  Server side languages will support what you want to do.  Let us know which you can use.  You will need to change you html page to a server side page but that may not require big changes to the page.  Another option is to use SSI (server side includes).  This also needs server support but can be done with an html page just with a different extension.

The best option is the server language but check and see what your server supports.  Let us know and we can tell you how to do an include.

bol

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17870558
If ASP then an include line would look like ...

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

If PHP then ...

  include "includefile.php";

Those are just a couple of examples.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:adr2205
ID: 17870627
great thanks b0lsc0tt - I think SSI is the best way - how would I go about changing my html menu page to use the SSI? Thanks for your help
0
 
LVL 15

Expert Comment

by:mattisflones
ID: 17870665
You cant use SSI in html pages.
You need to use a server side technology like ASP or PHP.
What kind of webserver do you use?
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17870715
@Mattisflones -
> You cant use SSI in html pages.
Actually you can.  I probably should've provided a little more information though so thanks for giving me the chance.  Usually the server requires you to change the file extension to .shtml.  The page does not have any other server side script but can use an include line.  The include line is usually just like the one ASP uses.  The key, like you pointed out in your first comment, is what the server supports.

bol
0
 
LVL 15

Expert Comment

by:mattisflones
ID: 17870940
:-) Good clear-up..
I dont think of shtml as html, as you can see.. different extensions, different pagetypes.

0
 
LVL 1

Expert Comment

by:kurnia
ID: 17872167
If you don't want to work with PHP, ASP or any server side scripting, you can try AJAX.
Just create a function in javascript, that call on page load. In those function, let AjAX request your menu.html, than display it with simple asignment of .innerHTML.

Can you give us the menu.html?
0
 

Author Comment

by:adr2205
ID: 17872328
Here is my menu.html file as it is at the moment. It pulls in some javascript code from menu.js to control display of sub-menu options in nice drop down menu options. If I now create an index.html file, how would I import this code in so the menu displays on the index.html page? Obviously I dont want to copy and paste the menu onto every page of the site - a nice import command on each page would be great. Thanks for all of your help.

<html>
<head>
<link rel="stylesheet" rev="stylesheet" href="menu.css" />
<script type="text/javascript" language="Javascript" src="menu.js">
</script>
</head>
<body>
<div style="width: 89px">
<a href="menu0.html" class="menuLink">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;| </a>
<ul class="menu" id="menu0">
</ul>
</div>
<div style="width: 92px">
<a href="menu1.html" class="menuLink">Option 1&nbsp;&nbsp;| </a>
<ul class="menu" id="menu1">
      <li><a href="m1.html">MPage1</a></li>
      <li><a href="m2.html">MPage2</a></li>
</ul>
</div>
<div style="width: 81px">
<a href="menu2.html" class="menuLink">Option 2&nbsp;&nbsp;| </a>
<ul class="menu" id="menu2">
      <li><a href="v1.html">VPage1</a></li>
      <li><a href="v2.html">VPage2</a></li>
</ul>
</div>
<div style="width: 90px">
<a href="menu3.html" class="menuLink">Option 3&nbsp;&nbsp;| </a>
<ul class="menu" id="menu3">
      <li><a href="f1.html">FPage1</a></li>
      <li><a href="f2.html">FPage2</a></li>
</ul>
</div>
<div style="width: 55px">
<a href="menu4.html" class="menuLink">Option 4&nbsp;&nbsp;| </a>
<ul class="menu" id="menu4">
      <li><a href="e1.html">EPage1</a></li>
      <li><a href="e2.html">EPage2</a></li>
</ul>
</div>
<div style="width: 84px">
<a href="menu5.html" class="menuLink">Option 5&nbsp;&nbsp;| </a>
<ul class="menu" id="menu5">
      <li><a href="p1.html">PPage1</a></li>
      <li><a href="p2.html">PPage2</a></li>
</ul>
</div>
<div style="width: 77px">
<a href="menu6.html" class="menuLink">Option 6&nbsp;&nbsp;| </a>
<ul class="menu" id="menu6">
      <li><a href="h1.html">HPage1</a></li>
      <li><a href="h2.html">HPage2</a></li>
</ul>
</div>
<div style="width: 79px">
<a href="menu7.html" class="menuLink">Option 7&nbsp;&nbsp;| </a>
<ul class="menu" id="menu7">
      <li><a href="c1.html">CPage1</a></li>
      <li><a href="c2.html">CPage2</a></li>
</ul>
</div>
<div style="width: 62px">
<a href="menu8.html" class="menuLink">Option 8 </a>
<ul class="menu" id="menu8">
      <li><a href="g1.html">GPage1</a></li>
      <li><a href="g2.html">GPage2</a></li>
</ul>
</div>
</body>
</html>

The menu.js file has the following content:

window.onload = initAll;

function initAll() {
      var allLinks = document.getElementsByTagName("a");

      for (var i=0; i<allLinks.length; i++) {
            if (allLinks[i].className.indexOf("menuLink") > -1) {
                  allLinks[i].onclick = function() {return false;}
                  allLinks[i].onmouseover = toggleMenu;
            }
      }
}

function toggleMenu() {
      var startMenu = this.href.lastIndexOf("/")+1;
      var stopMenu = this.href.lastIndexOf(".");
      var thisMenuName = this.href.substring(startMenu, stopMenu);

      document.getElementById(thisMenuName).style.display = "block";

      this.parentNode.className = thisMenuName;
      this.parentNode.onmouseout = toggleDivOff;
      this.parentNode.onmouseover = toggleDivOn;
}

function toggleDivOn() {
      document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
      document.getElementById(this.className).style.display = "none";
}
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 65 total points
ID: 17874082
You would take just the common html code and put it in a separate include file.  Then you use the include statement to "add" the file to your html file.  In this basic example it looks like the code below is the common code (named includefile.asp in this example):

<div style="width: 89px">
<a href="menu0.html" class="menuLink">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;| </a>
<ul class="menu" id="menu0">
</ul>
</div>
<div style="width: 92px">
<a href="menu1.html" class="menuLink">Option 1&nbsp;&nbsp;| </a>
<ul class="menu" id="menu1">
     <li><a href="m1.html">MPage1</a></li>
     <li><a href="m2.html">MPage2</a></li>
</ul>
</div>
<div style="width: 81px">
<a href="menu2.html" class="menuLink">Option 2&nbsp;&nbsp;| </a>
<ul class="menu" id="menu2">
     <li><a href="v1.html">VPage1</a></li>
     <li><a href="v2.html">VPage2</a></li>
</ul>
</div>
<div style="width: 90px">
<a href="menu3.html" class="menuLink">Option 3&nbsp;&nbsp;| </a>
<ul class="menu" id="menu3">
     <li><a href="f1.html">FPage1</a></li>
     <li><a href="f2.html">FPage2</a></li>
</ul>
</div>
<div style="width: 55px">
<a href="menu4.html" class="menuLink">Option 4&nbsp;&nbsp;| </a>
<ul class="menu" id="menu4">
     <li><a href="e1.html">EPage1</a></li>
     <li><a href="e2.html">EPage2</a></li>
</ul>
</div>
<div style="width: 84px">
<a href="menu5.html" class="menuLink">Option 5&nbsp;&nbsp;| </a>
<ul class="menu" id="menu5">
     <li><a href="p1.html">PPage1</a></li>
     <li><a href="p2.html">PPage2</a></li>
</ul>
</div>
<div style="width: 77px">
<a href="menu6.html" class="menuLink">Option 6&nbsp;&nbsp;| </a>
<ul class="menu" id="menu6">
     <li><a href="h1.html">HPage1</a></li>
     <li><a href="h2.html">HPage2</a></li>
</ul>
</div>
<div style="width: 79px">
<a href="menu7.html" class="menuLink">Option 7&nbsp;&nbsp;| </a>
<ul class="menu" id="menu7">
     <li><a href="c1.html">CPage1</a></li>
     <li><a href="c2.html">CPage2</a></li>
</ul>
</div>
<div style="width: 62px">
<a href="menu8.html" class="menuLink">Option 8 </a>
<ul class="menu" id="menu8">
     <li><a href="g1.html">GPage1</a></li>
     <li><a href="g2.html">GPage2</a></li>
</ul>
</div>

You web page files would end up looking something like this ...

<html>
<head>
<link rel="stylesheet" rev="stylesheet" href="menu.css" />
<script type="text/javascript" language="Javascript" src="menu.js">
</script>
</head>
<body>

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

</body>
</html>

However in order for you to use this your server needs to support it.  There are a number of different ways it may support it but you need to find out what your options are.  Please read the questions we asked in our previous comments and answer them.  If your web server doesn't support server includes or a server language then you will not be able to do it.

bol
0
 
LVL 1

Assisted Solution

by:kurnia
kurnia earned 60 total points
ID: 17875182
OK, this is my suggestion:
1. MOdify your menu.html, remove "html", "head", "script", and "body" tags. So it will from
<div style="width: 89px"> until </div>

2. Modify your menu.js, remove this line
window.onload = initAll;

3. Create new javascript file, "getmenu.js"
// deklarasi variabel global
  var http = createRequestObject(); // untuk manampung http request .. langsung dibuat
  var objRefresh = 0;
  var isBusy = false;
  var x=0;

  // fungsi ini digunakan untuk membentuk objek http request, terlebih dulu memeriksa
  // jenis browser, karena tiap browser (khususnya IE) punya cara tersendiri
  function createRequestObject()
  {
    var ro;
    var browser = navigator.appName;

    if(browser == "Microsoft Internet Explorer")
    {
      try {
        ro = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (othermicrosoft) {
        try {
        ro = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (failed) {
        ro = false;
        }
      }
    }
    else
    // on every other browser, we can directly create a new XMLHttpRequest object
    {
      try {
        ro = new XMLHttpRequest();
      }
      catch (failed) {
        ro = false;
      }
    }
    if (!ro)
      alert("Error initializing XMLHttpRequest!");
    else return ro;
  } // createRequestObject

  // fungsi menampilkan data yang diterima dari request ke server
  function showData(){
    if(http.readyState == 4) {
      var response = http.responseText;
      if (response.charAt(0)==0)
      {
        // jika nilainya kosong, kadang ada karakter NULL
        response = http.responseText.substring(2);
      }

      // tampilkan data
      var info = document.getElementById("dMenu");
      info.innerHTML = response;
      initAll();
    }
  }

  var currObj = "";

  // fungsi untuk melakukan pemanggilan data
  function getData() {
    /* ini dipakai jika proses akan dilakukan secara periodik
    //if (objRefresh) clearTimeout(objRefresh); // ini
    //objRefresh = setTimeout("getData()", 900000);
    */
    if (!isBusy)
    {
      isBusy = true;

      http.open("get", "menu.html",true);
      http.onreadystatechange = showData; // memanggil fungsi yang akan menampilkan data (INGAT: jangan pakai parameter, bisa error :( )
      http.send(null);
      isBusy = false;

    }

  } //getData

4. In your page:
  a. add include to "getmenu.js" and "menu.js"
  b. make an element (div, span etc) where the menu need to be placed, give id="dMenu". eg. "<div id='dMenu'></div>"
  c. call getData() function on page load <body onload="getData()">

getData() function will get menu.html, replace <div id="dMenu"> content with content of menu.html, then call initAll() function.

Here sample page:
<html>
<head>
<link rel="stylesheet" rev="stylesheet" href="menu.css" />
<script language="Javascript" src="menu.js"></script>
<script language="Javascript" src="getmenu.js"></script>
</head>
<body onload="getData()">
 Menu list will shown below:
 <br>
 <div id="dMenu"></div>
</body>
</html>
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17882244
I'm glad that I could be one of those that helped you.  Thank you for the grade, the points and the fun question.

bol
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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