Jquery hover + position absolute = Problems in IE - javascript

I'm making a drop down menu and it works great in all modern browser but im not sure, it fails in IE, when i try to select the sub-elements of the submenu, it disappears.
This is the page: http://XXX/
and this is the JS code
$("nav li").hover(function(){
$(".subnavi-wrapper", $(this)).show();
}, function(){
$(".subnavi-wrapper", $(this)).hide();
});
EDIT: Apparently it's the margins on top of the dropdown which seem to activate the "mouseout" in IE! Aparently jQuery detects badly the area of the items with position absolute! :(

It's all because block "subnavi-wrapper" in Li element. You must remove DIV and try do it only by using Ul element. I made something like it here: http://www.muzykakoncerty.pl
here, something like this:
$('#menu > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});
and my menu HTML code is:
<div id="menu">
<ul>
<li>
wstęp
</li>
<li>
<ul>
<li>Big Band</li>
<li>Arti Sound Concert</li>
<li>Leszczyńska Kapela Barokowa</li>
</ul>
zespoły
</li>
<li>
<ul>
<li>Dancing Sisters</li>
</ul>
taniec
</li>
<li>
o mnie
</li>
<li>
kontakt
</li>
</ul>
</div>
EDIT:
so try it:
$('nav > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});

What you have uses the multiple selector selector will show/hide both the nav li and the .subnavi-wrapper. I think you only need to toggle the .subnavi-wrapper
$("nav li").hover(function(){
$(".subnavi-wrapper").show();
}, function(){
$(".subnavi-wrapper").hide();
});
If you only want to show the .subnavi-wrapper under the current li:
$("nav li").hover(function(){
$(this).find(".subnavi-wrapper").show();
}, function(){
$(this).find(".subnavi-wrapper").hide();
});

// show
$("nav li").live('mouseover',function(){
$(".subnavi-wrapper").show();
});
// hide
$("nav li").live('mouseout',function(){
$(".subnavi-wrapper").hide();
});

Related

Hide dropdown div with jQuery on mouseout

I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get:
CodePen example.
jquery:
$(document).ready(function() {
$('.expand').click(function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
$('section').mouseleave(function(){
$(this).hide();
});
I've also tried the following:
$('section').hide();
$('.section').on('mouseout',function(){
$(this).hide();
})
Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?
Working example.
You should use setTimeout()/clearTimeout() functions to solve your problem so you've to attach mouseleave event to the button with class dropbtn and both mouseleave/mouseleave events (using hover()) to the div dropdown-content so when the mouse leave the button to any other element you should check if the mouseenter is inside the dropdown, if yes clear the timeout the hide_dropdown so it will not hide the div, else your time out will hide the dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){
var _this = $(this);
hide_dropdown = setTimeout(function(){
_this.next('.dropdown-content').removeClass('show');
},50);
});
$('.dropdown-content').hover(
function(){
clearTimeout(hide_dropdown);
},
function(){
$(this).removeClass('show');
}
);
Hope this helps.
you code it's confusing so i made a simple example for what you want.
see here snippet >
$(".dropbtn").click(function(){
var showMe = $(this).siblings(".drop-menu"),
visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
$(showMe).slideDown()
$(visibleDrop).slideUp()
$(showMe).mouseleave(function(){
$(this).slideUp()
})
})
ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul { display:none;position:absolute;top:100%;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="dropbtn"> Has Children1</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a class="dropbtn"> Has Children2</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a>No children</a></li>
<li><a> No children</a></li>
</ul>
or fiddle > jsFiddle
let me know if it helps
<div>
Menu
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
Page 1<br />
Page 2<br />
Page 3<br />
</div>
link:-http://jsfiddle.net/5SSDz/
In your codepen example, I have added the following code snippet inside ready callback which seems to work.
$('.expand').on("mouseleave", function(e){
e.preventDefault();
$('section').slideUp('normal');
});
Here is the complete js code
$(document).ready(function() {
$('.dropbtn').on("mouseleave", function(e){
$(".dropdown-content").removeClass("show");
});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});

Highlighting active link with jquery

I'm trying to highlight the active link, it does highlight it but the underline is suddenly removed. Can't figure out what I'm doing wrong:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.active').removeClass('active');
$(this).parent().addClass('active');
}
});
});
HTML:
<nav>
<ul>
<li><a class="active" href="#intro" title="Intro">Intro</a></li>
<li>What We Do</li>
<li>How We Do It</li>
<li>Our Modus Operandi</li>
</ul>
</nav>
Any help? Thanks.
I can say what you are doing wrong!! You are removing active class from a tag and then you are adding it to it's parent which is li. So basically what you need to do is add it back to current a and you can do so just by removing .parent() before adding active class and your updated function will be as below:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.active').removeClass('active');
$(this).addClass('active');
}
});
});
This one is simpler and it does the job:
$('nav li').click(function(e) {
e.preventDefault();
$('nav li a.active').removeClass('active');
$('a', this).addClass('active');
});
Fiddle here.

