Develop Reference

Double clicks from (document) instead of one to close select dropdown

I have a dropdown list, and I want, if click on the select tag to add the class 'active' to the span tag and remove it if click again. But I also want that if I click on the document page it should remove the class 'active' if it added to the span tag. It work.. but I should double click from the document instead of one to remove the active class..
I'm sure that there are a shorter and better code to do this trick but anyway it work a little like that :)
Any help would be appreciated
Here the basic html:
<select class="qty">
<option>1</option>
<option>2</option>
</select>
<span class="arrow"></span>
Jquery :
jQuery(document).ready(function($) {
var arrow = $('.arrow');
$(".qty").on('click', function(e) {
e.stopPropagation();
if(arrow.hasClass('active')) {
arrow.removeClass('active');
}
else {
arrow.addClass('active');
}
});
$(document).on('click', function(e) {
e.stopPropagation();
if(arrow.hasClass('active')) {
arrow.removeClass('active');
}
else {
return false;
}
});
});
JSFIDDLE

I think the issue with the "double-click" is that when you select an option in the dropdown, it remains focused (browser behaviour). This means you need to click twice, not necessarily double click. First you need to click elsewhere to remove focus from it, and only then the body element can listen to your click.
Not sure what you are trying to do, maybe the is not your best option. You could consider making your own dropdown with a DIV or UL LI elements. However, if you do want to patch the browser behaviour, you could force it to blur (unfocus). You would need to change the trigger to change instead of a click, otherwise it would blur it before you make your selection.
jQuery(document).ready(function($) {
var arrow = $('.arrow');
$(".qty").on("change", function(e) {
e.stopPropagation();
arrow.toggleClass("active");
$(this).blur();
});
$(document).on('click', function(e) {
arrow.removeClass('active');
});
});
Also, note that you can use .toggleClass instead of you if statements and in your case you wouldn't need to check if the .active class is already there, you can simply remove it.
Here's an updated JSFiddle

div onclick with Form and other elements

I want to fix a problem I have attaching an onclick element to a div ( and only to it! )
Please look at following code :
<script>
function goToo(url,idd){
alert(idd);
if (idd=="onlyMe")
window.location=url;
}
</script>
<div id="onlyMe" onclick="javascript:goToo('http://www.google.com', this.id)" style="<-index:-150">
<form><input type="text" name="coap"></form>
<h3>This is an element where click should work!</h3>
<div id="notME">
<h3>In this point it should not work!</h3>
</div>
</div>
I want the onlick to be triggered only in the div clicking.
Please check the example live # http://modacalcio.com/HtmlProblemForm.html
The click is triggered everywhere, expecially in the form input.
Obiovusly I wish to use this without deleting onclick in children nodes, as they have their own onclick that still need to work
Also with jquery I have same problem
any help?

$('#onlyMe').on('click', function(evt) {
if ($(evt.target).parents('#notME').length === 0 && evt.target.id !== 'notME') {
location.href = "http://...";
}
});
example fiddle: http://jsfiddle.net/zhkr2/2/
the idea is to check if the event was triggered on #notME element or inside an element contained in #notME, so I check if an ancestor is that element

just give for 'div' some width
#onlyMe
{
width:
height:
}
and close the div properly .

Advice on how to update navigation code to hide and show hidden div

I currently have a list with one particular link that hides/shows a hidden div. As a link is clicked the class 'active' is removed and added and the hidden div checked to see whether it is visible or hidden and hidden/shown accordingly. This all works ok, but, there is one problem. When I click Square I want to show the #square but when I click it again I want to hide the #square but because Im checking for the .active this cant be done. Can anyone offer any suggestions on how I can update the code so this can be achieved?
JS
$(document).ready(function(){
var square = $('#square'),
test = $('#test');
square.hide();
test.find('a').on('click', function(e){
if( !$(this).hasClass('active') ){
if ( square.is(':visible') ){
square.hide();
}
var id = $(this).data('id');
test.find('a').removeClass('active');
$(this).addClass('active');
if( id === 'square' ){
square.show();
}
}
e.preventDefault();
});
});​
HTML
<ul id="test">
<li>Triangle</li>
<li>Square</li>
<li>Circle</li>
</ul>
<div id="square"></div>​
Fiddle: http://jsfiddle.net/xBuUY/

