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.

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

jquery - if field has focus do events

What I'm attempting:
1-On hover of Div1, Div2 appears.
2-Div 2 has a text field.
3-When text field has focus, Div2 remains open even if hover is off Div1/Div2.
4-Clicking anything but Div2 hides Div2
http://jsfiddle.net/7FGK8/
<div id="one"></div>
<div id="two">
<input type="text" id="text">
</div>
$(document).ready(function() {
if(!$('#text').is(":focus")) {
$('#one, #two').hover(function() {
$('#two').toggleClass('k k_b');
});
};
});
The div2 doesn't stay open onfocus, and I don't think I'm going about this the right way.
To me the code is saying:
"If #text doesn't have focus do this.
If #text has focus don't do this."
The div2 hides off hover. Then once it has focus the only way to hide it would be clicking off. I'm not sure how event delegation would come into play here either. Anybody have any suggestions? I was thinking of using onblur to hide (or remove the new class).

First of all, you should hide the elements with opacity: 0 or display: none, this also allows you to animate them properly.
The problem is the order in which things are executed, and that handlers (like .hover) are stored. You wrote:
"when the document is loaded, if #text doesn't have focus, remember to always toggle k and k_b on hover"
So basically you always attach the hover handler.
Here is a more complicated, but working solution, see the fiddle for the slight css and html changes:
$(document).ready(function() {
$('#wrapper').hover(function() {
$('#two').fadeIn(200);
}, function() {
if ( !$('#text').is(":focus") )
$('#two').fadeOut(200);
});
$('#two').on("blur", "input", function() {
if ( !$('#one').is(":hover") )
$('#two').fadeOut(200);
});
});
And the fiddle: http://jsfiddle.net/7FGK8/1/

Get textbox word on mouse pointer

I have textbox/textarea and I want get only one word with mouse pointed. then display that word in a another text box.
Ex: When I over my mouse pointer on one word, it should display in another textbox/textarea (only that word).
I saw many posts with tag, but it is not possible to add in textbox/textarea
Also I need to create function with mouse click,
I need mouse hover function and mouse click function both ways to get word.
See the
Demo and update this

I'm not sure this will be possible with a plain textarea, but here's a way you could do it using a div with 'contenteditable' enabled.
Works quite nicely, see my jsfiddle demo
(note: click outside of the editable area to re-enable highlighting after any edits).
HTML:
<div contenteditable="true" id="editor">
<div>
Content here.
</div>
<div>
More content here.
</div>
</div>
Current word: <span id="word"></span>
Javascript:
var wrapwords = function() {
$('#editor > div').each(function() {
$(this).html($(this).text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});
$('#editor span').hover(
function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
function() { $('#word').text(''); $(this).css('background-color',''); }
);
};
$('#editor').on('focus', function() {
$('#editor span').contents().unwrap();
});
$('#editor').on('blur', function() {
wrapwords();
});
wrapwords();

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