Jquery Issue With Form Select Drop Down Hiding - javascript

I have a drop down menu with form select options for quantity. The drop down works with Jquery hover. So, on hover of the menu icon, the drop down appears, and when you over off of it, it hides. Every time I try to change the select option, it shows the rest of the quantity. But when I hover onto a different option or off of the first select option, the entire drop down menu hides.
$("#navigation #seven").live({
mouseenter:function(){
$(this).find('ul').show();
},
mouseleave:function() {
$(this).find('ul').hide();
}
});

this happens because you are mouseouting the menuitem when you try to get to the select.
you must surround the menu item and the select by a container and apply hover on the div
<div id="hoverable">
<menuitem />
<select style="display:none"><option></option></select>
</div>
and then, apply the hover to the div
$('#hoverable').hover(function(){
$(this).find('select').show();
}, function(){
$(this).find('select').hide();
});

I'd suggest setting a timeout in the hover off, let's say a couple hundred ms. In your menu, set a flag true when you hover on it, and false when you hover off. So, if your menu icon's hover off sees that flag as true, it doesn't hide the drop down menu.
Example:
var overMenu = false;
$(menuItem).hover(
function() {
$(dropDownMenu).show();
},
function() {
setTimeout(function() {
if ( !overMenu )
$(dropDownMenu).hide();
}, 200);
}
);
$(dropDownMenu).hover(
function() { overMenu = true; },
function() {
overMenu = false;
$(this).hide();
}
};

Got it!
var hover_off = false;
var hover_count = 1000;
$("#navigation #seven").live("mouseover",function(){
hover_off = false;
$(this).find('ul').show();
});
$("#navigation #seven").live("mouseout",function(){
hover_off = true;
setTimeout(myMouseOut, hover_count);
});
function myMouseOut() {
if (hover_off) {
$("#navigation #seven").find('ul').hide();
}
}

Related

disable on click animation to deselect choice

I have a button that does a "flyin" animation when click. But if the user clicks the button to deselect their choice i need to disable the animation.
The class changes when they have selected their choice from ".simple-button" to ".simple-button active".
jQuery(document).ready(function ($) {
$(".simple-button").on('click', function () {
//Scroll to top if cart icon is hidden on top
$('html, body').animate({
'scrollBottom': $(".view-my-beds").position().top
});
//Select item image and pass to the function
var itemImg = $(this).parent().find('img').eq(0);
flyToElement($(itemImg), $('.view-my-beds'));
});
});
It my experience, it's best to add a class on click. This means we can detect if it's in use, thus - making your problem simple to solve:
$('.simple-button').on('click', function ()
{
if (!$(this).hasClass('active')) {
$('html, body').animate({
'scrollBottom': $('.view-my-beds').position().top
});
var itemImg = $(this).parent().find('img').eq(0);
} else {
// do whatever without animation
}
})

Show/hide animation

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.

How to use $.hoverIntent and setTimeout together?

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);
});

jQuery toggle class and change it on click

I have the following code in my JS file:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
Now I need to make it so that the part under the // problem area starts to work. I reckon there's a toggleClass in jQuery, right? Some advanced conditions could do the trick, however I'm still learning and I need some help. I also need to find a way to animate() the .menu-container div whether the button state is expand or collapse:
If the button was clicked while it had the expand class
animate the menu from bottom to top with 98px;
If the button was clicked while it had the collapse class
animate the menu from top to bottom with 98px.
EDIT - JSFIDDLE:
jsfiddle.net/rcdhnh7L
Try it like this instead. Don't use e as the var for jQuery, that's just strange. And I simplified the problem area to directly grab the elements you want instead of iterating an existing collection.
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
Or this should work as well:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});

menu should hide when not being hovered over with timeout

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.

Categories

Resources