jQuery - delay with stop functions

jQuery - delay with stop functions - javascript

Consider the following navigation layout
primary nav
secondary nav
sub nav (shown only on rollover
of primary or secondary nav
I'm needing for there to be a delay in the fadeOut call long enough for a user to get their mouse from the primary nav to the subnav and once over the subnav I need the hover fadeOut cancelled. Repeating the idea when hovering over the secondary nav item. (I know how to add the delay but not how to cancel the hover)
TIA
http://jsfiddle.net/Wm6Gp/
<div class="primary">
<ul class="primary common">
<li class="primary category" rel="politics">
POLITICS
</li>
</ul>
</div>
<div class="secondary">
<ul class="secondary common">
<li class="secondary category" rel="news">
NEWS
</li>
</ul>
</div>
<div style="display: block; height: 20px; width: 100px; overflow: hidden;">
<div id="politics" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
POLITICS SUBNAV
</li>
</ul>
</div>
<div id="news" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
NEWS SUBNAV
</li>
</ul>
</div>
</div>
$('.category').hover(
function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeIn('slow');
}, function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeOut('slow');
});

Try jQuery Hover Intent plugin - http://cherne.net/brian/resources/jquery.hoverIntent.html

Related

The accordion don't stop when applying a hover mouse

I am using the accordion to display the subcategories of each category.
My Problem is that I can't go to the subcategory of a category because it closes after the mouse out.
I want to keep the same architecture of the html:
Currently I have
jQuery(function($) {
$('ul.r-list h1').hover(function() {
$(this).next().stop(true, true).slideDown()
}, function() {
$(this).next().stop(true, true).slideUp()
}).find($(this).next()).hide()
});
ul.r-list li ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category</a>
<span>(8)</span>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
<span>(5)</span>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
<span>(1)</span>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
<span>(2)</span>
</li>
</ul>
</li>
</ul>
Expected result:
when I go to child category the animation stop and when I mouse out it automatically closes.
Current result:
when i go to child category the animation didn't stop
Thanks in advance

Listen to the hover event on the whole ul.r-list li so the mouse out event does not fire when you move from h1 to ul. Then in the event handler functions find ul inside current this element and slide it up/down.
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
ul.r-list li ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category</a>
<span>(8)</span>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
<span>(5)</span>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
<span>(1)</span>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
<span>(2)</span>
</li>
</ul>
</li>
</ul>

You were close. Add a class like r-hasSublist to the common LI element (that wraps H1 and the UL sublist). Target that class to keep the hover's mouseenter event active.
Inside the .hover() method you can than use simply $('> ul', this).stop().slideToggle();
jQuery(function($) {
$('.r-hasSublist').hover(function() {
$('> ul', this).stop().slideToggle();
});
});
.r-hasSublist ul {
display: none;
}
<ul class="r-list">
<li class="r-hasSublist">
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category</a>
<span>(8)</span>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
<span>(5)</span>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
<span>(1)</span>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
<span>(2)</span>
</li>
</ul>
</li>
</ul>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

Sub menu on scrollable parent using HTML and CSS

I am programming this on rails but the problem is in html+css+javascript.
<ul>
<li>Menu1
<ul style="overflow: hidden auto; height: 400px; display: none;">
<li class="sub-menu">
<a href="#">
<div>submenu1</div>
</a>
<ul style="left: 258px; height: 400px; display: none;">
<li>
<a href="#">
<div>Subsubmenu1</div>
</a>
</li>
<li class="line"></li>
<li>
<a href="#">
<div>Subsubmenu2</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I have this long list of submenus so i want it scrollable.
As soon as i add overflow to the sub menu list the Sub Sub menus stop being displayed. I tried checking for javascript errors without success.

Displaying a dropdown menu on hover and replacing CSS classes

Two elements that needs to be manipulated with JS:
<li class="navTab myFirstTab Popup PopupControl PopupOpen PopupContainerControl">
For the above element:
I want OnMouseHover to replace the class value:
PopupClose with PopupOpen
<div class="Menu JsOnly tabMenu myFirstTabLinks" id="XenForoUniq0" style="display: block; visibility: visible; top: 96px; left: 960.5px;">
At the same time, the above element style attribute to change its value from: display: none; to display: block;
Sample of HTML structure:
<ul class="publicTabs navLeft">
<li class="navTab forums selected">
Home
</li>
<li class="navTab myFirstTab Popup PopupControl PopupClosed PopupContainerControl">
On hover I should have a DropDown
</li>
<li class="navTab mySecondTab Popup PopupControl PopupClosed PopupContainerControl uix_rightMost">
On hover I should have a DropDown2
</li>
<!-- members -->
<!-- extra tabs: end -->
<!-- responsive popup -->
<li class="navTab navigationHiddenTabs navTab--j justIcon Popup PopupControl PopupClosed PopupContainerControl" style="display: none;">
<a rel="Menu" class="navLink NoPopupGadget uix_dropdownDesktopMenu"><i class="uix_icon uix_icon-navOverflow"></i><span class="uix_hide menuIcon">ham</span></a>
</li>
</ul>
<!-- START DropDown-->
<div class="Menu JsOnly tabMenu myFirstTabLinks" id="XenForoUniq0" style="display: none; visibility: visible; top: 96px; left: 960.5px;">
<div class="primaryContent menuHeader">
<h3>My First drop down menu title</h3>
</div>
<ul class="secondaryContent blockLinksList">
<li>item1</li>
<li>item2</li>
</ul>
</div>
<div class="Menu JsOnly tabMenu mySecondTabLinks" id="XenForoUniq1" style="display: none; visibility: visible; top: 76px; left: 879.5px;">
<div class="primaryContent menuHeader">
<h3>My Second drop down menu title</h3>
</div>
<ul class="secondaryContent blockLinksList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<!-- FINISH DropDown -->

