Looking for help with getting two scripts to work together, I am struggling to write the code that will make them function in unison. Specifically, I have a Jquery .hoverIntent placed on the first li element of my mega menu and a Jquery .hover event to darken the background on everything except for the dropdown/hover ul. My ultimate goal is to have these two scripts working together seamlessly to delay firing by using .hoverIntent on accidental roll overs.
Check out my website
//Dropdown navigation - adds background fade on hover
$('.nav.nav-pills.nav-justified a.dropdown-toggle, ul.dropdown-menu' ).hover(
function () {
$('.hover-opacity').css({"opacity": .5, "visibility": "visible"});
},
function () {
$('.hover-opacity').css({"opacity": 0, "visibility": "hidden"});
});
//hoverIntent
$("ul.dropdown-menu").hoverIntent({
over: makeTall,
out: makeShort,
selector: 'li'});
//Bootstrap Hover Dropdown
$('.dropdown-toggle').dropdownHover({hoverDelay:500, delay:500});
//sample of the dropdown menu code
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="dropdown yamm-fullwidth"><a href="/news/" title="County News" data-toggle="dropdown" class="dropdown-toggle">Residents <b class="caret"></b></a>
<ul id="residents" class="dropdown-menu">
<li class="yamm-content">
<div class="row">
<div class="col-sm-3">
<h3 class="title"><a href="/news/" title="County News">All County</a></h3>
<ul>
<li><a href="/county-government/county-phone-numbers.asp" title="County Phone Numbers - Hotlines">County Toll-Free Numbers</a></li>
<li><a href="/county-government/county-phone-numbers.asp#hotlines" title="Departments">Hotlines</a></li>
<li><a href="/news/" title="County News">County News</a></li>
<li><a href="/news/traffic-list.asp" title="Traffic Advisories">Traffic Advisories</a></li>
<li><a href="/calendar/index.asp" title="County Calendar">Events Calendar</a></li>
<li><a href="/photo-gallery/" title="Photo Gallery">Photo Gallery</a></li>
<li><a href="/subscriptions/" title="Online Subscription Services">Online Subscription Services</a></li>
<li><a href="/social-media/">Social Media</a></li>
<li></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
Resolved an issue with other scripts not functioning by combining .hoverIntent with .dropdownHover like this:
$('ul.dropdown-menu').hoverIntent(
$('.dropdown-toggle').dropdownHover({delay:500})
);