Menu In External .js File?

[nworst]

I'm getting annoyed by the fact that, every time I make a new menu option, I have to update the menu on every page. So what I was trying, is an external menu in a javascript file. With my basic JavaScript knowledge it didn't work out as I planned.Let's say this would be my menu:

 <ul>  <li><a href="home.htm">Home</a></li><br />  <li><a href="page1.htm">Page 1</a></li><br />  <li><a href="page2.htm">Page 2</a></li><br />  <li><a href="page3.htm">Page 3</a></li><br />  <li><a href="page4.htm">Page 4</a></li><br />  <li><a href="page5.htm">Page 5</a></li><br />  <li><a href="page6.htm">Page 6</a></li><br />  <li><a href="page7.htm">Page 7</a></li><br /> </ul>

Is it possible to make an external javascript file which writes the text above down? And I'll link every page to the file like this: <script type="text/javascript" src="menu.js"> </script>.Or is this just laziness from my side?Thanks.

[Err]

Most people use a server-side language like PHP to do what you want. JS can be disabled and your menu won't appear at all.http://www.w3schools.com/PHP/php_includes.asp

[nworst]

Can that be done with ASP as well, as I prefer ASP above PHP.Thanks anyway

[Err]

http://www.w3schools.com/asp/asp_incfiles.asp

[nworst]

Thanks, I found this, but where should I put the ASP script then (which is red there)? Because when I do it exactly the same as there, it doesn't work.

[Ingolme]

You need a web host that is compatible with ASP. Browsers don't run ASP, the server does.People recommend PHP because web hosts with PHP are cheaper and easier to find.

[nworst]

Ok, but doesn't ASP work when you save it in the IIS folder and then just open it? Because it's only on my computer now, not on a web host.

[Ingolme]

Ok, but doesn't ASP work when you save it in the IIS folder and then just open it? Because it's only on my computer now, not on a web host.

If IIS is set up on your computer, don't forget to access it though the HTTP protocol. that means that you can't just give the direct access to the file in the browser, you have to type your local domain or IP, which should be http://127.0.0.1 or http://localhost

[nworst]

Yeah I localhost was in front of it.. but I think I'm gonna learn PHP.By the way, what's the use of XML? Most things you do with XML can be done with HTML in combination with JavaScript, don't they?

[Ingolme]

XML is just a format to store information, it doesn't "do" anything.A lot of different programming languages have XML support, so it's useful to send information from one application to another.But there are many other formats to store and send information, such as CSV or databases.

[LaLa]

Most people use a server-side language like PHP to do what you want. JS can be disabled and your menu won't appear at all.http://www.w3schools.com/PHP/php_includes.asp

Hi,I have a similar problem: I have a 200+ pp site, with the menu on each page. I need to shift that menu out to an external javascript file so changes are only made in one place rather than 200+ places. Also, I don't have the option of using server-side script. I must use client-side. Any ideas ?

[Synook]

No, it's server-side or JS.

[LaLa]

No, it's server-side or JS.

OK, JS. Any ideas ?

[justsomeguy]

Send out an ajax request to get the menu, and update a div or something on the page with the content from the menu. Check the pinned topics in the Javascript forum for some ajax examples, and there are more on the w3schools site.

[LaLa]

Send out an ajax request to get the menu, and update a div or something on the page with the content from the menu. Check the pinned topics in the Javascript forum for some ajax examples, and there are more on the w3schools site.

Did I mention NO SERVER ? Content is in html and javascript on a standalone, totally isolated desktop. It is displayed in a browser. Finished "website" will be distributed on CD.

[Ingolme]

Did I mention NO SERVER ? Content is in html and javascript on a standalone, totally isolated desktop. It is displayed in a browser. Finished "website" will be distributed on CD.

AJAX doesn't require a server. AJAX just makes a request to a specified URL (the URL could be a file your desktop).

[Synook]

You can get portable servers that are able to run off read-only devices.

[justsomeguy]

Did I mention NO SERVER ?

OK, let me rephrase my answer, and you can decide what you want to do. For including external content using Javascript, these are your two options:1. Use ajax2. Nothing

[dsonesuk]

not the best of solutions, doing it this wayNote: copy function and code ONLY to external js file, and supply link to to that file preferably in head tag, and add<script type="text/javascript">/*<![CDATA[*//*---->*/document.write(showmenu()); /*--*//*]]>*/</script> to where you require menu links to show;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function showmenu(){menucontent="\n<ul>\n";menucontent+="<li><a href=\"home.htm\">Home</a></li><br />\n";menucontent+="<li><a href=\"page1.htm\">Page 1</a></li><br />\n";menucontent+="<li><a href=\"page2.htm\">Page 2</a></li><br />\n";menucontent+="<li><a href=\"page3.htm\">Page 3</a></li><br />\n";menucontent+="<li><a href=\"page4.htm\">Page 4</a></li><br />\n";menucontent+="<li><a href=\"page5.htm\">Page 5</a></li><br />\n";menucontent+="<li><a href=\"page6.htm\">Page 6</a></li><br />\n";menucontent+="<li><a href=\"page7.htm\">Page 7</a></li><br />\n";menucontent+="</ul>\n";return menucontent;}/*--*//*]]>*/</script> </head><body><script type="text/javascript">/*<![CDATA[*//*---->*/document.write(showmenu()); /*--*//*]]>*/</script> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html>

[dsonesuk]

OR<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function showmenu(){menucontent="\n<ul>\n";menucontent+="<li><a href=\"home.htm\">Home</a></li><br />\n";menucontent+="<li><a href=\"page1.htm\">Page 1</a></li><br />\n";menucontent+="<li><a href=\"page2.htm\">Page 2</a></li><br />\n";menucontent+="<li><a href=\"page3.htm\">Page 3</a></li><br />\n";menucontent+="<li><a href=\"page4.htm\">Page 4</a></li><br />\n";menucontent+="<li><a href=\"page5.htm\">Page 5</a></li><br />\n";menucontent+="<li><a href=\"page6.htm\">Page 6</a></li><br />\n";menucontent+="<li><a href=\"page7.htm\">Page 7</a></li><br />\n";menucontent+="</ul>\n";document.getElementById("menu_container").innerHTML=menucontent;}window.onload=showmenu;/*--*//*]]>*/</script> </head><body><div id="menu_container"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html>

[heldplayer]

I had that problem to, only I worked with .hta but it looks like .htmli recomend that you make a new page and use iframes like this

<html><body><iframe height="100%" width="100%" src="index.html" /></body></html>

make a menu using <div> and <table> like this

<div id="menu" style ="visibility:hidden;position:absolute;top:20px;left:20px"><table><tr><td><a href="home.html">Home page</a></td></tr><tr><td><a href="page 1.html">Page 1</a></td></tr>...</table></div>

now for the script you can just write it in the iframe file and acces it in for example your homepage by parent.show(), the script looks something like this

function show(){document.getElementById('menu').style.visibility="visible";}function show(){document.getElementById('menu').style.visibility="hidden";}

now for the calling of the script just insert this in your page

<a href="java script:parent.show()">Show menu</a><a href="java script:parent.hide()">Hide menu</a>

just insert this everywhere and it wil work, you just need to change the table in the iframe document and it wil be aplied everywhere,now you can choose how to call the events