Javascript Menu on hover event - javascript

I am trying to make a drop down menu work to where when you hover over the menu, it drops down and then on exiting the menu it scrolls back up.
the site I am working on is www.adventuresdev.info/give and the menu is the options titled people, places, projects.
Right now they are set to .click
Here is the .js info
$(document).ready(function ()
{
$('img.menu_class').click(function ()
{
$('ul.the_menu').slideToggle('medium');
});
$('img.menu_class2').click(function ()
{
$('ul.the_menu2').slideToggle('medium');
});
$('img.menu_class3').click(function ()
{
$('ul.the_menu3').slideToggle('medium');
});
$('img.menu_class4').click(function ()
{
$('ul.the_menu4').slideToggle('medium');
});
});

Use jQuery's hover() function.
Syntax: .hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.
Change your code for this:
$(document).ready(function ()
{
$('img.menu_class').hover(function(){$('ul.the_menu').slideToggle('medium');},function(){$('ul.the_menu').slideToggle('medium');});
$('img.menu_class2').hover(function(){$('ul.the_menu2').slideToggle('medium');},function(){$('ul.the_menu2').slideToggle('medium');});
$('img.menu_class3').hover(function(){$('ul.the_menu3').slideToggle('medium');},function(){$('ul.the_menu3').slideToggle('medium');});
$('img.menu_class4').hover(function(){$('ul.the_menu4').slideToggle('medium');},function(){$('ul.the_menu4').slideToggle('medium');});
});
Regards

Use the jquery hover() event. See this link for example and how to use it. http://api.jquery.com/hover/

Related

How would I go about refactoring multiple click events?

I am trying to be more concise with my code, and know there has to be a better way to write this snippet. Any thoughts or tips out there for refactoring?
For context, these click events control divs that popup on respective element click, and exit on another button click.
$('.about-link a').on('click', function() {
$('#pop1').addClass('pop-wrap-show');
$('.pop-container').addClass(' animated bounceInUp');
});
$('.hero-image').on('click', function() {
$('#pop2').addClass('pop-wrap-show');
$('.question-form-container').addClass('animated bounceInUp');
});
$('.exit-button').on('click', function() {
$('.pop-wrap').removeClass('pop-wrap-show');
});

CSS transitions playing too many times; Added via jQuery

So I have 2 divs, one of them being hidden on load using jQuery .hide()
One div is id is menus and the other is prix-fix-menu
I want to fade and slide between the 2 with button clicks. Its a restaurant menu, so I want to smoothly scroll to the different sections of the menu (such as apps, entrees, dessert etc.) but then if the user clicks the Prix Fix button, the page will fade and slide out the regular menu and fade and slide in the Prix Fix menu. If they have the Prix Fix menu open, I want any of the links OTHER THAN the Prix Fix link, to take the user back to the main menu page, sliding out the Prix Fix and sliding in the regular menu.
To accomplish this, Im just dynamically adding and removing classes from Animate.css. The problem is that the animations keep playing more than once (even though Im using .one() method) . I believe it may be because Im listening to the animationend event to then play another animation causing a loop. But whats weird is that it plays it exactly 4 times, not infinitely.
Here's the javascript:
$('#prix-fix-menu, #catering-menu').hide();
$("a[href='#prix-fix']").on('click', function () {
$('#menus').removeClass().addClass('animated fadeOutLeft');
$('#menus').one('animationend webkitAnimationEnd', function () {
$("#menus").hide();
$('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight');
});
});
$("a:not(a[href='#prix-fix'])").on('click', function () {
$('#prix-fix-menu').removeClass().addClass('animated fadeOutRight');
$('#prix-fix-menu').one('animationend webkitAnimationEnd', function () {
$("#prix-fix-menu").hide();
$('#menus').show().removeClass().addClass('animated fadeInLeft');
});
});
I also have a smooth scroll script (positioned after the previous script in at the bottom of the tag) working with the anchor links as well. Putting this here just in-case this is whats causing the problem even though I dont think so:
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
If more information like CSS or HTML are needed then let me know and Ill added but there's quite a lot of markup for the menu because of all the items.
Link to the live project: Project
Thanks in advance!
Following this CODE1
CODE1
$('#prix-fix-menu, #catering-menu').hide();
$("a[href='#prix-fix']").on('click', function () {
//add this line
$('#prix-fix-menu').unbind('animationend webkitAnimationEnd');
$('#menus').removeClass().addClass('animated fadeOutLeft');
$('#menus').one('animationend webkitAnimationEnd', function () {
$("#menus").hide();
$('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight');
});
});
$("a:not(a[href='#prix-fix'])").on('click', function () {
//add this line
$('#menus').unbind('animationend webkitAnimationEnd');
$('#prix-fix-menu').removeClass().addClass('animated fadeOutRight');
$('#prix-fix-menu').one('animationend webkitAnimationEnd', function () {
$("#prix-fix-menu").hide();
$('#menus').show().removeClass().addClass('animated fadeInLeft');
});
});
your code may be caused multiple binding animationend webkitAnimationEnd, so animationend webkitAnimationEnd unbind before start animation.
WHY
Problem is animationend webkitAnimationEnd. animationend and webkitAnimationEnd is different event.
In your case, you tried to add two event at the same time. so another event leaves after trigger animation end. You can easily understand about this situation. Try following CODE2.
CODE2
$('#prix-fix-menu, #catering-menu').hide();
$("a[href='#prix-fix']").on('click', function () {
$('#menus').removeClass().addClass('animated fadeOutLeft');
$('#menus').one('webkitAnimationEnd', function () {
$("#menus").hide();
$('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight');
});
});
$("a:not(a[href='#prix-fix'])").on('click', function () {
$('#prix-fix-menu').removeClass().addClass('animated fadeOutRight');
$('#prix-fix-menu').one('webkitAnimationEnd', function () {
$("#prix-fix-menu").hide();
$('#menus').show().removeClass().addClass('animated fadeInLeft');
});
});
In CODE2, remove only animationend event. It seems to work fine. But it has still problem when you click repeatedly same button. To work CODE2, you have to filter for user to click repeatedly same button using if-statement.

