Dec 14, 2010, 5:11 PM
Hovering a ComboBox item from the list triggers mouseleave event
Hi guys,
I was trying a menu that I found on the internet created with JQuery and I've been struggling to fix an annoyance, basically I added a ComboBox to one of the dropdown items of the menu and when I expand the combobox and hover any of its items it closes the menu dropdown, I was wondering why hovering any of the items is considered to be moving the mouse out of the inner Div since that triggers the mouseleave event that closes the dropdown, I know this works with standard ASP.NET controls but with them I was able to fix it but not with Ext.net comboboxes, I'm pasting an image and some code here if you guys could give me an idea.
Thanks,
Paul
I was trying a menu that I found on the internet created with JQuery and I've been struggling to fix an annoyance, basically I added a ComboBox to one of the dropdown items of the menu and when I expand the combobox and hover any of its items it closes the menu dropdown, I was wondering why hovering any of the items is considered to be moving the mouse out of the inner Div since that triggers the mouseleave event that closes the dropdown, I know this works with standard ASP.NET controls but with them I was able to fix it but not with Ext.net comboboxes, I'm pasting an image and some code here if you guys could give me an idea.
Thanks,
Paul
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<link href="Styles/Reset.css" rel="stylesheet" type="text/css" />
<link href="Styles/menus.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<script type="text/javascript">
var DropTimeout;
function hideDropdown() {
$('ul.menu_body').slideUp('fast');
clearTimeout(DropTimeout);
}
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('img.menu_head').hover(function () {
$('ul.menu_body').slideDown('fast');
clearTimeout(DropTimeout);
}, function () {
});
$('#cmbTopMenuSetWorkingAction').mouseover(function () {
$('ul.menu_body').show();
clearTimeout(DropTimeout);
});
$('div.top-menu').mouseleave(function (e) {
var DropTimeout= setTimeout("hideDropdown()", 100); /* Wait half a second before hiding */
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div class="top-menu">
<img src="images/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li>
<div id="topmenuTasksContainer">
<div class="topmenuTasksContainerDropDown">
<ext:ComboBox ID="DropDownList1" runat="server" Width="95px" IDMode="Static" Visible="true">
<Items>
<ext:ListItem Text="Item 1" Value="Item 1" />
<ext:ListItem Text="Item 2" Value="Item 2" />
</Items>
</ext:ComboBox>
</div>
<div class="topmenuTasksContainerButton">
<ext:Button ID="btTopMenuSetWorkingAction" runat="server" Text="Start" Width="50px">
<DirectEvents>
<Click OnEvent="btTopMenuSetWorkingAction_Click"></Click>
</DirectEvents>
</ext:Button>
</div>
</div>
</li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</form>
</body>
</html>
