Jump to content

Menu In External .js File?


nworst
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 5 weeks later...
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 ?
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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).
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...