Hide div on blur - javascript

I have a jQuery function where when an element is clicked a hidden div shows.
$('.openHide').click(function(){
$(this).next('.hiddenContent').toggle();
});
I need to modify it s that I could close this div if I click back not just on the first element. Possibly on Blur, but I am not sure how to indicate the element...
$('.hiddenContent').blur(function() {
$('.hiddenContent').parent().children('.hiddenContent').hide();
});
Here's my HTML:
<span class="openHide">text here</span>
<div style="display:none" class="hiddenContent">
hidden content here
</div>

On the click on the span the div should be toggled
On the body click the div should be hidden
On the click on the div, the event should not be propagated to the body
On the click on the span the event should not be propagated to the body
$(document).ready(function() {
$('.openHide').click(function(e) {
$('.hiddenContent').toggle();
e.stopPropagation();
});
$(document.body).click(function() {
$('.hiddenContent').hide();
});
$('.hiddenContent').click(function(e) {
e.stopPropagation();
});
});

If .hiddenContent is a div you won't be able to use blur, that only works on text inputs. mouseout may be an alternative, and $(this) is what I think you are looking for in this case:
$('.hiddenContent').mouseout(function() {
$(this).hide();
});
Hide on clicking elsewhere
If you want to hide the div when you click outside the element you must watch for clicks all over the body of the page:
$('body').click(function() {
// Hide all hidden content
$('.hiddenContent').hide();
});
And then provide and exception for when you are clicking on the actually hidden content itself, and when you want to open it:
$('.hiddenContent').click(function(e) { e.stopPropagation() });
$('.openHide').click(function(e) {
$(this).next('.hiddenContent').toggle();
// this stops the event from then being caught by the body click binding
e.stopPropagation();
});

Related

How to toggle windows with buttons and use click away

I have two or more buttons that that showing some content. The idea is to show #Cont11 when i click button .BB11 and hide #Cont11 when i click away or when i click two other buttons. And similarly for the rest. I managed to achieve show/hide when i click on certain button and click away but the windows dont hide when i click another button when the content is showing. Its needed to work on mobiles.
<div id="footer-menu">
<a class="BB11 BottomButton">Button1</a>
<a class="BB12 BottomButton">Button2</a>
<a class="BB13 BottomButton">Button3</a>
</div>
<div id="Content">
<div id="Cont11" class="ContIn">Some content</div>
<div id="Cont12" class="ContIn">Some content</div>
<div id="Cont13" class="ContIn">Some content</div>
</div>
Css:
.ContIn{display: none;}
JS:
$(".BB11").click(function(e){
$(".showing").fadeOut(300);
$("#Cont11").fadeIn(300); //toggle the window
$("#Cont11").toggleClass("showing");
$(this).toggleClass("highlighted");
e.stopPropagation(); //prevent event propagation
});
$(document).click(function(){
$("#Cont11").fadeOut(300); //hide the window
$("#Cont11").toggleClass("showing");
$(".BB11").removeClass("highlighted");
});
$("#Cont11").click(function(e){
e.stopPropagation();
});
/*------------------------------------*/
$(".BB12").click(function(e){
$(".showing").fadeOut(300);
$("#Cont12").fadeIn(300);
$("#Cont12").toggleClass("showing");
$(this).toggleClass("highlighted");
e.stopPropagation();
});
$(document).click(function(){
$("#Cont12").fadeOut(300);
$("#Cont12").toggleClass("showing");
$(".BB12").removeClass("highlighted");
});
$("#Cont12").click(function(e){
e.stopPropagation();
});
/*------------------------------------*/
$(".BB13").click(function(e){
$(".showing").fadeOut(300);
$("#Cont13").fadeIn(300);
$("#Cont13").toggleClass("showing");
$(this).toggleClass("highlighted");
e.stopPropagation();
});
$(document).click(function(){
$("#Cont13").fadeOut(300);
$("#Cont13").toggleClass("showing");
$(".BB13").removeClass("highlighted");
});
$("#Cont13").click(function(e){
e.stopPropagation();
});
use "data-" attributes and only a few classes for each button, that will help you to reduce all the script lines that you wrote. Here's a fiddle for you. This will simplify everything, just one method what works for all buttons. If you want the content to disappear when clicking away, I assume you're trying to create a modal. Because if you check for clicks in "document" it will disable all the other clickable elements. So, put an overlay above the document but behind the content and check for clicks there.
https://jsfiddle.net/tbd5e8cf/1/
$(function(){
$(".BottomButton").on("click", function(e){
e.stopPropagation();
// HIDE ALL ELEMENTS
$(".ContIn").fadeOut(); // IF YOU LIKE USE removeClass(); INSTEAD hide(); FOR YOUR CUSTOM CSS.
// SHOW THE RELATED CONTENT TO THIS BUTTON
var cont = $(this).attr("data-toOpen");
console.log(cont);
$("#"+cont).fadeIn(); // IF YOU LIKE USE show(); INSTEAD fadeIn(); FOR YOUR CUSTOM CSS.
})
$("#Content").on("click", function(e){//CHECK FOR CLICK
e.stopPropagation();
// HIDE ALL ELEMENTS
$(".ContIn").fadeOut();
})
})

