flexmenu problem with jquery datatable

[mhussein]

1) Script Title: flexmenu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...exdropdown.htm

3) Describe problem: I'm trying to implement the flex menu with jquery datatable, all is working fine except when the menu show-up on upper direction it disappear immediately when moving the mouse to select item from the menu.

I'm using the below code to assign flexmenu to each tr and td:

               iLoop = 1;
               $("#tblStuList tbody tr").each(function () {
                   $("<ul id=flexmenu" + StudIDArray[iLoop] + " class=flexdropdownmenu>"
                       + "<li><a href=javascript:void(popup('sreport.aspx?userid=" + StudIDArray[iLoop] + "',650,400,'SINFO'))>Student Information</a></li>"
                       + "<li><a href=javascript:void(popup('sgrade.aspx?userid=',650,400,'Grades'))>Grades " + StudIDArray[iLoop] + "</a></li>"
                       + "<li><a href=javascript:void(popup('astud.aspx?id=',650,500,'Attendnace'))>Attendance</a></li>"
                       + "<li><a href=javascript:void(popup('schedule.aspx?term=1234',650,500,'schedule'))>Schedule</a></li>"
                       + "<li><a href=javascript:void(popup('scomments.asp?id='50,450,'FCommens'))>Faculty & General Comments</a></li>"
                       + "<li><a href=#>Academic Records</a> "
                       + "<ul>"
                        + "<Li><A href=#>Transcript and GPA</A></Li>"
                        + "<Li><A href=#>Degree Audit</A></Li>"
                        + "<Li><A href=#>At Risk</A></Li>"
                       + "</ul>"
                       + "</Li>"
                       + "</ul>").appendTo('#flexmenuDiv');
                   $(this).find('td:not(:has(input))').each(function () {
                       $(this).addflexmenu('flexmenu' + StudIDArray[iLoop]);
                       $(this).attr('nowrap', 'nowrap');
                   });
                   iLoop = iLoop + 1;

               });

Please help and let me know if the above code is the best practice on implementing a menu for the datatable.

[mhussein]

Please note that I'm using the updated flexmenu script in the below link (to show the menu onclick not onmouseover)

http://www.dynamicdrive.com/forums/a...7&d=1433522534

[ddadmin]

all is working fine except when the menu show-up on upper direction it disappear immediately when moving the mouse to select item from the menu.

This usually happens if you've initialized a flex menu more than once (by calling addflexmenu()). Please post a link to the page on your site that contains the problematic script so we can check it out.

[mhussein]

Please check the below fiddle: the menu will appear onclick for each td:

http://fiddle.jshell.net/mhussein/sbbrg6ew/

[ddadmin]

Ok, after playing around with your fiddle for a while, the following seems to fix the problem. Find the below line inside flexdropdown.js:

		$menu.bind('mouseenter', function(){
			clearTimeout($menu.data('timers').hidetimer)
		})

and change that to:

		$menu.bind('mouseenter mouseover', function(){
			clearTimeout($menu.data('timers').hidetimer)
		})