We Keep Coding

Avoid hiding a div when selecting text with a wide swipe

I have a div hided that shows and hide cliking on a buttom (toogle). This div also hides whatever you click anywhere in the document.
And finally I also have an stopPropagation click function event on the div so it won't hide when you click on it. All these is working as expected
The input inside the div is a search field that shows results on real time while users are writting and often the users select whatever text they are writting to edit or delete it.
My problem is that when the users are selecting the text and swipe out of the field (while pressing the mouse buttom) the div will automatically hide.
How could I prevent this?
I hope I have explained myself well enough, this may be quiete a confused question.
This is a working example. Just writte anything inside and select it:
$('.input').click(function(e) {
e.stopPropagation();
})
$('.button').click(function(e) {
$('.input').slideToggle('fast');
e.stopPropagation();
})
$(document).on("click", function() {
$('.input').slideUp('fast');
});
html {margin-left:100px;}
.button {
height:50px;
width:50px;
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button">
</div>
<div id="divBuscar" class="input" style="display: none;">
<input type="text" id="txtBuscar" name="txtBus" placeholder="Buscar productos, promociones, novedades...">
<a id="btnBuscar"></a>
</div>
Ty.

I'm ashamed I didn't thought about mousedown property.
it works just changing the script like this:
$('.input').mousedown(function(e) {
e.stopPropagation();
})
$('.button').mousedown(function(e) {
$('.input').slideToggle('fast');
e.stopPropagation();
})
$(document).on("mousedown", function() {
$('.input').slideUp('fast');
});

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.

Mouse hover and click to display text with CSS and JS

Currently I have this: http://jsfiddle.net/TW2Le/95/
I want to be able to click the box to display the text, then click anywhere else to hide the text. One click = show, 2nd click anywhere else = hide. (This part works)
When it is not "clicked", it should show the text when I hover over, but it should not display the text on top of the old text when I hover it while it is clicked.
i am running into a problem, where it displays double the text when I hover over while it is clicked. I have no idea how to disable "hover" while it is under the show condition. It should not repeat the same texts.

http://jsfiddle.net/TW2Le/97/
Try this.
$('.wrap').removeClass('reveal');
$('.wrap').addClass('reveal');
I added these into your jquery so that when "show" is visible, hovering does nothing.

DEMO
JS
$(function() {
$(document).on('click', function(e) {
if ( $(e.target).closest('.wrap').length ) {
$('.show').slideToggle();
$('.noshow').slideToggle();
$(".here").addClass("hide");
}else{
$('.show').slideDown();
$('.noshow').slideUp();
$(".here").removeClass("hide");
}
});
});
Add new CSS rule
.wrap:hover .here.hide {
display:none;
}

jquery hover bubble causing a looping blinking effect

I have a problem with bubbling (i think)
I have an input
On hover I append a div with a click event to the parent of the input, the second hover function is to remove the said appended div.
The problem is, as the overlay is on top of the div i am appending to, when the mouse is over the overlay the mouse out function is called which then triggers the mouse over.. etc etc..
http://jsfiddle.net/N7FFB/
var clear = $('<div class="keyword-clear-icon">').css({
left : $('#searchtext').width() - 20,
}).attr('title','Clear');
$("#dashboard-searchbox #searchtext").hover(
function(){
$(clear).click(function(){
$("input#searchtext").val('');
});
$('#dashboard-searchbox').append(clear);
},
function(){
$('#dashboard-searchbox').find('.keyword-clear-icon').remove();
}
);
Is there a std way of achieving this effect?

Just apply the hover to the #dashboard-searchbox container instead.
http://jsfiddle.net/N7FFB/2/
Javascript
$("#dashboard-searchbox").hover(
function(){
$(clear).click(function(){
$("input#searchtext").val('');
});
$('#dashboard-searchbox').append(clear);
},
function(){
$('#dashboard-searchbox').find('.keyword-clear-icon').remove();
}
);

Instead of using javascript you can use a search type input box:
<input id="searchtext" name="SearchText"
type="search" placeholder="Anywhere or anything…" />
Demo: http://jsfiddle.net/maniator/N7FFB/1/

Trouble with Javascript show when element is outside of the trigger

I am trying to show a div on click on an anchor, the issue is the anchor is inside an element and the div that needs to be shown is outside of this element. There are multiple divs of the same class on the page so I only want to show the associated one.
The markup is:
<div class="wrapper">
<div class="trigger">
Change
</div>
<div class="content">
<p>Content to be shown when Change is clicked</p>
</div>
</div>

Is that what you want to do? (fiddle)
// dom ready
$(function() {
$('a.change').on('click', function() {
// wrapper div
$(this).parent()
.next() // .content div
.show();
return false; // prevent the link to be followed
});
});

With jQuery you can do it like this:
$('a.change').click(function(e) {
e.preventDefault();
$(this).parent().next().toggle();
});
jsFiddle example

is this what you mean?
$(".content").hide();
$("a.change").click(function(){
$(".content",$(this).closest(".wrapper")).show();
});
Live demo :​
http://jsfiddle.net/dfkge/

Got to the parent and get the correct div e.g.
$('a.change').click(function(event){
event.preventDefault();
$(this).parents('.wrapper').children('.content').show()
}
This way you don't have to worry how deeply embedded anchor is, or where is content (before, after) in relation to anchor
Added a jsFiddle, showing divs with different structures, working with same code
http://jsfiddle.net/NWqcq/11/