Results 1 to 4 of 4

Thread: jQuery Gooey Menu dynamic "selectitem" change

  1. #1
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jQuery Gooey Menu dynamic "selectitem" change

    1) Script Title: jQuery Gooey Menu

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

    3) Describe problem:
    CODE:
    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 =\

  2. #2
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Aug 2004
    Posts
    9,887
    Thanks
    3
    Thanked 963 Times in 952 Posts
    Blog Entries
    15

    Default

    You can dynamically select a particular menu item within a Gooey menu by adding the below function inside the HEAD section of your page:

    Code:
    <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:

    Code:
    <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:

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

  4. #4
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •