Tree submenu, need two independent bold-on-click feature

[ajoros]

Hey there,

In my tree menu seen at http://www.wrcc.dri.edu/monitor/WWDT/index.php, is there a way to make the Variable sub menu and Region sub menu independent of eachother in terms of being bold when clicked... So for example, If I click PDSI I want that to become bold and then if I click Arizona I want that to become bold as well. I would like variable and region to both be bold when the user clicks on it. This makes it easier for the user to know what he/she clicked by just looking at the tree menu. Right now, only the active or recently clicked variable/region become bold.

You can view my source code and see that right now I have:

<script type="text/javascript">
$(function(){
$('#variable').find('a').each(function(){
if (this.href==location.href){
$(this).addClass('Active');
}else{
$(this).removeClass('Active');
}
});
});
</script>

<script type="text/javascript">
$(function(){
$('#region').find('a').each(function(){
if (this.href==location.href){
$(this).addClass('Active');
}else{
$(this).removeClass('Active');
}
});
});
</script>

Thanks for all and any help

[DanInMa]

well, since the href changes on every click and the 2 menus only get bolded if the href's match, then using what you have, it's not going to work properly, because the href in one menu isnt going to match the other, so you may need to rethink your overall approach to the problem.

you could parse the current href for the folder= or region= variables, and use that specific info to apply the desired coloring, but with the way you have your backend setup, when they click on a region, it's a new page, when they click on the variable menu, thats a new page and url.

so you might want to rethink the backend a bit?. The url in browser only shows folder= or region=, but the php side is obviously showing the correct info based on those selections

[ajoros]

you could parse the current href for the folder= or region= variables, and use that specific info to apply the desired coloring

How would I code this up in JavaScript though? Thanks for the input! What would I add/change to the code:

</script>
<script type="text/javascript">
$(function(){
$('#variable').find('a').each(function(){
if (this.href==location.href){
$(this).addClass('Active');
}else{
$(this).removeClass('Active');
}
});
});
</script>

[DanInMa]

from http://www.kevinleary.net/get-url-pa...script-jquery/

// Parse URL Queries Method
(function($){
	$.getQuery = function( query ) {
		query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
		var expr = "[\\?&]"+query+"=([^&#]*)";
		var regex = new RegExp( expr );
		var results = regex.exec( window.location.href );
		if( results !== null ) {
			return results[1];
			return decodeURIComponent(results[1].replace(/\+/g, " "));
		} else {
			return false;
		}
	};
})(jQuery);
 
// Document load
$(function(){
	var test_query = $.getQuery('test');
	alert(test_query); // For the URL http://www.kevinleary.net/?test=yes, the value would be "yes"
});

you'd do that sort of that thing to parse the values in the url and instead of matching directly against the href you use something like var $region= $.getquery("region"); and compare against the variable $region instead.

if you get the php reworked so the url includes both selections in the url, you'll be straight.

Id like to point out since your doing a page refresh every time anyways, you could do all of this in php and it'd probably be more efficient, but of course it's about whatever works for your needs.

[ajoros]

hetlakoopm4, images are broken.

[ajoros]

Bump.......... any help? I still cant get this to work...

[ajoros]

noi, how can i do this in the php ??