Add data-target attributes to your tablinks div.. similar to below
<li class="navTab myFirstTab Popup PopupControl PopupClosed PopupContainerControl" data-target="myFirstTabLinks">
<li class="navTab mySecondTab Popup PopupControl PopupClosed PopupContainerControl" data-target="mySecondTabLinks">
Now
$('.navTab.Popup').on('mouseenter', function() {
$(this).removeClass('PopupClosed').addClass('PopupOpen');
var cls = $(this).data('target'); // fetch which class to target.
$('.Menu.' + cls).css('display','block'); // will make display block
}). on('mouseleave', function() {
$(this).addClass('PopupClosed').removeClass('PopupOpen');
var cls = $(this).data('target'); // fetch which class to target.
$('.Menu.' + cls).css('display','none'); // will make display none
});

display none if null using data-id

I have a menu which list items which display the the content on the other list.
MENU
<ul id="gallery-list" style="display: none;">
<li class="close"></li>
<li data-id="9425"><strong>item 1</strong></li>
<li data-id="9426"><strong>item 2</strong></li>
<li data-id="9488"><strong>item 3</strong></li>
<li data-id="9489"><strong>item 4</strong></li>
<li data-id="9495"><strong>item 5</strong></li>
<li data-id="9427"><strong>item 6</strong></li>
</ul>
CONTENT:
<ul id="gallery-container">
<li data-id="9425">
<h3 style="display: none;">Item 1</h3>
<div class="content">Content here</div>
</li>
<li data-id="9426">
<h3 style="display: none;">Item 2</h3>
</li>
<li data-id="9488">
<h3 style="display: none;">Item 3</h3>
</li>
<li data-id="9489">
<h3 style="display: none;">Item 4</h3>
</li>
<li data-id="9495">
<h3 style="display: none;">Item 5</h3>
<div class="content">Content here</div>
</li>
<li data-id="9427">
<h3 style="display: none;">Item 6</h3>
<div class="content">Content here</div>
</li>
</ul>
In the content some have .content in the li. How can I use the data-id in that to hide the item in the menu section? Basically items in the menu should only be display if it has a .content
OUTPUT of the MENU should be like this.
<ul id="gallery-list" style="display: none;">
<li class="close"></li>
<li data-id="9425"><strong>item 1</strong></li>
<li data-id="9495"><strong>item 5</strong></li>
<li data-id="9427"><strong>item 6</strong></li>
</ul>
Or this should be okay too.
<ul id="gallery-list" style="display: none;">
<li class="close"></li>
<li data-id="9425"><strong>item 1</strong></li>
<li data-id="9425" style="display:none;"><strong>item 2</strong></li>
<li data-id="9425" style="display:none;"><strong>item 3</strong></li>
<li data-id="9425" style="display:none;"><strong>item 4</strong></li>
<li data-id="9495"><strong>item 5</strong></li>
<li data-id="9427"><strong>item 6</strong></li>
</ul>
Take not that Item in the content are always display:none; onload trigger.
Also using this script:
$("#gallery-list li").click(function() {
var id = $(this).data('id');
$("#gallery-container").find('li').each(function() {
$(this).find('.content').toggle($(this).data('id') === id);
$(this).find('h3').toggle($(this).data('id') === id);
});
});
window.onload = function () {
$("#gallery-container li .content").css("display", "none");
$("#gallery-container li h3").css("display","none");
$("#gallery-container li p").css("display","none");
}
$('.gallery-menu h3, #gallery-list li').click(function(){
$("#gallery-list, .gallery-menu h3").toggle();
});
This controls the contents of the list also activate the menu.

My frist idea:
Loop the content list items and when no .content is available inside, remove the related menu item.
$(function() {
$("#gallery-container li[data-id]").each(function() {
if( $(".content", this).length == 0 ) {
$("#gallery-list li[data-id=" + $(this).data("id") + "]").remove();
}
});
});
As #XerenNarcy noticed in the comments, you can even use a not() and has() combined selector:
$(function() {
$("#gallery-container li[data-id]:not(:has(.content))").each(function() {
$("#gallery-list li[data-id=" + $(this).data("id") + "]").remove();
});
});
Instead of remove() you yould even use hide().
Working example.

how to make nested list in slide panel?

Can you please tell me how to make a nested list in slide panel in jQuery?
I am able to make a slide panel, but I want to make nested list in left panel in jQuery.
http://jsfiddle.net/qUMbC/31/
can we make nested list in slide panel ?
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth"> Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h2>Menu</h2>
<ul data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu 1</a>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
<!-- submenu -->
</div>

Assuming you want the inner list to remain hidden until its parent is clicked, something like this might give you an idea:
HTML:
<ul id="myList" data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu1</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
CSS:
#myList ul {
display: none;
}
JavaScript:
$('#myList > li').click(function() {
var subList = $(this).children('ul');
if (subList.is(":hidden"))
subList.slideDown(200);
else
subList.slideUp(200);
});
JSFiddle demo

Develop Reference

JavaScript is the programming language of the Web.

jQuery - delay with stop functions - javascript

Try jQuery Hover Intent plugin - http://cherne.net/brian/resources/jquery.hoverIntent.html

Related

The accordion don't stop when applying a hover mouse

Sub menu on scrollable parent using HTML and CSS

Displaying a dropdown menu on hover and replacing CSS classes

display none if null using data-id

how to make nested list in slide panel?

Categories

Resources