flexmenu problem with jquery datatable

[mhussein]

1) Script Title: flexmenu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/flexdropdown.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/attachment.php?attachmentid=5687&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)
})