jQuery Gooey Menu: Change selected item dynamically

[JShor]

1) Script Title: jQuery Gooey Menu

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

3) Describe problem:
I'm unable to dynamically change which menu item is selected. I added the following to the code:

$menulinks.click(function() {
    $selectedlink = this;
})

It does select the active item, but whenever I mouseover another item, that item which was mouseover'd becomes the new active item.

I tried:

$menulinks.click(function() {
    $menulinks.removeClass('selected');
    $selecteditem = $(this).addClass('selected');
})

It doesn't do anything.

Finally, in my last desperate attempt to make this work, I tried calling gooeymenu.setup again with the new selectitem defined.

$menulinks.click(function() {
                var allItems = this.parentNode.getElementsByTagName('a');
                
                for(i=0; i<allItems.length; i++) {
                    if(allItems[i] == this) {
                        gooeymenu.setup({id:'gooeymenu1', selectitem: i});
                    }
                }
})

It doesn't do anything. I would like to have it so that when an item is clicked, it stays active.

Thanks for looking into this.
-Josh

[JShor]

Bump.

Any ideas? :/

[ddadmin]

Instead of:

$menulinks.click(function() {
    $selectedlink = this;
})

Try doing this instead:

$menulinks.click(function() {
    $selectedlink = $(this);
})

The $selectedlink variable expects a jQuery object.

[JShor]

Worked perfectly! Thanks a bunch!

[bco]

Hi! I'm a novice and I don't know how and where you put your code to get something working... I would like also to change dynamically the selected item in the menu staying in the same page.
Could you please give me more explanations or a full example?
Thank you very much for your support...

[Shreger]

Could you please give me more explanations or a full example?

Assuming you're using notepad to edit the .js file, you can place it immediately after

$selectedlink=$target //set current mouseover element to selected element})

so:

$selectedlink=$target //set current mouseover element to selected element})$menulinks.click(function(){$selectedlink = $(this);
})

I am no expert myself, so I do not know if this is the best placement, however it does work.

The full modified .js file would then be as follows:

/* jQuery Gooey Menu
* Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

jQuery.noConflict()

jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	}
})


var gooeymenu={
	effectmarkup: '<li class="active"></li>',

	setup:function(usersetting){
		jQuery(function($){ //on document.ready
			function snapback(dur){
				if ($selectedlink.length>0)
					$effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
			}
			var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
			var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
			var $menulinks=$menu.find('li a')
			var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL
			$effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window
			if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
				var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
			}
			else{
				var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
			}
			setting.defaultselectedBool=$selectedlink.length
			$menulinks.mouseover(function(){
				clearTimeout(setting.snapbacktimer)
				var $target=$(this)
//alert($target.position().left+" "+$target.get(0).offsetLeft)

				$effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)
				if (setting.defaultselectedBool==0) //if there is no default selected menu item
					$selectedlink=$target //set current mouseover element to selected element
			})
			$menulinks.click(function() {
				$selectedlink = $(this);
			})
			if ($selectedlink.length>0){
				snapback(0)
				$menu.mouseleave(function(){
					setting.snapbacktimer=setTimeout(function(){
						snapback(setting.fxtime)
					}, setting.snapdelay)
				})
			}
				$(window).bind('resize', function(){
					snapback(setting.fxtime)
				})
		})
	}
}

Thanks to JShor and ddadmin for this fix, it's just what I needed.