asked on

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

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!

mattisflones

Your only opt is to use frames or Iframes.
You need server side technology to do a include.

b0lsc0tt

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

b0lsc0tt

If ASP then an include line would look like ...



If PHP then ...

include "includefile.php";

Those are just a couple of examples.

adr2205

ASKER

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

mattisflones

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?

b0lsc0tt

@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

mattisflones

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

kurnia

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?

adr2205

ASKER

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">         Home  | </a>
<ul class="menu" id="menu0">
</ul>
</div>
<div style="width: 92px">
<a href="menu1.html" class="menuLink">Option 1  | </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  | </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  | </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  | </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  | </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  | </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  | </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";
}

ASKER CERTIFIED SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

kurnia

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

b0lsc0tt

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