PDA

View Full Version : jQuery Gooey Menu dynamic "selectitem" change



Antirevel
05-25-2011, 08:09 AM
1) Script Title: jQuery Gooey Menu

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

3) Describe problem:
CODE:

gooeymenu.setup({id:'gooeymenu1', selectitem:0});
$('#gooeymenu1 a').click(function() {
gooeymenu.setup({id:'gooeymenu1', selectitem:1});
});
How can i change "selectitem" property without page reload?
a) Tried call gooeymenu.setup() second time, but it create second Gooey Menu instance.
b) Tried to delete old gooeymenu, but could not find out object name to delete =\

Shreger
06-13-2011, 05:12 PM
I tried using the 'class=selected' method, giving each item an id, and changing the class with javascript, but that didn't work for me ether. I agree that it would be nice to have 'selectitem' change dynamically.

ddadmin
06-17-2011, 12:05 AM
You can dynamically select a particular menu item within a Gooey menu by adding the below function inside the HEAD section of your page:


<script>

function hoverover(menuid, select){
jQuery('#'+menuid).find('a').eq(select).trigger('mouseover')
}

</script>

It excepts two parameters- the ID of your Gooey Menu container, and an integer reflecting the menu item within it you wish to select (0=1st item, 1=2nd item etc). Given the below Gooey Menu for example:


<ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/" class="selected">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu1'})
</script>

The following link when clicked on dynamically selects the 1st menu item within it:


<a href="javascript:hoverover('gooeymenu1', 0)">Select 1st item</a>

sellbytel
07-11-2011, 07:34 AM
I try to fix the issue with this fix but it wont work.

I use gooeymenu to load dynamic content into a div (using jquery.load). At the end of the loaded HTML I call the function hoverover.

If I click the gooeymenu and move the mouse from the selected (and clicked) item before the div is loaded and the function is called it works.

If Im too slow and stay with the mouse over the selected and clicked item and move the mouse pointer from the item after the function hoverover is called the gooeymenu pops back to the first item (as defined during setup).

How can I fix this???

Greetings