Use external .js to write html

**klaw** · 10-05-2014, 12:12 AM

I'd like to use this menu here, but rather than keep adding the same html in each page I want to to go in an external .js file so that I can change the menu without having to change each page individually.

Whats the best way to do this - sorry I know little javascript and got myself tied in knots.

Ive managed to easily do this in php - but some of the pages are static and need .htm extension so its got to be .js for the whole lot.

TIA for any help

**molendijk** · 10-05-2014, 06:00 PM

You can use a html-file and jquery to load the menu on every page.
Put this in the head of your pages:

Code:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

After that, put the following line immediately after the opening body tag of your pages (you may want to style the div):

Code:

<div id="menu"></div>

Then give the html-menu a name, for instance menu.html, and put the following lines immediately before the closing body tag of your pages:

Code:

<script>
$('#menu').load('menu.html')
</script>

**klaw** · 10-05-2014, 10:12 PM

Thanks molendijk for your reply.

Unfortunately I don't seem to be able to get this to work. It doesn't appear to execute the javascript function correctly and doesn't show the sub menus.

Ive tried playing with it to no avail.

Ive created a jsfiddle so you can easily see the source.
The basic script is here : http://jsfiddle.net/klaw/mmauk9rr/

Ive then done a fork to try add in the jquery which is here http://jsfiddle.net/klaw/mj9kac37/2/
I do realise that it isnt going to work properly in jsfiddle anyhow because of the same origin policy for the remote .txt file, but thought it may at least show if I've done something stupid or glaringly obvious.

TIA

**molendijk** · 10-06-2014, 12:10 AM

You shouldn't load nav.txt but nav.html.
And you should have <script src="http://code.jquery.com/jquery-1.10.2.js"></script> in the head.

**klaw** · 10-06-2014, 01:19 AM

Thanks for getting back

You shouldn't load nav.txt but nav.html.

I tried nav.html first but that didnt work either. I used .txt only after reading something elsewhere about it, so thought Id give that a shot.

I also tried adding a semi colin and double quotes to see if that made any difference but nope

Code:

<script>
$("#nav").load("nav.html");
</script>

I do on my own files. With jsfiddler, if you select from the LH side and it will automatically insert it for you into their header.

The only other thing I could think was could the native .js be attempting to write before the jquery statement has excuted?

**molendijk** · 10-06-2014, 02:35 AM

Well, I don't know right now what is happening here. Unfortunately I'll be disconnected for the next couple of days (until October 13th). I'll come back to you as soon as I'm connected again (if the problem still persists).

**kimcuongden1712** · 10-06-2014, 08:14 AM

How do fix toggle in jQuery v1.11? please hep mee

**kimcuongden1712** · 10-06-2014, 08:16 AM

Originally Posted by molendijk

Then give the html-menu a name, for instance menu.html, and put the following lines immediately before the closing body tag of your pages:

Code:

<script>
$('#menu').load('menu.html')
</script>

.load(): enable in jQuery v 1.11?

**molendijk** · 10-11-2014, 04:58 PM

Hello Klaw,
I promised you to re-examine the matter as soon as I would be connected again, so here I am.

In menu.html, put:

Code:

<!doctype html>
<html >
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Navigation</title>

<script>
var menuids = new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset = -2 //Offset of submenus from main menu. Default is -2 pixels.

    function createcssmenu() {
        for (var i = 0; i < menuids.length; i++) {
            var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
            for (var t = 0; t < ultags.length; t++) {
                var spanref = document.createElement("span")
                spanref.className = "arrowdiv"
                spanref.innerHTML = "&nbsp;&nbsp;"
                ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
                ultags[t].parentNode.onmouseover = function () {
                    this.getElementsByTagName("ul")[0].style.left = this.parentNode.offsetWidth + submenuoffset + "px"
                    this.getElementsByTagName("ul")[0].style.display = "block"
                }
                ultags[t].parentNode.onmouseout = function () {
                    this.getElementsByTagName("ul")[0].style.display = "none"
                }
            }
        }
    }


if (window.addEventListener) window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent) window.attachEvent("onload", createcssmenu)
</script>

<style>
.glossymenu, .glossymenu li ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 185px;
    /*WIDTH OF MAIN MENU ITEMS*/
    border: 1px solid black;
}
.glossymenu li {
    position: relative;
}
.glossymenu li a {
    background: white url(http://www.kitz.me.uk/test/images/glossyback.gif) repeat-x bottom left;
    font: bold 12px Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 5px 0;
    padding-left: 10px;
    text-decoration: none;
}
.glossymenu li ul {
    /*SUB MENU STYLE*/
    position: absolute;
    width: 190px;
    /*WIDTH OF SUB MENU ITEMS*/
    left: 0;
    top: 0;
    display: none;
}
.glossymenu li ul li {
    float: left;
}
.glossymenu li ul a {
    width: 180px;
    /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}
.glossymenu .arrowdiv {
    position: absolute;
    right: 2px;
    background: transparent url(http://www.kitz.me.uk/test/images/arrow.gif) no-repeat center right;
}
.glossymenu li a:visited, .glossymenu li a:active {
    color: white;
}
.glossymenu li a:hover {
    background-image: url(http://www.kitz.me.uk/test/images/glossyback2.gif);
}
/* Holly Hack for IE \*/
 * html .glossymenu li {
    float: left;
    height: 1%;
}
* html .glossymenu li a {
    height: 1%;
}
/* End */
</style>

</head>


<body>
<ul id="verticalmenu" class="glossymenu">
  <li><a href="page1.html">Page 1</a></li>
  <li><a href="page2.html">Page 2</a></li>
  <li><a href="#">KLAW PAGES</a>
    <ul>
      <li><a href="page1.html">Page 1</a></li>
      <li><a href="page2.html">Page 2</a></li>
    </ul>
  </li>
</ul>

</body>

</html>

In the other pages (I will call them page1.html and page2.html here) put:
page1.html:

Code:

<!doctype html>
<html >
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Navigation</title>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 

</head>

<body>
<div id="nav" style="position: absolute; top: 30%"></div>
This is page 1

<script>
$('#nav').load('menu.html')
</script>
</body>

</html>

page2.html:

Code:

<!doctype html>
<html >
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Navigation</title>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 

</head>

<body>
<div id="nav" style="position: absolute; top: 30%"></div>
<span style="color: red">This is page 2</span>

<script>
$('#nav').load('menu.html')
</script>
</body>

</html>

etc.

**klaw** · 10-12-2014, 05:15 PM

I promised you to re-examine the matter as soon as I would be connected again, so here I am.

Thank you so very much. :thumb:

I see now where I was going wrong by trying to add the javascript in the main page, rather than adding it into the same page as the where I was listing the menu items.
This works beautifully

Thread: Use external .js to write html

Thread Tools

Search Thread

Use external .js to write html

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to klaw For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

The Following 2 Users Say Thank You to molendijk For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

Similar Threads

load data from mysql and write html ?

Allowing Access to External Hard Drive but password protecting write and delete

External html-doc?

External HTML code

Does anyone know how to write a forum with only HTML?

Bookmarks

Bookmarks

Posting Permissions