We Keep Coding

Hiding div with Javascript

I'm trying to hide a div when the user clicks anywhere outside of the div with id "main".
I am using vanilla Javascript and would prefer not to use jQuery.
The code I have works well but whenever the user clicks inside sub-child div or any text, it also hides the div, which is not the behavior that I want.
window.addEventListener('mouseup', function(event){
var box = document.getElementById('main');
if (event.target != box && event.target.parentNode != box){
box.style.display = 'none';
}
});
<div id="main" style="display: block; background-color: grey;">
<div id="one1">
<div id="one2" style="background-color: red;"><p>when click here should not hide<br><br>when click here should not hide<br>when click here should not hide<br>when click here should not hide</p></div>
</div>
<div id="one3"><p>when click here should not hide</p></div>
</div>
<p>when click here should hide</p>
<div id="xyz" style="background-color: green;"><p>when click here should hide</p></div>
<p>when click here should hide</p>

Hi, hopefully I've understood your question correctly.
When you click on the green and transparent lines you want to hide everything? Or just the div 'main'?
Currently your javascript is adding an event listener 'mouseup'. The event listener's function has an if statement checking to see if you target the 'main' div. The elements that you want to activate the function when clicked, are not in the main div. Your DOM tree is not organised correctly!
I've taken the liberty to adjust your code slightly to what I think you wanted to achieve... Here is a jdFiddle.
jsFiddle
You can also combine the event listener and getElementById with this line of code:
document.getElementById('clickToHide').addEventListener('mouseup', function(event){
This may be an easier method for you to make sure you are pointing to the correct div. Let me know if I got the wrong end of the stick.

You can add a separate listener on the Main div to stop propagation of that event:
window.addEventListener('click', function(event){
var box = document.getElementById('main');
box.style.display = 'none';
});
var box = document.getElementById('main');
box.addEventListener('click', function(event) {
event.stopPropagation();
});
Fiddle: https://jsfiddle.net/jaredk/bu5cjh9v/
This is from an answer here, but that one uses jQuery.

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/

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

How to simply achieve Google Logout kind of "click anywhere to close" kind of functionality?

Here is what my team member was looking for: How to provide a functionality like GMail where you click on your email and it opens up Logout div with some additional user information and when you click anywhere outside of document it closes that box (hides the div)?

The easiest way to achieve this is binding a click handler for the whole document which closes the box and also one for the box. In the box's event you stop the propagation of the click event so:
$(document).on('click', function() {
$('#box').hide();
});
$('#box').on('click', function(e) {
e.stopPropagation();
});
Demo: http://jsfiddle.net/ThiefMaster/JTtXB/
Note that you also need to stop the propagation of whatever click event opens the box or it will be closed again immediately.

It can be achieved using following code:
HTML:
Dharmavir
<div id="user-card" style="display:none">
<p>
Welcome Dharmavir,<br />
ABC Software, Inc
</p>
Logout
<div>
Javascript:
$(document).ready(function(){
// To show user-box
$("#show-card").mouseup(function(){
$("#user-card").show();
// To hide user-box
$(document).mousedown(function(){
$("#user-card").hide();
$(this).unbind("mousedown");
})
});
});
CSS:
#user-card {
height:75px;
width:200px;
border:solid 1px #ccc;
}
JSFiddle for the same can be seen at http://jsfiddle.net/dharmavir/tPdsE/

How to hide a div if user clicks anywhere but a link and the div itself using jQuery?

Ok, so simple question. I have a link which when clicked shows a div. If the user blurs off that link the div is hidden. This is good, but I don't want the div to be hidden if the user clicks on it. So if the user clicks anywhere other than the link or div itself only then should the div be hidden. Right now my code doesn't do this.
JSFiddle:
http://jsfiddle.net/gTkUG/
jQuery:
$('#myLink').click(function(e) {
$('#myDiv').show();
e.preventDefault();
});
$('#myLink').blur(function() {
$('#myDiv').hide();
});
HTML:
<div style="display:none;width:100px;height:100px;border:1px solid red" id="myDiv"></div>
Click Me
So I guess the question is, how to detect blur on two or more events instead of just one?

$('#myLink, #myDiv').click(function(e) {
$('#myDiv').show();
e.preventDefault();
e.stopPropagation();
});
$(document).click(function() {
$('#myDiv').hide();
});
http://jsfiddle.net/gTkUG/3/