Ok. I'm not great with DHTML to begin with but I tried to implement a popup style solution (much like how items are embedded so their info pops up in a frame when you mouseover the link) for some of the menu content in advance layout.

Anyone successfully done something like this and can provide some code or pointers?

I figured out something that should work nicely. Going to see if I can customize it a little more to get the menu title background to change along with it the expansion/contraction.

Please Share

Yea. I want to get the image switch working, then I'll post the code.

Here's the demonstration: wow.nerfed.us

In order to hide document elements easily you have to be able to reference them by ID. That way you can code an element onclick event to call some function which performs the hide/unhide of another element as long as you define in the onclick what the ID of the element to hide/show is.

Fortunately even though the menu file is actually a generic code block which gets populated during interpretation we can use the <!-- Menu:Title --> command to give each of our menu elements a unique ID.

To make this work you'll need two menu header background graphics, one for the hidden state of the menu below the header and one for the shown state of the content below the header. If you want to just have a static image then just set the URLs for both graphics to the same file, or hack up the code.

Then, decide which menu elements you want shown or hidden and edit the entries under the hideSetup function which gets called in the body onload. The syntax is show_hide('menu name','Hdr_menu name'). The menu name is just the display name that normally shows in the rendered menu header when you look at your page (note that this automatically precludes pre-closing the Logged In: Soandso and the x Members Currently Online menus).

Code for layout file:



Code for menu file:



Code for css:

That's pretty hot!!

Is there a way to save the settings? With cookies or something?

Yea working on that next.

I haven't been able to get around to this yet. Probably won't until next week.

Good news is the site is basically done. It needs someone to tweak the logo (some gif artifacts are showing up) but otherwise the layout, colors, functionality is all there. Woo!

Found this online. Works great:

For the Set Cookie function name and value are mandatory, the rest are optional. I don't use any of them

function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ";", len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}

function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24 * 60;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+"="+escape( value ) +
( ( expires ) ? ";expires="+expires_date.toGMTString() : "" ) + //expires.toGMTString()
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}

When I set a menu to show or hide, I save a cookie with it's ID and it's state, open or close. setCookie(myMenu, true or false)

I then created a function that reads all the possible cookie values in when the page is loaded and processes them. I hard coded all the value for the possible menus, but I will go back sometime and find a way to iterate through all the cookie vales and clean up the code. Pseudo code follows:

If objID==null then call function to open menu (A cookie hasn't been set for this value before)
If objID=='true' then call function to open menu
else
call menu function to close menu

Note the quotes around true, the save cookie function saves a string, not a boolean. (much hair pulling on that one!)

Quick easy and flawless.

Now the only problem I have is that FF renders the page, and then processes the cookie. So what happens is the page is shown all menus open, and then it closes the ones that need to be closed. I would love to find a way for it to do all that menu processing and then display the page as it is meant to be seen. Any ideas?

Woot!

I'll have to put that in.

Thanks!

I must add to this. It seems that if you do not pass it a value for expires, it only stores it as a session value that will not be active the next time that you come to the page.

There is an extension for Firefox that shows you the cookies that are set for a page. It is available at: http://www.bitstorm.org/extensions/view-cookies/

It puts a tab on the document info window, that shows you all the cookies, when they expire, etc