Slashdot menu

[wilorichie]

1) Script Title: Slashdot Menu

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

3) Describe problem:

If you click on the above link (Takes you to the slashdot menu) you will be able to see my problem.

When you load this page, close all of the 4 menu categories so we start from scratch.

Okay, now that all the categories are shut open up "Online Tools" and "Support Us". We now have 2 menu categories open.

If you click on "Image Optimizer" under the menu "Online Tools" it takes you to another page. Now press back. You will notice that the Online Tools and the Support Us menu's are still open.

I need it so it would of closed the "Support Us" menu and just left open the "Online Tools" menu becuase the link we clicked was under "Online Tools".

How can we do this? I'm quite bad at JavaScript haha, so -obvious- help is needed!

Cheers guys/girls - ta for your time

[codeexploiter]

It can be done by using the following code:

myMenu.remember = true;

In this casee myMenu is the menu object in your case the name may change and use your object name in place of myMenu if it is a different one.

The 'remember' property store menu states (expanded or collapsed) in cookie and restore later.

Hope this helps.

[wilorichie]

Thats not what I'm after sorry.

With this, if I open up 2 drop down menus and click 1 link. It will save both menus as open. I want it to only save 1 menu as open - the menu I clicked the link from.

[codeexploiter]

It can be done with the below mentioned changes:

(1) Insert the following code in sdmenu.js file and save the file

SDMenu.prototype.collapseNonActive = function(submenu){
	for (var i = 0; i < this.submenus.length; i++){
		if (this.submenus[i] === submenu){continue;}
		if(submenu.className != 'collapsed')
			this.collapseMenu(this.submenus[i]);
	}	
};

(2) Insert the following code along with the onload event of window object where you create the menu object like the following manner

window.onload = function() {
	var as = document.getElementById('my_menu').getElementsByTagName('a');
	for(var i = 0; i < as.length; ++i){
		as[i].onclick = function(){
			myMenu.collapseNonActive(this.parentNode);
		};	
	}		
	myMenu = new SDMenu("my_menu");
	myMenu.init();
};

Save the page

With the above mentioned changes you'll be able to collapse all the other submenu's except the submenu from which you've clicked the link. This will remember the state also if you return back the menu page using the back button.

Hope this helps.

[wilorichie]

Hey mate

I was playing around with that... Nice work on the code by the way.

There is a small problem though

It works intermittently - I noticed that if the link loads very fast it doesn't work... but if its just a tad slower it will work.

The menu not fully closed before the link loads - I think that is what I am seeing anyways

Cheers mate


edit: thats def the problem... It switches to the link page before the menu has finished minimising...

[codeexploiter]

Make the highlighted changes in your code in the corresponding sections and there will be a small delay before the link redirect to the corresponding location. Within this short delay the user will be able to view the collapse of all the submenus other than the clicked one.

SDMenu.prototype.collapseNonActive = function(anchor,submenu){
	for (var i = 0; i < this.submenus.length; i++){
		if (this.submenus[i] === submenu){continue;}
		if(submenu.className != 'collapsed')
			this.collapseMenu(this.submenus[i]);
	}
	setTimeout(function(){location.href = anchor.href;},1000);
	return false;
};

window.onload = function() {
	var as = document.getElementById('my_menu').getElementsByTagName('a');
	for(var i = 0; i < as.length; ++i){
		as[i].onclick = function(){
			return myMenu.collapseNonActive(this,this.parentNode);
		};
	}
	myMenu = new SDMenu("my_menu");
	myMenu.init();
};

I've tested this in FF 3.0.3 and IE 7

Hope this helps.

[wilorichie]

Hi Mate

I noticed that the second step "this," made it so all the menus closed when you click a link, even the menu which the link came from (so all the menus are completely shut). Also found that "return " will give me a Page Error and the links don't work at all.

After some playing around with the code you gave me, here is what I found works best so far. I also noticed the timeout function doesn't seem to be working as I increased it to 50000 and the delay felt the same, if any.


I removed "this," and it kept the menu open.

Hm... The timeout isn't working I don't think. I increased it to 5000 but it just loads the page straight away.

Honestly, it sorta felt like the 1000 timeout worked the first couple times I clicked links. But after about 3-4 times it feels instant again :|


This is what I have found is working best for me so far, but I'm not sure if the timeout is working becuase I increased it to 10000 and feels like the delay is the same.

SDMenu.prototype.collapseNonActive = function(submenu){
	for (var i = 0; i < this.submenus.length; i++){
		if (this.submenus[i] === submenu){continue;}
		if(submenu.className != 'collapsed')
			this.collapseMenu(this.submenus[i]);
	}
	setTimeout(function(){location.href = anchor.href;},1000);
	return false;
};

and

	var myMenu;
	window.onload = function() {
		var as = document.getElementById('my_menu').getElementsByTagName('a');
		for(var i = 0; i < as.length; ++i){
			as[i].onclick = function(){
				myMenu.collapseNonActive(this.parentNode);
			};	
		}		
		myMenu = new SDMenu("my_menu");
		myMenu.init();
	};

Cheers for your time mate. I am also using FF 3.0.3 and IE 7

[wilorichie]

Any ideas with this please guys?

[wilorichie]

Nothing?