I made a fork of your Fiddle.
I've moved the block for testing whether the square should be visible or not outside of checking which link should be active. The #square is toggled and not only shown which garanties that it's hidden when it's already active. Just test the Fiddle.
Apart from that I optimized the event-handler: It now uses delegation, which is faster than just the link handler on each of the links. Bubbling of the links is prevented by e.stopPropagation(). I've added this before any other methods or anything else is called for performance reasons.

Move this block of code --
if ( square.is(':visible') ){
square.hide();
}
outside of the hasClass('active') check.

Your logic can be simplified, you're wanting to toggle square regardless of class, so I've removed the square toggle outside of the class test. Try this Fiddle HERE

jQuery - how to hide a DIV element only when clicking outside of it

I have a DIV element that appears when a certain action is performed. For the sake of simplicity, I wrote a very simple routine that mimics the issue I'm running into. The problem I am facing, however, is that when you click inside the DIV element (and outside the textarea), it will hide the DIV anyway.
Here is the code below:
<body>
outside div
<br><br>
make inside appear
<br><br>
<div id='wrap' style='background:red;display:none;padding:10px;width:155px'>
<textarea id='inside'>inside div</textarea>
<div id='inside2'>also inside div -- click me</div>
</div>
</body>
<script>
$(document).ready(function() {
$('#wrap_on').click(function() {
$('#wrap').show();
$('#inside').select().focus();
});
$('#inside2').click(function() {
alert('test');
});
// #inside2 does not work but #wrap does hide
$('#wrap').focusout(function() {
$('#wrap').hide();
});
});
</script>
Or you can tinker with it here: http://jsfiddle.net/hQjCc/
Basically, I want to be able to click on the text "also inside div -- click me" and have the alert popup. However, the .focusout function is preventing it from working. Also, I want to hide the #wrap DIV if you click outside of it.

$(document).click(function(e) {
var t = (e.target)
if(t!= $("#inside").get(0) && t!=$("#inside2").get(0) && t!=$("#wrap_on").get(0) ) {
$("#wrap").hide();
}
});
this should work after all.
http://jsfiddle.net/hQjCc/4/

See this other stack overflow question: Use jQuery to hide a DIV when the user clicks outside of it

How to blur the div element?

I have a dropdown menu inside a DIV.
I want the dropdown to be hide when user click anywhere else.
$('div').blur(function() { $(this).hide(); }
is not working.
I know .blur works only with <a> but in this case what is the simplest solution?

Try using tabindex attribute on your div, see:
Check this post for more information and demo.

I think the issue is that divs don't fire the onfocusout event. You'll need to capture click events on the body and then work out if the target was then menu div. If it wasn't, then the user has clicked elsewhere and the div needs to be hidden.
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>

$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
give the div an id, for instance "menuContainer". then you can check by target.id instead of target.tagName to make sure its that specific div.

Not the cleanest way, but instead of capturing every click event on the page you could add an empty link to your div and use it as a "focus proxy" for the div.
So your markup will change to:
<div><a id="focus_proxy" href="#"></a></div>
and your Javascript code should hook to the blur event on the link:
$('div > #focus_proxy').blur(function() { $('div').hide() })
Don't forget to set the focus on the link when you show the div:
$('div > #focus_proxy').focus()

I just encountered this problem.
I guess none of the above can fix the problem properly, so I post my answer here. It's a combination of some of the above answers:
at least it fixed 2 problems that one might met by just check if the clicked point is the same "id"
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});

.click will work just fine inside the div tag. Just make sure you're not over top of the select element.
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});