I have a page where I am using a tablesorter component and a jquery menu. tablesorter is using the filtered row search feature which appears on a mouse hover. Problem is, as soon as the menu is down and mouse comes over the tablesorter hidden row, row goes out and menu goes away. How can I prevent the tablesorter filter row from popping out when menu is down?
You can see my code here: http://jsfiddle.net/V9a7b/14/
<nav id="MyMenu">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li><a href="/">Home</a></li>
<li><a href="#">Action</a>
<ul id="MenuAction">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li><a href="#">Action 4</a></li>
<li><a href="#">Action 5</a></li>
<li><a href="#">Action 6</a></li>
<li><a href="#">Action 7</a></li>
</ul>
</li>
<li><a href="#">Account</a>
<ul id="MenuAccount">
<li><a href="#">Change Password</a></li>
<li><a href="#">View Accounts</a></li>
<li><a href="#">Create</a></li>
<li><a href="#">View Roles</a></li>
<li><a href="#">Log off</a></li>
</ul>
</li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</nav>
<table cellspacing="1" cellpadding="1" id="PackagesTable" class="tablesorter">
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
<th class="filter-select filter-onlyAvail">Status</th>
<th>Field 5</th>
</tr>
</thead>
<tbody id="PackageList">
<tr class="PackageRows" id="Tr1">
<td><a style="text-decoration:none" href="#">test1</a></td>
<td>test #11</td>
<td></td>
<td>Sent to QA</td>
<td><span class="time">2014/04/09 18:45:01</span></td>
</tr>
<tr class="PackageRows" id="Tr2">
<td><a style="text-decoration:none" href="#">test2</a></td>
<td>bla bla...</td>
<td></td>
<td>Active/In Development</td>
<td><span class="time">2013/12/17 18:36:35</span></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
window.onload = function () {
$("#PackagesTable").tablesorter({
theme: 'blue',
widthFixed: false,
widgets: ["zebra", "filter"],
widgetOptions: {
filter_filteredRow: 'filtered',
filter_hideFilters: true
}
});
}
</script>
When you set the filter_hideFilters option to true. The filter widget adds a class name of hideme to the filter row. This class name essentially makes the filter inputs disappear and yet you can still use tab to get to them. See the css here.
The only time the hideme class name is removed is when any filter input has a value, any filter input has focus or the user hovers over the filter row.
What I'm not seeing is the situation described where the dropdown menu is overlapping the filter row and the pointer is brought over the filter row to make it expand. At least not in Chrome and Firefox.
If you see this behavior in a different browser, then why not just set the filter_hideFilters option to false.