How to hide element when click outside area using javascript?

How to hide element when click outside area using javascript ?
http://jsfiddle.net/a3MKG/35/
I try like this but not work
<script>
function showDiv(id) {
$("#div1").toggle();
$(document).click(function() {
$('#div1').fadeOut(300);
});
}
</script>
You can use a click handler to the document object where if the click has not originated from the div or button hide the div
$(document).click(function(e){
if(!$(e.target).closest('#div1, input[name="Showdiv1"]').length){
$('#div1').hide()
}
})
Demo: Fiddle

Using "on" for response for desired elements only:

JS Fiddle Link
I am dynamically adding some elements and my div looks like:
<div class="knock" href="#">
<!-- Do Something if links are not clicked -->
Google
Facebook
</div>
And my on script is:
$(".knock").on("click", function(){
console.log("Link not clicked");
alert("Link not Clicked");
});
My Problem, I do not want to fire the alert when the links are clicked. Is there a way out?
You can write anchor tag event and stop event Propagation of the event to upper DOM elements so that alert only comes up when the div is actually clicked, but not when some anchor tag inside div is clicked:
$(".knock").on('click',"a",function(event){
event.stopPropagation();
})
FIDDLE:
http://jsfiddle.net/hbac7vbh/2/
event.stopPropagation:
The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
See details here on jquery official page
Just determine if the a is clicked based on the event that is passed.
Updated Example
$(".knock").on("click", function(e){
if(!$(e.target).is('a')){
console.log("Link not clicked");
alert("Link not Clicked");
}
});
Add this to your js:
$(".knock a").on("click", function(e) {
return false;
});
Why not add another method as
$('a').on('click',function(e){
e.stopPropagation();
});
This will stop porpagation of the chaininvocation of events on parent elements.
See updated Fiddle

Excluding an element from jQuery selection

I'm trying to get a .click() event to work on a div.content except if clicked on something with a specific class, say, .noclick. Example html:
<div class="content">
<a href="#" class="noclick">
</div>
Doing this doesn't work because the <a> tag is not technically in the selection:
$('.content').not('.noclick').click(function(){/*blah*/});
How can I get the click function to work if I click anywhere on .content except something with class .noclick?
You'd have to exclude them from within the callback:
$('.content').click(function(e) {
if ($(e.target).hasClass('noclick')) return;
});
Or stop the event from leaving those elements:
$('.noclick').click(function(e) {
e.stopPropagation();
});
I would go with the second one. You can just drop it and your current code (minus the .not()) will work.
$('.content').click(function(event) {
// ...
}).find('.noclick').click(function(event) {
event.stopPropagation();
});
$('.content').click(function(e){
if(!$(e.target).is('.noclick')){
// Handle click event
}
});
$('.content').
on('click', '.noclick', function(){return false;}).
click(function(){alert("click")})
cancels clicks on '.noclick', yet fires clicks elsewhere
http://jsfiddle.net/FshCn/

Hide a DIV when it loses focus/blur

