Quick question about creating external .js files (I hope)

[dvana]

I'm using the jscookmenu for a commercial web site that I maintain, and I would dearly love to clean the code up a bit. The problem is that when I want to change something in the menu structure, I have to change EVERY page on the site. This isn't so bad with find and replace, but it means re-upping every page on the site. I've tried iframes, but the drop-down menus fall out of sight. I poked around on the internet, and when that didn't yeild a good answer, I stared at the code for a while.

It was at that point that I noticed the actual definitions for the menu were in a script themselves. So here's the question: is it possible to shunt this script to an external .js file and call it? If so, how would I do this?

Keep in mind as you answer that my skill in HTML amounts to looking at other people's code and adapting it, so please use small, small words.

Thanks in advance for your help, even if it amounts to "What are you thinking?" : )

I'm including just the bit of code in question; if you need more, please let me know.


<script language="JavaScript" type="text/javascript"><!--
var myMenu =
[
['<img src="images/navbar/barbase_01.gif"/>','','portraits.htm','_self',null,
[null,'Portraits','portraits.htm','_self',null],
[null,'Children','port_children.html','_self',null],
[null,'Locations','port_locations.html','_self',null],
[null,'Clothing Choices','port_whatwear.html','_self',null]
],
['<img src="images/navbar/barbase_02.gif"/>','','grad_gate.html','_self',null,
[null,'Senior Photography','grad_gate.html','_self',null],
[null,'Announcements','grad_annonc.html','_self',null],
[null,'FAQ','grad_faq.htm','_self',null],
[null,'Session Choices','grad_sessions.htm','_self',null],
[null,'Special Senior Offers','grad_cata.html','_self',null]
],
['<img src="images/navbar/barbase_03.gif"/>','','fashion.htm','_self',null,
[null,'Head and Shoulders Glamor','glamN.htm','_self',null],
[null,'Glamour Boudoir','glamBN.htm','_self',null],
[null,'Fantasy Boudoir','glamfantasy.htm','_self',null],
[null,'Frequently Asked Questions','glaminfo.htm','_self',null],
[null,'Testimonials','glam_testa.html','_self',null]
],
['<img src="images/navbar/barbase_04.gif"/>','','weddings.htm','_self',null,
[null,'Sample Weddings','wed-1.html','_self',null],
[null,'Wedding Photography Guide','wed_faq.htm','_self',null],
[null,'Digital Albums','wed-album.html','_self',null],
[null,'Engagement Sessions','portraits.htm','_self',null],
[null,'Unique Wedding Ideas','wed-favors.html','_self',null]
],
['<img src="images/navbar/barbase_05.gif"/>','','event.html','_self',null],
['<img src="images/navbar/barbase_06.gif"/>','','#','_self',null,
[null,'Commercial Photography','commercial.html','_self',null],
[null,'Restoration','restos.htm','_self',null]
],
['<img src="images/navbar/barbase_07.gif"/>','','aboutus2.html','_self',null,
[null,'Contact Us','contact.htm','_self',null],
[null,'The Photographer','aboutus2.html','_self',null],
[null,'PPA Certification','ppa_new.html','_self',null],
[null,'Digital Photography','aboutdigital.html','_self',null],
[null,'The Studio','aboutstudio.html','_self',null],
[null,'Our Location','aboutlocation.html','_self',null]
],
['<img src="images/navbar/barbase_08.gif"/>','','Specials.html','_self',null],
];

cmDraw ('myMenuID', myMenu, 'hbr', cmThemePanel, 'ThemePanel');
--></script>

A link to a sample of this particular menu in action can be found here:
http://www.mysticimages.net/mysticnav-test.html

Thanks!

[Bob90]

What editor do you use to write/edit HTML files? (Notepad, notepad++, dreamweaver, aptana etc)

Open the editor and create a new javascript page. If you use notepad save the file as filename.js (Notice the extension is .js)

Copy your javascript into the file, but do not include the HTML flags (The '<', '>' and the bits inbetween are called flags).

Save the file.

Now in you HTML file use the following to link to your javascript (remember to remove the old javascript from the page.

<script type="text/javascript" src="filename.js"></script>

In the above example, if both of the files are in the same folder, the page should load like normal.

All you have to do now is replace the javascript in all your pages with the HTML. Then you can just edit that one javascript file.

[dvana]

Beautiful. Thank you so much!

I use dreamweaver, in cause you're still curious, but I usually edit in the HTML rather than the preview. Figure that's the only way to learn.

Thank you again for your help... this'll make it much easier to leave the site in someone else's hands.