I am using hoverIntent plugin for my horizontal drop down navigation menu as I want few millisecond delay before opening the submenu associated with current main menu. Also I have a requirement that opened menu should not get closed immediately as and when user moves mouse pointer away from currently opened menu.
Fiddle link: https://jsfiddle.net/vijayP/tbg2x5h7/6/
So I have come up with following code:
$(document).ready(function(){
var config = {
over: function () {
$(this).addClass("show");
},
timeout: 300,
out: function () {
var _this = $(this);
setTimeout(function () {
$(_this).removeClass("show");
}, 300);
}
};
$("ul.drop_menu li").hoverIntent(config);
});
Here menu is getting opened (adding show class) after 300 millsec. And on hover out; 300 millisec delay have been added to avoid sudden close of menu. This code works fine with no issue. The problem I am observing is:
Problem: If user moves away from menu then I want 300 millisec delay before closing the submenu. But if user moves cursor from 1st main menu to 2nd main menu; then I want to close 1st submenu immediately and don't want to show 2 submenu overlapped to each other. In fiddle you can see this overlapping effect when you are on 1st main menu and goes to 2nd main menu.
When you hover over an li element, you can just remove the show class from siblings. See the updated jsfiddle https://jsfiddle.net/tbg2x5h7/7/
$(document).ready(function(){
var config = {
over: function () {
$(this).siblings().removeClass("show");
$(this).addClass("show");
},
timeout: 300,
out: function () {
var _this = $(this);
setTimeout(function () {
$(_this).removeClass("show");
}, 300);
}
};
$("ul.drop_menu li").hoverIntent(config);
});
Related
I have one proplem and I hope you guys could help me with it.
Please check my jsfiddle > myFiddle
If you'll click on the 'Details' button you will see the more information about the item with a simple animation.
You can close this details by clicking on the 'cross' icon on the top left corner and you will see the closing animation.
My proplem:
When current item (container) details is opened (and I am not closing details with the 'cross' icon) if I click on other item 'Details' button the first item (container) details did not hide (with the animation).
If someone could help, that would be amazing
Thanks
jQuery('.btn.desktop').click(function(){
jQuery('.btn.desktop.active').not(this).removeClass('active');
jQuery(this).addClass('active');
jQuery('.direction-container.active').not(this).removeClass('active');
jQuery(this).addClass('active');
// If button has class active
if (jQuery('.btn.desktop').hasClass('active')) {
// If button is active add class active to direction container
jQuery(this).parent().closest('.direction-container').addClass('active');
// If direction container has class active
if (jQuery('.direction-container').hasClass('active')) {
// Show details container
jQuery('.direction-container.active').find('.details-desktop').fadeIn(500);
// Scroll down direction container after 500ms
setTimeout(function () {
jQuery('.direction-container.active').animate({scrollTop: '100px'}, 500);
}, 500);
// Show close button
setTimeout(function () {
jQuery('.direction-container.active').parent().find('.close-details-desktop').fadeIn(500);
}, 1000);
// Hide details container
jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {
jQuery('.direction-container.active').animate({scrollTop: '0px'}, 300);
setTimeout(function () {
jQuery('.details-desktop').fadeOut(300);
jQuery('.close-details-desktop').fadeOut(500);
}, 300);
setTimeout(function () {
jQuery('.direction-container, .btn.desktop').removeClass('active');
}, 500);
});
} else {
}
} else {
}
return false;
});
You are not fading them out.
jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {
That only creates a click handler for an active container button. It doesn't trigger a click. Also, it should not be there somewhere deep inside another click handler, as it will only become active after a click on .btn.desktop
Your code is too complex, making it hard for yourself.
I have a sidebar and I have a button which toggles the sidebar on click. I have a jQuery function which does that. I have a new functionality now, where, if the sidebar is open and the user clicks any of the list items in the sidebar, it toggles back and some function will be excecuted.
The Problem:
When I click the li inside the sidebar, the toggle button is waiting for it's second click (my guess). So if I add toggle on clicking sidebar li, the main toggle button functionality breaks. How do I keep both without affecting each other. I hope I have made myself clear. Here is the code.
JS
// code for sidebar toggle in jQuery
$.fn.toggleClick = function () {
var methods = arguments,
count = methods.length;
return this.each(function (i, item) {
var index = 0;
$(item).on('click', function () {
return methods[index++ % count].apply(this, arguments);
});
});
};
//for opening sidebar
function openSidebar() {
$('#sg-evm-sidebar').animate({
left: 0
}, 300)
$('.container').css({
position: "fixed"
}).animate({
left: 300
}, 300)
$('.content-overlay').delay(300).show();
}
//closing sidebar
function closeSidebar() {
$('#sg-evm-sidebar').animate({
left: -300
}, 300)
$('.container').css({
position: "fixed"
}).animate({
left: 0
}, 300)
$('.content-overlay').delay(300).hide();
}
//$(".empName").on("click", function () {
// closeSidebar();
//});
// calling toggleclick here
$('.toggle-box').toggleClick(openSidebar, closeSidebar);
Here is a JS FIDDLE. I created it from my huge website. So please ignore broken images.
I've updated your fiddle: http://jsfiddle.net/qvksx30g/4/
I've added some basic logic
var sidebarOpen = false;
function toggleSidebar()
{
if (sidebarOpen)
closeSidebar();
else
openSidebar();
}
And then inside openSidebar and closeSidebar I set sidebarOpen.
I also no longer use toggleClick. Instead I'm using:
$(document).on('click', '.toggle-box', toggleSidebar)
.on('click', '.list li', closeSidebar);
You could keep track of the sidebar state (open or close) using a class on the sidebar wrapper ("close" or "open"), and then use this class to determine in your click listener if you have to call closeSidebar or openSidebar.
please look at this fiddle http://jsfiddle.net/rabelais/4X63B/3/
In this fiddle when one hovers on the bars the animations start and stop. I want to know how to change this Jquery code so that the animation starts and stops on click instead? Also when one animation is started and the user clicks on the other bar it will pause to. At the end of each animation a refresh button is display to reset the animation.
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()}, ($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})
});
$('#refresh-1').click(function(){
$('.alt0').width(0);
$(this).hide();
})
$('#one').mouseleave(function(){
$('.alt0').stop()
});
Try
$('#one').on('click', function () { //when first is clicked
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active'); //remove seconds active class
if ($(this).hasClass('active')) { //check if clicked item has active class
$('.alt0').stop(); //stop animation
$(this).removeClass('active'); //remove active class
} else { //if not active or animating
$(this).addClass('active'); //add active class
$('.alt0').animate({ //start animation
width: $(this).width()
}, ($(this).width()) / 2 * 1000, "linear", function () {
$("#refresh-1").show();
});
}
});
$('#refresh-1').click(function () {
$('.alt0').width(0);
$(this).hide();
})
Similarly do the same for second bar. If you dont want another bar to stop animating on click of other bar
just remove the part from code
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active');
$('.alt0').stop(); //stop firstanimation
$('#one').removeClass('active');
Full example http://jsbin.com/UseTIji/1/
First change mouseenter to mouse click
$('#one').mouseenter(function() → $('#one').click(function()
Enter some variable that will change on every click:
var oneIsPlayed = false
$('#one').click(function() {
oneIsPlayed = !oneIsPlayed;
if ( oneIsPlayed ) {
//code to stop
} else {
//code to start animation
}
})
Breaking down the code:
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
This is the part that starts the animation when the mouse enters the element. You can change it so the animation starts on a mouse click by changing it to click:
$('#one').click(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
You can do the same with the stop animation component:
$('#one').click(function(){
$('.alt0').stop()
});
If you want to make a click on one bar stop the animation on the other, you can add a stop method call to the start animation call:
e.g.
$('#two').click(function(){
$('.alt1').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-2").show();
$('.alt0').stop();
})});
It seems that you jsfiddle isn't loading for me at the moment, so I can't test. But I hope that can get you in the right direction.
On click of that div, applying animation. Give some duration for that animation and when the duration get over you can get its callback so then remove that style.
$(document).ready(function () {
$('#service').click(function () {
$("#ServiceSublist").animate({opacity: 0.25,
left: "+=50",
height: "toggle"
}, 1000, function() {
alert("amination complete");
});
});
});
What I am trying to accomplish is having a menu that will show up when a "button" is clicked (the button and menu are in separate elements so the mouse is not hovering over the menu initially).
The menu should hide itself if it is not hovered over within the duration of the timeout (currently it does this, but only the first time it is clicked).
Also, if the element gets hovered over, I would like hide on mouseout and clear the timer and clicking the button again would reset the timeout (it is not resetting maybe?).
I have tried several incarnations and nothing I have tried has behaved correctly and am looking for advice. This his is what I am currently using:
var mytimer = window.setTimeout(function() {$('.menu-div').slideUp(function() {
window.clearTimeout(this.mytimer);
})
}, 5000);
$().ready(function(){
$('#menu-button').click(function () {
$('.menu-div').slideDown();
$(mytimer);
});
$('.menu-div').mouseenter(function() {
window.clearTimeout(this.mytimer);
});
$('.menu-div').mouseout(function() {
$('.menu-div').slideUp(200);
});
});
I think you want something like this (just a guess, because you didn't give any HTML)
$(function(){
var mytimer=0;
$('#menu-button').click(function () {
$('.menu-div').slideDown();
mytimer = setTimeout(function(){
$('.menu-div').slideUp();
}, 5000);
});
$('.menu-div').mouseenter(function() {
clearTimeout(mytimer);
});
$('.menu-div').mouseleave(function() {
$('.menu-div').slideUp();
});
});
DEMO.
I just finished developing this Wordpress theme:
http://www.minnesdiner.com/
Everything is working well, but I'm not 100% happy with the navigation.
The sliding position indicator works smoothly, but I'd like to integrate the hover intent jQuery plugin to prevent the sliding indicator from sliding when the user unintentionally passes over the nav.
Any ideas as to how I could integrate this plugin? I'm currently firing a separate jQuery function for each nav item and passing coordinates to the sliding indicator based on which item is being hovered upon.
Here's my current jQuery code:
$(document).ready(function() {
var $currentpos = $("#menu-indicator").css("left");
$("#menu-indicator").data('storedpos', $currentpos);
$(".current-menu-item").mouseenter(function () {
$("#menu-indicator").stop().animate({left: $currentpos}, 150);
});
$(".menu-item-26").delay(500).mouseenter(function () {
$("#menu-indicator").stop().animate({left: "52px"}, 150);
});
$(".menu-item-121").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "180px"}, 150);
});
$(".menu-item-29").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "310px"}, 150);
});
$(".menu-item-55").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "440px"}, 150);
});
$(".menu-item-27").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "570px"}, 150);
});
$(".menu-item-164").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "760px"}, 150);
});
$delayamt = 400;
$("#header-row2").click(function () {
$delayamt = 5000;
});
$("#header-row2").mouseleave(function () {
$("#menu-indicator").stop().delay($delayamt).animate({left: $currentpos}, 600);
});
});
As you can see, I need to bind mousover and mouseout to separate elements (list-item and containing div).
Thanks!
If all you want to do is avoid the user triggering the slide by mousing over the nav, I would just setTimeout in your hover function to call your sliding code after a certain amount of time has passed, and clear the timeout on the mouseout event. No extra plugin needed.
For example:
var hover_timer;
$('.menu-item').hover(
function() {
hover_timer = setTimeout(function() {
...
}, 500);
},
function() { clearTimeout(hover_timer); }
);
EDIT: by the by, you should be combining all those hover functions into one. You can do something like:
$('.menu-item-26').data('slider-pos', '52px');
$('.menu-item-121').data('slider-pos', '180px');
...
And then in the code to slide, call it back:
$this = $(this);
$('#menu-indicator').stop().animate({left: $this.data('slider-pos')}, 150);
And that's just a start - you can generalize it even more, I bet.