Menu with collapsable submenus on jQuery

I'm trying to make menu with collapsable submenus.. I'm very new to jQuery) My code:
<script type="text/javascript">
$(document).ready(function(){
$('#list> li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});
$('#list> li').toggle(function(){
$(this).find('ul').slideDown();
}, function(){
$(this).find('ul').slideUp();
});
});
</script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"/>
<ul id="list">
<li>SUBMENU1
<ul>
<li>M11</li>
<li>M12</li>
<li>M13</li>
<li>M14</li>
</ul>
</li>
<li>SUBMENU2
<ul>
<li>M21</li>
<li>M22</li>
<li>M23</li>
<li>M24</li>
</ul>
</li>
</ul>
It works fine now, but I want all opened submenus to be closed automatically when I click on another submenu.. So there will be only one opened submenu at a time.
$('#list > li').siblings().find('ul').hide();
$('#list > li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$(this).siblings().find('ul').slideUp();
$(this).find('ul').slideDown();
});
Demo:
http://jsfiddle.net/2QKe9/
Updated Demo:
http://jsfiddle.net/2QKe9/2/
Try this way
$(document).ready(function(){
$('#list> li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});
$('#list> li').click(function(){
if($(this).find('ul').is(':visible'))
{
$(this).find('ul').slideUp()
}
else
{
$(this).siblings().find('ul').slideUp()
$(this).find('ul').slideDown();
}
});
});
DEMO

how to find div with class inside in li with jquery

i have this HTML code
<ul>
<li>test1
<div class="sub-menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
<li>test2</li>
<li>test3</li>
<li>test4
<div class="sub-menu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
</li>
</ul>
that div.sub-menu has hidden in css.
i want when hover in a find div that inside in parent li and show it,
i try in jquery but when hover in a tag show two sub-menu div,
i want when hover in test1 show div.sub-menu that have 1,2,3,4
and when hover in test4 show div.sub-menu that have a,b,c,d
You can attach a handler for the mouseenter and mouseleave events that manipulates the associated sub-menu, for example like this:
$(document)
.on("mouseenter", "ul > li > a", function() {
$(this).siblings(".sub-menu").show();
})
.on("mouseleave", "ul > li", function() {
$(this).children("a").next(".sub-menu").hide();
});
This snippet installs delegated event handlers that show and hide the sub-menus -- note that the "hide" trigger is different from the "show" trigger because we don't want the menu to disappear as soon as the mouse pointer moves off the anchor. See it in action.
However depending on the desired result you might also be able to do this with pure CSS, e.g.
ul > li > a + .sub-menu { display: none }
ul > li:hover > a + .sub-menu { display: inline-block }
See it in action.
Both versions are structured so that they work also for nested sub-menus.
Simply hide/show the sub-menu on mouseover/mouseout:
Javascript
$("li").mouseover(function(){
$("ul", this).show();
});
$("li").mouseout(function(){
$("ul", this).hide();
});
JS Fiddle: http://jsfiddle.net/EDufY/
If You want to display menu on hover effect of li then i think u don't need javascript.
if u change css then it is posiible.
write your css like.
.sub-menu
{
display:none;
}
li:hover .sub-menu
{
display:block
}
And you have multilevel menu then give them id and repate above procedure
Try this with slide effect, http://jsfiddle.net/SmtQf/1/
$(function () {
$('ul li').hover(
function () {
$('.sub-menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
}, function () {
$('.sub-menu', this).stop(true, true).slideUp(); /*slideUp the subitems on mouseout*/
});
});

How to find a parent's child with jQuery?

I have a menu that looks like this:
<ul class="menu">
<li>zing</li>
<li>
page
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</li>
</ul>
I'd like the sub menu to fadeIn when I hover over the page link.
This is my code so far but for some reason it's not working and I don't think this is the correct way to achieve this anyways:
$('.menu li a:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Anyone know how I can reach my goal according to best standards to make the submenu of the 2nd li to appear when I hover over page?
It would probably be a good idea to have your hovers only apply to menus that have a submenu. You could do something like this:
$('.menu > li > a').filter(function(){
if( $(this).siblings('ul').length ){ return true; }
}).hover(
function(){ $(this).siblings('ul').fadeIn(150); }
,function(){ $(this).siblings('ul').fadeOut(150); }
);
The nth-child selector needs to be applied to the <li> element not the <a>.
$('.menu li ul li:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Fiddle: http://jsfiddle.net/9u3V7/
Check this fiddle out: http://jsfiddle.net/vPLAc/3/
No need for counting children that way. Every list item with a submenu will react to this code.

Categories

Resources