We Keep Coding

I need to animate an image with two different animations triggered by clicking a button in the header and a button in a popup menu

Wordpress + Elementor PRO
Hi guys, I hope you can help me out on this. I need to animate an image with two different animations triggered by clicking a button in the header and a button in a popup menu.
I've made the animations with CSS. Trigger is a js/jquery function on button click.
The first button opens a fullscreen popup menu, the image animates just fine and stays over the popup. Now I need to play animation 2 from the popup to make the image revert to the initial position, I tried replicating what I did before but the animation won't start if the button is in the popup.
When button clicked, fire the script (#start-animazione is assigned to the button)
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('#start-animazione a').click(function(){
DoAnimation();
});
});
Variation for animation 2
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('#start-animazione2 a').click(function(){
DoAnimation2();
});
});
Trigger for Animation (image has ID target) - "ruota" is the css class for animation
function DoAnimation() {
var targetElement = document.getElementById("target");
targetElement.className = "ruota";
}
Variation for animation 2
function DoAnimation2() {
var targetElement = document.getElementById("target");
targetElement.className = "ruota2";
It works fine if the button is in the header, but it doesn't work if the button is inside the popup menu.
I can't get my head around it.
Video of 2nd animation not working

How to allow only one JavaScript 'click' method to be clicked at a time while animation is executing?

When an element is clicked, a div slides off the screen into the center. When another element is clicked, other div in the center slides off the screen and another div slides in.
The issue occurs when another element is clicked before the initial div has the time to slide to the center of the screen.
$('#about').click(function(){
/* makes any visible div slide out and slides in the 'about' div */ });
$('#contact').click(function(){
/* makes any visible div slide out and slides in the 'contact' div */ });
In other words, when you click about and right away click contact then they both slide in inconsistently.
I already tried "attrRemove", "unbind", "off"... and although they work to disable clicks, I cannot enable them again.

One way you could approach this is through the use of a variable that indicates if an action is currently in effect. If you want to queue the event (so you don't entirely disregard the click (as the example below is doing), then the code could be modified to add it to a queue of some sort.
var slideInProgress = false;
$('#about').click(function(){
if (!slideInProgress) {
slideInProgress = true;
$("#slider").slideToggle(5000, function(){
slideInProgress = false;
});
}
});
A very simple, quickly put together Fiddle for this example is here: https://jsfiddle.net/t8tcr0rp/

This code may help.
function aboutFunc() {
$('#about').off('click');
$('#contact').off('click');
//do your stuff
$('#about').on('click', aboutFunc);
$('#contact').on('click', contactFunc);
}
function contactFunc() {
$('#about').off('click');
$('#contact').off('click');
//do your stuff
$('#about').on('click', aboutFunc);
$('#contact').on('click', contactFunc);
}
$('#about').on('click', aboutFunc);
$('#contact').on('click', contactFunc);

Div slide up when click in items inside it

I have a div that slides down (opens) when I click a certain input select. Inside this div, I have some other input selects and my objective is to slide up the div when I click on the rest of the page.
My problem:
The div slides up when I select some item in the input selects inside it, and I don't want this to happen.
Is there some way to slide up the div only when I click outside it?
Why are the selects inside the div making it to slide up as well?
This is my javascript to slide up the div:
$(document).mouseup(function (e) {
var container = $('.myDiv');
if (container.has(e.target).length === 0) {
$(container).removeClass('close');
$(container).addClass('open');
$(container).next().slideUp(200);
}
});

The div slides up when I select some item in the input selects inside
it, and I don't want this to happen.
Is there some way to slide up the div only when I click outside it?
Why are the selects inside the div making it to slide up as well?
Use event.stopPropagation() on the child element(s) to prevent the slide event being triggered by them.
event.stopPropagation - Prevents the event from bubbling up the DOM
tree, preventing any parent handlers from being notified of the event.
Here's a simple jsFiddle and the basic example below.
jQuery:
$('div').click(function(){
$('#slideMeUp').slideUp();
});
$('select').click(function(e){
e.stopPropagation();
});
HTML:
<div>Clicking here will trigger it!
<select>
<option>This won't trigger the click event anymore!</option>
</select>
Clicking here will also trigger it!
</div>
<div id="slideMeUp">Only clicking the outer div will slide me up!</div>

you can check you e.target.id with your container id
$(document).mouseup(function (e) {
var container = $('.myDiv');
if(e.target.id==$(this).attr('id'))
{
if (container.has(e.target).length === 0) {
$(container).removeClass('close');
$(container).addClass('open');
$(container).next().slideUp(200);
}
}
});

If it's specific items that are causing problems, perhaps something like this?
On click tell it to to slideUp your div as long as the clicked item is "not" in the list.
('body').click(function(event) {
if (!$(event.target).is('#id_of_item .class_to_ignore')) {
var container = $('.myDiv');
$(container).removeClass('close');
$(container).addClass('open');
$(container).next().slideUp(200);
}
});

I'd suggest binding mousedown rather than mouseup. There are inconsistencies in behaviour between browsers, this may have something to do with your issue.
You should also add some logic to check the clicked element isn't the div itself, clicking just outside of an input, but still inside of the div would currently cause the slideUp to occur.
if (!container.has(e.target).length && !container.is(e.target)) {
...
}
Other than that, it should work fine.
Have a fiddle

How to make bootstrap tooltip remain visible till the link is clicked

I have a link which I am going to use as notification when a user has some new notification I am going to notify the user by showing a tooltip(twitter bootstrap tooltip). What I want to achieve is, that tooltip should remain visible till the user clicks the link. once the user clicks the link, the tooltip should destroy.
this is what I have till now, http://jsfiddle.net/testtracker/QsYPv/
HTML
<p>Notification.</p>​
JavaScript
$('p a').tooltip({placement: 'bottom'}).tooltip('show');​
What's happening there is, tooltip stays visible till you hover it, and takes its default behaviour (show on hover) once you hover it.
I hope I have given proper info and cleared what I want to do.

Here is the solution http://jsfiddle.net/testtracker/QsYPv/8/
Added the option "trigger"
$('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');
then, with this line
$('p a').on('click',function(){$(this).tooltip('destroy');});
destroy tooltip on click.

You can add a variable to trigger off the mouseleave event to re-show the tooltip, and then as you said in your comment, just destroy the tooltip when clicked, so it doesn't show when you mouseover again:
var clickedNotify = false;
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
$('p a').mouseleave(function() { if (!clickedNotify) { $('p a').tooltip({placement: 'bottom'}).tooltip('show'); } });
$('p a').click(function() { clickedNotify = true; $(this).tooltip('destroy'); });
This way, the tooltip is always shown, even after a mouseleave, until the link is clicked. After the link is clicked, the tooltip is destroyed, and still won't generate javascript errors on the page on mouseleave.

jquery menu, hover and display:none

I have this menu http://jsbin.com/useqa4/3
The hover I think works correct, but what I want is the normal: when the user's cursor isn't on the "Solution" item or on the submenu then I want the div #submenuSolutions to return in "display:none".
How can I achieve this?

If you read the jQuery api more carefuly you will see that the hover function can take handle two events http://api.jquery.com/hover/
$("document").ready(function() {
$("#menuSolutions a").hover(function () {
$("#menuSolutions").addClass("menuHover");
$("#submenuSolutions").show("3000");
},function() {
$("#menuSolutions").removeClass("menuHover");
$("#submenuSolutions").hide("3000")});
});​
This will work only if your menu is a suckerfish menu.

See Demo
Just added this code to hide it back when mouse leaves it:
$("#submenuSolutions").mouseleave(function(){
$(this).hide();
});
Since submenuSolutions is the id of your panel, you can use the mouseleave event which triggers when mouse leaves the area of element specified.