I have a JavaScript that displays a DIV (sets its display css property from 'none' to 'normal'. Is there a way to give it focus as well so that when I click somewhere else on the page, the DIV loses focus and its display property is set to none (basically hiding it). I'm using JavaScript and jQuery
For the hide the div when clicking any where on page except the selecteddiv
$(document).not("#selecteddiv").click(function() {
$('#selecteddiv').hide();
});
if you want to hide the div with lost focus or blur with animation then also
$("#selecteddiv").focusout(function() {
$('#selecteddiv').hide();
});
with animation
$("#selecteddiv").focusout(function() {
$('#selecteddiv').animate({
display:"none"
});
});
May this will help you
The examples already given unfortunately do not work if you have an iframe on your site and then click inside the iframe. Attaching the event to the document will only attach it to same document that your element is in.
You could also attach it to any iframes you're using, but most browsers won't let you do this if the iframe has loaded content from another domain.
The best way to do this is to copy what's done in the jQuery UI menubar plugin.
Basic example HTML:
<div id="menu">Click here to show the menu
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
And the jQuery needed to make it work:
var timeKeeper;
$('#menu').click(function()
{
$('#menu ul').show();
});
$('#menu ul').click(function()
{
clearTimeout(timeKeeper);
});
$('#menu').focusout(function()
{
timeKeeper = setTimeout(function() {$('#menu ul').hide()}, 150);
});
$('#menu').attr('tabIndex', -1);
$('#menu ul').hide();
What it does is give the menu a tab index, so that it can be considered to have focus. Now that you've done that you can use the focusout event handler on the menu. This will fire whenever it has been considered to lose focus. Unfortunately, clicking some child elements will trigger the focusout event (example clicking links) so we need to disable hiding the menu if any child elements have been clicked.
Because the focusout event gets called before the click event of any children, the way to achieve this is by setting a small timeout before hiding the element, and then a click on any child elements should clear this timeout, meaning the menu doesn't get hidden.
Here is my working jsfiddle example
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target)&& container.has(e.target).length === 0)
{
container.hide();
}
});
You can bind a function on click of body and check if its the current div using e.target (e is the event)
$(document).ready(function () {
$("body").click(function(e) {
if($(e.target).attr('id') === "div-id") {
$("#div-id").show();
}
else {
$("#div-id").hide();
}
});
});
Regarding mouse clicks, see the other answers.
However regarding lost focus, .focusout is not the event to attach to, but rather .focusin. Why? Consider the following popup:
<div class="popup">
<input type="text" name="t1">
<input type="text" name="t2">
</div>
What happens on moving from t1 to t2:
t1 sends focusout, which bubbles up to $('.popup').focusout
t2 sends focusin, which bubbles up to $('.popup').focusin
... so you get both types of event even though the focus stayed completely inside the popup.
The solution is to analogous to the magic trick done with .click:
$(document).ready(function() {
$('html').focusin(function() {
$('.popup').hide();
});
$('.popup').focusin(function(ev) {
ev.stopPropagation();
});
});
(side note: I found the .not(...) solution not working bc. of event bubbling).
Bonus: working fiddle click me - open the popup, then try tabbing through the inputs.
I was also looking for this and here I found the solution https://api.jquery.com/mouseleave/. This may be useful for future readers.
The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant.
On triggering mouseup() event, we can check the click is inside the div or a descendant and take action accordingly.
$(document).mouseup(function (e) {
var divContent= $(".className");
if(!divContent.is(e.target) && divContent.has(e.target).length === 0) {
$(".className").hide();
}
});
I personally haven't tried blur on divs, only on inputs etc. If blur eventhandler works, it's perfect and use it. If it doesn't, you could check this out:
jQuery animate when <div> loses focus
$('.menu > li').click(function() {
$(this).children('ul').stop().slideDown('fast',function()
{
$(document).one('click',function()
{
$('.menu > li').children('ul').stop().slideUp('fast');
});
});
});
Showing is easy
$('somewhere').click(function {$('#foo').show();})
For hiding
How do I hide a div when it loses its focus?
With jQuery you can hide elements with hide(), ex: $("#foo").hide()
Hide element in event listener:
$("#foo").blur(function() {
$("#foo").hide();
});

Categories

Resources