PDA

View Full Version : Use external .js to write html



klaw
10-05-2014, 12:12 AM
I'd like to use this menu here (http://www.javascriptkit.com/script/script2/verticalmenu.shtml), 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. :o
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:

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

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

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

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


<script src="http://code.jquery.com/jquery-1.10.2.js"></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
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:

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

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

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

<!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 :)

klaw
10-12-2014, 05:59 PM
I would have like to have said thank you properly for your help in this, but I think my status as a n00b on here prevents me from PM'ing you direct. I would have preferred to contact you privately but I dont appear to be able to so I hope the mods dont mind me posting here.

@ molendijk - I've emailed a link that I found on one of the sites in your signature, which Im hoping is you. If you confirm that Ive got the correct person, I'd like to buy you 'a beer' as a small token in appreciation of your help.

Thanks again - youve saved me much head scratching.

molendijk
10-12-2014, 06:28 PM
Hi Kittz,
I received your e-mail. I appreciate it very much. Thanks - Arie.

klaw
10-12-2014, 06:48 PM
Cheers Arie.