Nested Bullet Accordion - collapse all, auto-expand on re-enter site

[londoh]

1) Script Title:
Bullet List Accordion Menu with nested levels
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...enu-bullet.htm
3) Describe problem:
usage: menu is nested 3 or 4 levels for extensive directory categories
(site is joomla based, menu is for sobi directory addon)
site is still on local server only

overall ddaccordion scripts works very well
(and dd is a fantastic site / resource btw)

I got 2 problems:
1) need to collapse all when outside of relevant site section - and collapseall seems like it oughta do it - but I cant get to work, so any pointers how to do that please.
if it is collapseall - where to call? from body onload() or dd oninit()?
if oninit - must it be called from every level?

2) need to open menu to appropriate level / header when entering site via external link / bookmark / backbutton etc.
seems like expandone(class, index) oughta do it but I cant figure out how?

I wondered about using cat_id's to set ID for menu ul li a elements, then parse cat_id from url to access headerindex contentindex className values - is that relevant or neccessary - or plain wrong track?

have read thru forums and found similar probs but still cant figure out solution.

thanks again for resource, and any help anyone can offer.

l.

[ddadmin]

For 1), what do you mean by:

need to collapse all when outside of relevant site section

Are you asking how to collapse the accordion menu automatically when the mouse moves outside of the menu entirely? This thread may be what you need then.

For 2), the script supports one method of doing this, by passing a parameter to the target page's URL that tells the script which accordion and which sub content to expand (see Remote links that expand select headers on the target page). This is obviously quite limiting. A more robust way is probably to probe the document.referrer property to see which page or site the user is coming from, then call expandone() to expand a specific accordion. document.referrer by itself is unreliable though, and you may have to supplement that technique with something else. All this is probably beyond the scope of what we're able to help you with though here on the forums.

[londoh]

thanks very much for reply

For 1), what do you mean by:



Are you asking how to collapse the accordion menu automatically when the mouse moves outside of the menu entirely? This thread may be what you need then.

No. Sorry my questions were not clearer...
Not when the mouse moves from menu section - but when the user moves from site section.

The ddaccordion menu only applies (hopefully) to part of the site. One directory...
http://example.com/directory/index.php

so if browser moves out of that site section to...
http://example.com/index.php
ddaccordion needs to collapse
But, for browsing the directory section persiststate really needs to be on

So how to collapse all under those circumstances?
I have assumed it has to be based on URL

And this really applies to problem 2 which is when the user is coming into a category page which may be several levels deep for ddaccordion. With a URL something like:
http://example.com/directory/index.php?cat_id=1234

For 2), the script supports one method of doing this, by passing a parameter to the target page's URL that tells the script which accordion and which sub content to expand (see Remote links that expand select headers on the target page). This is obviously quite limiting. A more robust way is probably to probe the document.referrer property to see which page or site the user is coming from, then call expandone() to expand a specific accordion. document.referrer by itself is unreliable though, and you may have to supplement that technique with something else. All this is probably beyond the scope of what we're able to help you with though here on the forums.

the 2nd problem applies where the user has bookmarked a page like this:
http://example.com/directory/index.php?cat_id=1234

I agree with you that passing any more params around via page URL isnt a good option.

So when user hits that example page from a bookmark or external link ddaccordion stays collapsed. Obviously it has no knowledge of where it should be expanded to.

I've gone someway down the track of passing that state by using URL params from document.url rather than document.referrer
So by setting an ID for each menu element based on url param (cat_id) I can get html for ddacordion like this...:

<div class="arrowlistmenu">
<li><h3 id="menuheader756" class="menuheader0 expandable0">Menu Section 1</h3>
<ul id="contentindex756" class="contentindex0">
<li><h3 id="menuheader780" class="menuheader1 expandable1">Sub Section 1</h3>
<ul id="contentindex780" class="contentindex1">
<li><a href="#">Link 1</a></li>

I can then can parse the url (http://example.com/directory/cat_id=780) and use document.getElementById to get className values for the relevant menu part.

so I know that its menuheader2 expandable3 ( - or whatever)

But what I cant figure out is how (or maybe where) to pass that information to ddaccordion and get it to expand to correct place

ddaccordion.oninit looks like its the correct place - and I tried calling expandone(headerclass, selected) from there - but I cant get it to work.

I appreciate this might be too in depth for digging thru on the forum, but I think its almost there - so maybe just a few pointers as to where and how I might pass the info to ddaccordion. Or am I miles off?

maybe I set a test up on a public page and you can have a look.

thanks anyway

l.

[londoh]

OK I got part of it to work but still some probs...

this code goes in oninit at level 1...

  oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
	  //do nothing
  var re=new RegExp("catid=(\\d+)", "i") //regex to match catid=nnnnn integer
  if(!re.test(document.URL)){ //if no catid in url
	  ddaccordion.collapseall('expandable0'); //collapse menu level 0
  }else{ //catid exists in url so check expandedindices.length
	  if(expandedindices.length == 0){//NO headers are expanded so...
		  var urlparam=document.URL.match(/catid=(\d+)/i) //get catid from URL...
		  var catid = urlparam[1];
		  //set menu element id=prefix+catid in html 
		  //use this to access menu element and get at ddacc headerindex...
		  var headerindex = document.getElementById("mh"+catid).getAttribute("headerindex");
		  headerindex=headerindex.replace("h", ""); //drop the h prefix for index id	
		  //and use expandone to expand it...
		  ddaccordion.expandone('expandable0', headerindex);	
	  }
  }

It will collapseall if outside the relevant site section -
(I dont know what happens below level 0 - maybe all levels need collapsing - but it looks OK for now anyway!)

code will auto-expand the menu for requests from external links/bookmarks...
But only at first menu level. I cant get it to work at lower levels :-(

Anybody know how to do this please?


tnx

l.
please note:
js is not my strong point and this is only for testing.
if you can see its wrong or know a better way please let me know.

[londoh]

OK, so after a bit of reading up on jquery I found a solution that seems to work.

basically I set an ID attribute for the h3 and a elements based on the category id, and ID for the holding div.

then test if catid in url in ddaccordion.oninit, and used it to collapse menu, or locate element/parents to show.
jquery has some pretty neat stuff to do stacks of things in one line of code - wow! but I dont know * about js - so if anybody can see a better way of doing this, or its just plain wrong - pls shout out.
anyway it seems to work so far.

l.

	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	var re=new RegExp("catid=(\\d+)", "i"); //regex to match catid=nnnnn integer
	if(!re.test(document.URL)){ //if no catid in url
		ddaccordion.collapseall('expandable0'); //collapse menu level 0
	}
	else{ //catid exists in url so check expandedindices.length
		if(expandedindices.length == 0){//NO headers are expanded so

			var urlparam=document.URL.match(/catid=(\d+)/i); //get catid from URL...
			if (RegExp.$1!="")
			var catid = urlparam[1];
			var $=jQuery
			$('#'+catid).parentsUntil('#arrowlistmenu').show();
		}
	}
	
	},