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.

Set focus to element after slideToggle removes display:hidden attribute with jQuery

So I have looked at a bunch of examples and still cannot seem to figure this one out. I have an element that I am hiding "display:none" until it is expanded by a link using jQuery slideToggle. Working but I need the focus to go to the new element div. I've tried a bunch of examples and nothing seems to be working so I'll post it here.
Here is the fiddle:
JS FIDDLE
So on click of this link here:
<div><p>Blah Blah <a id="whyDivLink" class="staticLinkHelper" title="Wblah blah bl title" style="color: #8f0222; text-decoration: underline">Click Me?</a></p>
</div>
I am trying to do two things, well three but two would be marvelous.
1. Scroll to this DIV which is just a bit further down the page.
2. Focus on the text that is now showing.
Apparently because the node is hidden, then it will not focus to it or something to that affect and it has nothing to scrollTo or when I have tried it just scrolls all the way to the top. But I have a fixed header so that does not work because then it is just hidden. So what I have now is basically working and scrolling to the div and from what I can tell... focusing on it. But I need to set it a ways from the top and when I try it breaks the scrolling. Any one see what I am doing wrong?
$(function() {
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
$("#whyDiv").slideToggle("slow");
});
});
Any help would be appreciated

Looks like when you apply display:none initially to the div, clicking on the a link won't lead user to the targeted div anymore. To fix this, you can try using code to hide the div initially using slideToggle, of course the initial state of the div is display:block, slideToggle will hide it for you instead of setting display:none initially while clicking on the link will work expectedly (jump to the targeted div).
JS:
$(function() {
$("#whyDiv").slideToggle("slow"); //add this line to hide it initially
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
//append .focus() to focus the text
$("#whyDiv").slideToggle("slow").focus();
});
});
Updated Demo.

Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop

It seems that an input element loses a lot of functionality when put into an element with draggable="true". This only seems to occur in firefox.
See my jsfiddle:
http://jsfiddle.net/WC9Fe/3/
Html:
<div id="drag" draggable="true">
Drag this div <br />
<input id="message" type="text" />
</div>
<div id="drop">
Drop area
</div>
JS:
$('#drag').on('dragstart', function(e){
e.originalEvent.dataTransfer.setData('Text', $('#message').val());
e.originalEvent.dataTransfer.effectAllowed = 'move';
});
var drop = $('#drop');
drop.on('dragover', function(e){
e.preventDefault();
});
drop.on('dragenter', function(e){
e.preventDefault();
});
drop.on('drop', function(e){
alert('Target succesfully dropped: ' + e.originalEvent.dataTransfer.getData('Text'));
e.preventDefault();
});
Now try to select text in the input using firefox. Seems impossible. Try the same in IE/Chrome. Seems to work just fine.

As far as I know this is a known bug in FF. A quick (and "dirty" workaround) would be to remove the draggable attribute on text input focus event, add it again on text input blur event, and disable text selection on #drag div to enable dragging once you clicked outside the focused input (clicking on #div directly).
Updated fiddle here.
Sample code:
JS:
$('#message')
.on('focus', function(e) {
$(this).closest('#drag').attr("draggable", false);
})
.on('blur', function(e) {
$(this).closest('#drag').attr("draggable", true);
});
CSS:
.disable-selection {
/* event if these are not necessary, let's just add them */
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
/* this will add drag availability once you clicked the
#drag div while you're focusing #message div */
-moz-user-select: none;
}
Hope it could help you.

See Firefox defect.
As an alternative, setting the draggable="false" on input focus event and replacing back to draggable="true" on input blur event works.
See jsfiddle for an example without any framework.
HTML:
<div draggable="true" id="draggableDiv">
<textarea onfocus="onFocus();" onblur="onBlur();">Inside draggable (FIXED)</textarea>
</div>
JS:
onFocus= function(e) {
document.getElementById("draggableDiv").setAttribute("draggable", "false");
}
onBlur= function(e) {
document.getElementById("draggableDiv").setAttribute("draggable", "true");
}

I used the onMouseEnter and onMouseLeave functions on the textarea to set the div draggable only when the mouse is outside the textarea.
I did this because I needed the focus to stay in the edit fields while dragging and dragging itself does not trigger a focus event.

I have also found using onmouseenter and onmouseleave to toggle the draggable attribute works better because it places the cursor in the input box where you actually click. When using onfocus/onblur, the cursor always goes to the start or end of the text even if you click in the middle.

If you are like me and come across this issue, and are using Sortable.js, you can use the filter option to specify elements that won't trigger dragging, and thus allow the input to operate normally.
JQuery:
$('#my-sortable').sortable({
filter: ".my-text-input", // Or whatever class you specify
preventOnFilter: false // Allow the input to operate normally
});
You can also find this information from the list of Sortable.js options found here:
https://github.com/SortableJS/sortablejs

Void JS Click in Pop-up area of "lightbox"

I'm making a super simple "lightbox" that pops up with a dialog box, and a dimmed background.
My problem is, I want the overlay to disappear when the user clicks on the dimmed background, but not if they click in the dialog box area.
My approach so far has been this:
I added a class with "display:none;" to the the wrapper so it would disappear if clicked. Of course, if you click in the #dialogBox this makes the overlay disappear as well. Is there any way to tell it to return the click false in the dialogBox area? Or a better way to approach this?
<div id="overlay" onclick="$(this).addClass('displayNone');">
<div id="dialogBox">
<p>Lorem ipsum</p>
</div>
</div><!-- /#overlay -->
Thank you!

Remove the inline onclick attribute/handler, and bind the event in JavaScript:
$("#overlay").on("click", function (e) {
if (!$(e.target).closest("#dialogBox").length) {
$(this).addClass('displayNone');
}
});
DEMO: http://jsfiddle.net/A7rNE/
This will check if the click came from anywhere within the #dialogBox element - if it didn't (note the ! in the if statement), it runs the .addClass() part.
References:
.on(): http://api.jquery.com/on/
.closest(): http://api.jquery.com/closest/

This should prevent the click event from bubbling up to whatever element handles closing the lightbox:
$('#dialogBox').click(function(e) {
e.stopPropagation();
})