We Keep Coding

Mouse out event doesn't move back outside the button

I have a button and when you hover over it, it shows some text and 2 more buttons but when I move my mouse out of it, it still stays on the hover. How do I make my code work so that it works on mouse out?
This is my Javascript:
var option1Button_Mouseout = function() {
console.log('option1Button_Mouseout()');
$('laStyle-option1-button')[0].innerHTML = outputTag;
};
var attachOption1ButtonListeners = function() {
console.log($('laStyle-option1-button')[0]);
$('laStyle-option1-button')[0].addEventListener('mouseover', this.option1Button_Mouseover);
// When you mouse out of the button it brings it back to the original
$('laStyle-option1-button')[0].addEventListener('mouseout', this.option1Button_Mouseout);
};
window.onload = function() {
this.attachOption1ButtonListeners();
};
this is what it currently looks like:
https://media.giphy.com/media/9A6MoIdWBiZVFtcHyW/source.mp4
See when I hover over it it shows text and 2 buttons, when I mouse out it should go back to the picture of the hand.

Sind it is not clear what your methods are doing, consider this example:
HTML
<div id="myDiv">
<div id="myDiv1"/>
</div>
JavaScript
$('#myDiv').on("mouseover mouseenter ", function (e) {
$("#myDiv1").show();
});
$('#myDiv').on("mouseleave mouseout", function (e) {
$("#myDiv1").hide();
});
When entering the parent div the inner div will be shown. When leaving the parent div the inner div will be hidden. Also using .on as you are using jquery.
Here is the JSFiddle: https://jsfiddle.net/GR8sk/21/

Since you're already using jQuery I would use its Mouseenter and mouseleave events like so:
$("document").ready(function(){
$(".laStyle-option1-button img").mouseenter(function(){
$(this).attr('src','https://media.giphy.com/media/xUOwGdPZ0chBWiQ6Ri/giphy.gif');
});
$(".laStyle-option1-button img").mouseleave(function(){
$(this).attr('src','https://media.giphy.com/media/l4pTgiQB2e2dpuKs0/giphy.gif');
});
});
Couple things to note:
You did not add a '.' to the beginning of your jQuery reference to laStyle-option1-button (look at how the period goes before) because its a class attribute.
You are performing unnecessary event listener loading. While this can be helpful for binding to click events, I would just use the 'bind' method to bind functions to click events:
$( "#btnButton" ).bind( "click", myFunction);
You need to change either the 'src' attribute of the image, or just remove the button completely and replace with another one. The former is better performing.

Why is my fadeToggle looping on one certain class?

I am trying to create three clickable divs, one to open, and two to close a popup window. One of the "close" divs works like a charm, however the other loops the fadeToggle. The looping class is .exit (upper left corner, grey box).
Please see JSFiddle; http://jsfiddle.net/StudentEric/zx221ssy/
´$(".maincontainer, .opaquebg").hide();
$("#orange, .exit, .opaquebg").click(function(){
$(".maincontainer, .opaquebg").fadeToggle(500);
});
});´
What have I done wrong?

It is because you are binding the same event for .opaquebg and .exit and .exit is child of .opaquebg. So if you do not stop the #orange click event event, it is going to trigger the event twice just like what you are experiencing right now. Try
e.stopPropagation();
inside of your click event like:
$("#orange, .exit, .opaquebg").click(function(e){
e.stopPropagation();
$(".maincontainer, .opaquebg").fadeToggle(500);
});
Here is your updated fiddle: http://jsfiddle.net/zx221ssy/1/
As a side note, you do not need to fadeToggle your .maincontainer child element since you are already fade toggling your parent .opaquebg. So your code can look like this:
$(function(){
$(".opaquebg").hide();
$("#orange, .exit, .opaquebg").click(function(e){
e.stopPropagation();
$(".opaquebg").fadeToggle(500);
});
});

jQuery - remove element on blur BUT catch click on his children

I have following code:
$('#myEl').blur(function(){
$(this).remove('.children');
});
But the children element have links inside, with another jQuery actions which doesn't trigger because the .children is removed on blur, which I guess is triggered before the click action. Simple example:
Children is visible and #myEl have focus
I click on the children link
#myEl loses his focus
Children element is removed
Children link action is not triggered, because I guess link is not present anymore
How to solve this? I was trying to delay remove:
$(this).delay(100).remove('.children');
With no luck.

If you are working with the delay way, you can't use jQuery .delay() since it only work on queued element (with animation).
You can use setTimeout :
$('#myEl').blur(function(){
var $this = $(this);
setTimeout(function(){
$this.remove('.children');
}, 100)
});

I've tried it with mousedown event and it worked fine. I don't thing adding a delay is always a good option.
<input type="text" id="myEl"></input>
<div class="children" >div child</div>
<script>
$('#myEl').blur(function(e){
$('.children').remove();
});
$(".children").mousedown(function() {
window.open('http://www.google.com')
});
</script>
And if you really want to add the click event for a specific reason then you can try this:-
$('#myEl').blur(function(e){
if(mousedown){
window.open('http://www.google.com');
mousedown = false;
}
$('.children').remove();
});
$('.children').click(function(e){
window.open('http://www.google.com')
});
$(".children").mousedown(function() {
mousedown = true
});

what about simply making the child elements hidden after a click? Or maybe even having the child itself remove all children from its parent container after it has processed the click?
$('#myEl').blur(function(){
$(this).children('.children').hide();
});
$('.children').on("click",function(){
// perform your click-code actions here
alert("I did it!");
// now remove your child elements from the parent
$(this).parent().children('.children').remove();
});

Can't hide popup when clicked on draggable object

So here is my fiddle
http://jsfiddle.net/C4CcA/4/
The problem is that I am not able to hide the yellow popup when I click on div2 (because it is draggable). If I can catch the event triggered when clicked on div2 will be much better.
Any work around?

add this
$("#div2").draggable().click(function(ev) {
if (ev.target === this) {
$(this).focus();
}
});
otherwise you can use delegate or on

A small work around
$(function(){
$("#div2").draggable();
$("#txtbox").click(function(event){
event.stopPropagation();
$("#colorpicker").show();
});
$("#txtbox").blur(function(){
$("#colorpicker").hide();
});
$('#div2').click(function() {
$("#colorpicker").hide();
});
});
I am just stopping the propagation to div2 when you click on textbox. Otherwise it will hide the colorbox again.

I managed to do it with mouseDown event
$("#div2").mousedown(function() {
$("#colorpicker").hide();
$("#txtbox").blur();
});
The fiddle is here - http://jsfiddle.net/C4CcA/19/

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.