Smooth Navigation Menu via Ajax

[lirium]

1) Script Title: Smooth Navigation Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem: I have a site with 214 pages which currently uses the smooth navigation menu embedded into each page. Therefore any changes to the meu must be replicated 213 times!
i've been trying to get the menu to be fetched from an external file using ajax. but no matter what i've tried with following the instructions and other ideas nothing works. the menu fails to appear.
The menu has been put into a .html file called "smoothmenu1.html" with the ajax reference as
<div id="smoothmenu1-ajax" class="ddsmoothmenu">
within the head of the page where the menu should be placed is the init :-


ddsmoothmenu.init({
mainmenuid: "smoothmenu1-ajax", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: ["smoothcontainer","smoothmenu1.html]
})


where the menu should appear in the page the following is :-


<div id="smoothcontainer">
<noscript>
<a href="link to site map for search engines and user with JS disabled">Site map</a>
</noscript>
</div>

the webpage url is http://www.beeslack.info/index_importmenu.html
any suggestions?

[ddadmin]

A couple of things you should do. Firstly, I'm not sure if this is intentional on your part while you're debugging the issue, but you currently have the references to the external file portions of the menu commented out inside the HEAD section of your page:


<!--
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
-->
</script>

You'll want to remove the code in red above.

Secondly, the initialization portion of your menu contains a syntax error, namely, the lack of a closing quote in the portion indicated in red below:


<script type="text/javascript">

ddsmoothmenu.init({
mainmenuid: "smoothmenu1-ajax", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: ["smoothcontainer","smoothmenu1.html"]
})

</script>


Moving beyond that though, you'll want to change the path to "smoothmenu1.html" above so it's an absolute URL to the file on your server; this is to more easily facilitate including the menu on various pages on your site, some of which may be in a different directory than the next (hence the path to "smoothmenu1.html" changes in that case). So instead of the above initialization code, try using the below instead:


ddsmoothmenu.init({
mainmenuid: "smoothmenu1-ajax", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: ["smoothcontainer", "http://"+window.location.hostname+"smoothmenu1.html"]
})

This causes the initialization code to correctly reference smoothmenu1.html regardless of where the invocation page is located in inside your site folder structure. The code:


"http://"+window.location.hostname+"smoothmenu1.html"

assumes "smoothmenu1.html" is located in the top level HTML folder of your site, which it currently is.

[lirium]

thanks for that. a missing " -!!!!!!:o