PDA

View Full Version : DD SmoothMenu, including UL separately via file-relative path



contentgrrl
08-26-2010, 05:44 PM
1) Script Title: DD SmoothMenu

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

3) Describe problem:

I LOVE :D the SmoothMenu script, and I love the ability to include the actual UL from a separate HTML file. I'm currently implementing this with my Dreamweaver templates on www.ddms.com.

:( However, I feel like I'm wasting a lot of time (weeks) touching individual files just to add "../" to the init script where you require a file-relative path.

There's got to be a better, DOM-friendly way to do this. :confused:

If the path absolutely must be relative to the file in question, I worked with the DivaHTML.com (http://DivaHTML.com) people for their DivaFAQ product. E. Michael Brandt was very helpful in this regard. He agreed, and found a way to automate this local path with his Dreamweaver Extension. It looks like his extension writes a file-relative path into the head when I apply the extension.

Questions:

Couldn't a Javascript dynamically write this path as needed to display the menu?
Is it possible to make this path relative to the site root instead, just as the link rel src for CSS and JS are root-relative paths?


Thank you for this script, and thank you in advance for your excellent advice!
:)

ddadmin
08-26-2010, 07:06 PM
It is possible to use an absolute path when specifying where the external HTML file of your menu is located in (on your server). The trick is to dynamically construct the hostname portion of the URL so it reflects the hostname of the current page, for example:


ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax",
//customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: ["smoothcontainer", "http://"+window.location.hostname+"/somedir/smoothmenu.htm"] //"markup" or ["container_id", "path_to_menu_file"]
})

This works because Ajax treats "http://dynamicdrive.com" and "http://www.dynamicdrive.com" as separate domains. If you hardcode the hostname within the URL and the user is viewing your page using the alternate alias, an Ajax security error pops up. By dynamically constructing the hostname portion based on the URL of the current page, this problem is bypassed.

contentgrrl
08-30-2010, 06:24 PM
That window.location.hostname solution worked wonders! :D

Happy to add that the script changes tested beautifully in IE8.0.6001, FF3.6.8, Opera 10.61, Safari 5.0.1, and Chrome 5.0.375

I haven't implemented it yet on all my pages, but I'm extremely happy with the results on the sample pages on www.ddms.com. (I'm so happy, I'm twittering about it: http://twitter.com/contentgrrl/favorites)

:cool: For the benefit of other Dreamweaver CS4 users, I did find a quick and easy way to Find and Replace by Folder. As a result, it no longer takes weeks to touch each file to adjust that file-relative link.

(Your location in the Find field below may vary.)

Back up files.
In Dreamweaver, open a site where you are using Smooth Menu.
Ctrl+F to open Find and Replace dialog box.
Click Find In: Folder...
Click the browse icon.
Click Search: Source Code
In the Find field, paste "../inc/ddmsmenu.htm"
In the Replace field, paste "http://"+window.location.hostname+"/inc/ddmsmenu.htm"
Repeat, editing the Find string to include more "../" or none, as needed.

Again, thank you so much Administrator!