I have make a script. That open my submenu in the navigation. When you go mouse out of the submenu. The submenu must be closed with a delay of 300ms. But the delay is not working. How can i fix this? This is my script:
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
$(this).find('.submenu').delay(300).hide();
$(this).removeClass("hover");
});
I haven't tested the following code but it should work ...
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
var submenu = $(this).find('.submenu');
setTimeout(function() {
submenu.hide();
}, 300);
$(this).removeClass("hover");
});
You will need to create a setTimeout() method, also, you need to define an object to be used inside of your function $(this) will be null.
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
var object = $(this);
setTimeout(function()
{
$(object).find('.submenu').hide();
$(object).removeClass("hover");
}, 300);
});
Related
how to modify the below code so that not only a click outside the menu, but also scrolling down, will trigger closing the menu?
var closeDelay = 50;
(function($) {
$(window).load(function() {
setTimeout(function() {
$('#main-content, .et-l--footer, .et_menu_container a').each(function() {
$(this).click(function() {
setTimeout(function() {
if ($('.et_mobile_menu').is(':visible')) {
$('.mobile_menu_bar_toggle').trigger('click');}
}, closeDelay);
});
});
}, 1200);
});
})(jQuery);
It's currently live # semita.pl.
Thanks!
All
Following code is not working with Internet Explorer. As I would like render hover event on class in document.load or document.ready event. But i could not succeed
jQuery(window).load(function () {
var maxHeight = 250;
jQuery(".dropdown").hover(
function () {
jQuery("li.firstmenu ul li").removeClass("XYZ");
jQuery("li.firstmenu ul li").removeClass("ABC");
jQuery('.dropdown-menu', this).stop(true, true).fadeIn("500");
jQuery(this).toggleClass('openDemo');
jQuery(this).addClass("active-Demo");
jQuery("div#MegaMenu").find("li.secondLI").removeClass("DEF").addClass("hideJIJO");
//jQuery('.active-global-tab > a').removeClass("default-fontcolorD").addClass("default-fontcolorB");
jQuery('ul.dropdown-menu > li.col-sm-4').each(function () {
jQuery(this).height(maxHeight);
});
},
function () {
jQuery('.dropdown-menu', this).stop(true, true).fadeOut("500");
jQuery(this).toggleClass('open');
jQuery(this).removeClass("active-tab");
//jQuery('.global-nav-item > a').removeClass("default-fontcolorB").addClass("default");
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
you can use window.onload instead.
This method automatically called when page load.
Example
window.onload = function(e){
var maxHeight = 250;
jQuery(".dropdown").hover(
function() {
jQuery("li.firstmenu ul li").removeClass("XYZ");
jQuery("li.firstmenu ul li").removeClass("ABC");
jQuery('.dropdown-menu', this).stop(true, true).fadeIn("500");
jQuery(this).toggleClass('openDemo');
jQuery(this).addClass("active-Demo");
jQuery("div#MegaMenu").find("li.secondLI").removeClass("DEF").addClass("hideJIJO");
//jQuery('.active-global-tab > a').removeClass("default-fontcolorD").addClass("default-fontcolorB");
jQuery('ul.dropdown-menu > li.col-sm-4').each(function() {
jQuery(this).height(maxHeight);
});
},
function() {
jQuery('.dropdown-menu', this).stop(true, true).fadeOut("500");
jQuery(this).toggleClass('open');
jQuery(this).removeClass("active-tab");
//jQuery('.global-nav-item > a').removeClass("default-fontcolorB").addClass("default");
}
);
}
How can I include a close button using jQuery UI toggle function?
$(".login").click(function () {
$(this).hide();
$("#myDiv").toggle("slide", {
direction: "left"
}, 500);
});
My jsFiddle
fiddle: http://jsfiddle.net/AtheistP3ace/TX55G/207/
$(".login, .close").click(function () {
$('.login').toggle();
$("#myDiv").toggle("slide", {
direction: "left"
}, 500);
});
Show/Hide click button after toggle: http://jsfiddle.net/AtheistP3ace/TX55G/208/
$(".login, .close").click(function () {
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () { $('.login').toggle(); });
});
If you want to hide the click prior to showing close and show the click after hiding close you can do this. Although I will point out using the visible/hidden selectors can be bad on performance but I was attempting to not make many changes to your code. You can do this without using them easily.
http://jsfiddle.net/AtheistP3ace/TX55G/209/
$(".login, .close").click(function () {
var hiding = $('.login:visible');
if (hiding.length == 1) {
$('.login:visible').toggle();
}
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () {
if (hiding.length == 0) {
$('.login').toggle();
}
});
});
This is the way I would do it instead of using those special selectors. I would use a class. http://jsfiddle.net/AtheistP3ace/TX55G/211/
CSS:
.hide {
display: none;
}
JS:
$(".login, .close").click(function () {
var login = $('.login');
var hiding = !login.hasClass('hide');
if (hiding) {
$('.login').addClass('hide');
}
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () {
if (!hiding) {
$('.login').removeClass('hide');
}
});
});
$(".login, .close").click(function () {
Demo
I got an element that is slided down by JQuery using .slideDown() method
$('#dropdown_shopping_cart').slideDown(800);
Now i want it to slide up after 6 seconds, but only if there is no hover on the element, if there is an hover, it should not .slideUp().
So far i worked with a timeout that added display:none to the element while i was giving the element´s hover display:block!important; in CSS so it would not get display: none until the hover is over.
JS
setTimeout(function () {
$('#dropdown_shopping_cart').css('display', 'none');
}, 6000);
_______________________________________________________
CSS
#dropdown_shopping_cart:hover {
display: block!important;
}
Now i want to add the .slideUp() to this.
Check this:
var myVar;
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
$("#dropdown_shopping_cart").hover(
function() {
clearTimeout(myVar);
},
function() {
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
}
);
By default shopping cart will slideUp() after 6 seconds, if mouse hover action occured, setTimeOut will be cleared, after mouse leave the shopping cart, setTimeOut will setted automatically
You can clear the timeout on mouseenter and reset it on mouseleave like this:
var hide_div_to;
function hideDiv(){
hide_div_to = setTimeout(function () {
$('#dropdown_shopping_cart').slideUp(800);
}, 6000);
}
$('#dropdown_shopping_cart').slideDown(800,hideDiv());
$('#dropdown_shopping_cart').mouseenter(function(){
clearTimeout(hide_div_to);
});
$('#dropdown_shopping_cart').mouseleave(function(){
hideDiv();
});
Here is a working JSFiddle
UPDATE
If you don't wan't to wait the timeout again when you leave, after the timeout is reached, you can do this:
$('#dropdown_shopping_cart').slideDown(800);
setTimeout(function () {
if(!$('#dropdown_shopping_cart').is(':hover')){
$('#dropdown_shopping_cart').slideUp(800);
}
else{
$('#dropdown_shopping_cart').mouseleave(function(){
$('#dropdown_shopping_cart').slideUp(800);
});
}
}, 3000);
And here is a JSFiddle and here is another one that shows how this can be triggered multiple times.
Id suggest you work with mouseover and a class:
$('#dropdown_shopping_cart').hover(function(){
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$(this).addClass('active');
}
else
{
$(this).removeClass('active');
}
},
function() {
var myVar = setTimeout(function() {
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$('#dropdown_shopping_cart').slideUp()
}
}, 6000);
})
And than in your setTimeout Function you add:
demo: http://jsfiddle.net/yo5gnvy3/7/
$('#dropdown_shopping_cart').hide().slideDown(800, function () {
var events = $._data($(this)[0], "events") || {};
if (events.mouseover === undefined) {
$(this).delay(1000).slideUp()
}
});
I want to make this code applies only at a resolution greater than 643px. If we use " $ (window) .resize (function () {" not working. I'm not good at JQuery syntax, please help.
$(window).resize(function() {
if($(window).width() >= 643) {
function mainmenu(){
$("#nav ul").css({display: "none"}); // Opera Fix
$("#nav li").hover(function() {
$(this).find('ul:first')
.css({visibility: "visible", display:"none"})
.show(500);
}, function() {
$(this).find('ul:first')
.css({visibility: "hidden"});
});
}
$(document).ready(function() {
mainmenu();
});
$(" #nav a").removeAttr("title");
});
$(window).resize(function() {
if ($(window).width() > 643) {
// do something
console.log("width is now larger than 643px");
} else {
console.log("width is now smaller or equal to 643px");
}
});
You can run this code in the console of any page (such as this one), resize it, and watch the output.
It's hard to deduce your problem from the information you've provided, but here's an attempt:
$(document).ready(function() {
var initFn = function(){
if($(window).width() >= 643){
mainmenu();
$(" #nav a").removeAttr("title");
}
}
$(window).resize(initFn);
initFn();
});
function mainmenu(){
$("#nav ul").css({display: "none"}); // Opera Fix
$("#nav li").hover(function() {
$(this).find('ul:first')
.css({visibility: "visible", display:"none"})
.show(500);
}, function() {
$(this).find('ul:first')
.css({visibility: "hidden"});
});
}