Dynamically created div behavior on button click

I went through many post from SO but not able to relate with my scenario.
I have this code on button click. by which User can create as many div on runtime as he wants to on UI.
$('#adddiv').click(function () {
debugger;
$('#main').append('<div class="ara-dynamic-div">
<div class="box box-solid bg-light-blue-gradient">
</Div></div>');
});
code to get buttonclick event from that div
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
function showMakeAndHold(obj) {
alert(obj);
$('.ara-dynamic-div').fadeOut();
}
Now the problem is that I have to create multiple dynamic div. and each div will have button to close itself. When I call this function it will close all created div's instead of the one which button is clicked.
I am not able to find the proper div by which request for close come. I am new to DOM and JQuery. not able to relate the things
First of all, if you're using multiple divs you shouldn't give the close button an ID, but a class instead (let's say, .close)
Next you can use event delegation to find the correct element:
$(document).on('click', '.ara-dynamic-div .close', function( event ) {
$(this).closest('.ara-dynamic-div').fadeOut();
} )
The delegator handles all click events in any .ara-dynamic-div .close button, catching them all and allowing you to use $(this).closest(...) to get to the parent container.
Edit: Corrected a mistake
You can use jQuery's .closest() function.
function showMakeAndHold(obj) {
alert(obj);
$(obj).closest('.ara-dynamic-div').fadeOut();
}
JSFiddle
Replace this:
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
by this:
$(document).on('click', '#remove', function () {
$(".ara-dynamic-div").not($(this).parents(".ara-dynamic-div")).fadeOut(function () {
$(this).remove();
});
});
Here is the JSFiddle demo
What the code does is that it remove all other .ara-dynamic-div except the one for which the button was clicked.

jquery selectable and right click

I am using a jquery selectable as shown below.
//Selectable Functionality
$(document).ready(function () {
$("#Selectable_Positions").selectable({
selected: function (event, ui) {
dostuff();
}
})
})
It is working correctly however only left click will cause the select event to fire. I am trying to make it so that right click will as well. I have tried adding the code below and the alert fires but the selected item does not change.
$(document).ready(function () {
$('#Selectable_Positions').mousedown(function () {
$('#Selectable_Positions').trigger('selectableselected');
alert('foo');
})
})
How can I programatically change the selected item in the mousedown event function?
edit
Updated eventname as per Ian's suggestion below.
I have created a jsfiddle showing what I am trying to achieve and the triggered event not firing on right click. Does anybody know how to make this work? It would be greatly appreciated
http://jsfiddle.net/Jzjdm/
The correct event name is "selectableselected". So use:
$('#Selectable_Positions').trigger('selectableselected');
Reference:
http://api.jqueryui.com/selectable/#event-selected
Ended up writing my own select function and calling it on right click. Not sure what is up with that event.

Jquery hover vs. click expandable menu

A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:
<script type="text/javascript">
jQuery('.nav-add li.level0, .nav li').hover(
function(){
jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
},
function(){
jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
)
jQuery('.nav-widget').hide();
</script>
Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?
I tried replacing .hover with .click or .mouseup to no avail.
Assuming you just want to toggle the hover behavior by click instead of hover you can try something like this.
jQuery('.nav-add li.level0, .nav li').click(function(){
if(!$(this).data('clicked')){
jQuery(this)
.data('clicked', true)
.children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
.addClass('inSlide')
.slideToggle(700,function(){
});
}
else{
jQuery(this)
.data('clicked', false)
.children('.nav-widget, ul:not(.active)')
.delay('2000')
.slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
});
jQuery('.nav-widget').hide();
The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.
jQuery('.nav-add li.level0, .nav li').click(
function(){
jQuery(this).children('.nav-widget:not(.inSlide),
ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
}

Categories