I have a textbox and a div below it. I want to hide the div when the user clicks outside the textbox or div.
Is there any other way other than document.click to handle that user has clicked outside. Because in some of the controls, event.stoppropagation is given, which on click wont trigger the document click event.
Thanks
// This means if you click anywhere on the document once, it'll hide the div
$(document).one("click", function() {/*Do stuff, hide div*/});
// This overrides the previous line for just the textarea and div, therefore making this block of code only apply to everything but the textarea and div
$('textbox, div').click(function(){return false;});
Since you mentioned you have event.stopPropagation() at different sections of the page on click event so document.click will not work to hide the textbox.
Why don't you use document.mousedown? It will work fine.
$(document).mousedown(function(){
$('textboxSelector').hide();
});
Make sure you stop the mousedown event propagation from textbox and its containing div.
Create an overlay div (see other questions) and then add a click event to the overlay div that hides the div below the text box and destroys the overlay div.
<script type="text/javascript">
hideDiv()
{
document.getElementById("divId").style.display = "none";
}
</script>
<input type="text" onblur='javascript:hideDiv()'>
I think this should work.
Related
The premise of what I'm trying to do is use jQuery to start a CSS transition to open and close a search box.
User clicks magnifying glass icon, box opens, user clicks anywhere on the page but the search form, box closes.
To close, using this:
$('body *').not('#header-search, #header-field, #header-submit').click(function () {
And different variations of the answer found here: jQuery - Select everything except a single elements and its children? without success.
Clicking on the input#header-field always closes the box.
Pen Here:
http://codepen.io/anon/pen/RNbmwr
Thanks for reading.
Your code is very aggressive (it gets applied to all elements, so inner element to those in the .not() will trigger it).
It is better to delegate the closing of the box to the body (since click events bubble up), and manually cancel any event that occurs under the forbidden list.
$('body').on('click', function(){
// code for closing box here
});
$('#header-search, #header-field, #header-submit').on('click', function(){
return false; // stop bubbling of event
});
And since in your example the #header-field and #header-submit are descendants of header-search you only need to cancel the bubbling on that
$('#header-search').on('click', function(){
return false; // stop bubbling of event
});
Demo at http://codepen.io/gpetrioli/pen/XJrwXO
Try the jQuery toggle() function:
<script>
$( "button" ).click(function() {
$( "p" ).toggle( "slow" );
});
</script>
Substitute the id for your magnifying glass for "button" and change the paragraph -- $("p") -- the search controls you want to show/hide. Toggle changes the visibility of the indicated id or class. If it is initially hidden, mouse click will make it visible; if initially visible, mouse click will hide it.
Finally, change the speed of the transition if you don't want it to move "slow"
A more complete explanation of toggle() is available at http://api.jquery.com/toggle/
There are many elements on the page. Some of them may contain or be contained by the elements you name. So they will still trigger the event.
Instead, bind a single event handler:
$("body").click(function(evt) {
and check if you clicked on one of the elements:
if( $(evt.target).parents("#header-search").length > 0) {
cancelling the handler if so:
return true;
}
Perform the actual event otherwise:
doSomething();
});
Here is my code below I'm trying to hide addstuff id div when clicked out of it. I tried body click event but it was useless. So I need a trigger event like blur. But It doesn't work for both blur and focusout events.
$(document).ready(function() {
$('#addstuff').blur(function () { $('#addstuff').fadeOut() })
})
There is no blur event for div. You can create that effect using the click event of body.Note that you should exclude that div from the click event
$(document).ready(function () {
$("body").not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});
});
Fiddle
Edit
As #TrueBlueAussie suggested, it would be better to use document instead of 'body' for the click event handler:
$(document).not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});
There's no way you can use .blur with a div, it has to be with some input field.
You can always use mouse events like
$(document).ready(function(){
$("#addstuff").mouseleave(function(){
$(this).remove();
});
});
http://jsfiddle.net/asrF2/
You can also use the HTML5 global attribute contenteditable (don't forget to set it true or false)
<div id="#addstuf" contenteditable="true">bla bla</div>
I don't recommend this that much, because of mobile browsers' compatibility.
divs have no focus and blur events, but you can add a contenteditable attribute so that you can type in that div, so the blur actually gets fired:
<div id="addstuff" contenteditable></div>
Then your jquery code works.
You can add additional functions to prevent people from actually typing in that div.
Alternatively you can use the .mouseleave() or .mouseout() event.
div element cannot be focused on so the blur function of jquery cannot be applied to it. See existing answers from our Stack Exchange buddies below for elements that focus can be applied on.
Which HTML elements can receive focus?
I am making an image slider. I want to make it so when the user clicks on the image it should get hidden and i.e text which is behind the image should be visible.
In my image's OnClick event I have written code to hide the image, but what to do if I want it to be visible again when the user clicks again on that or any other option?
You can use jquery SlideToggle() or show() and hide() method like this:
<div id="yourid"></div>
$(document).ready(function(){
$('#btnid').click(function(){
$('#divid').show();
});
$('#btnid2').click(function(){
$('#divid).hide();
});
});
In your onclick event you can create a one time click event on document which will show image again.
This will display image when user clicks outside also.
Make sure that click event on document is one time only to avoid unnecessary action.
Similar to fadeToggle you can just use toggle(speed). This will switch between display none and block.
$(document).on('click','#imageContainer',function(){
$('#image').toggle();
)};
http://jsfiddle.net/mnbayazit/by3zy/2/
I want the popup to disappear when I click somewhere on the background. Problem is, it disappears when I click an [X] or the popup itself.
Imagine it being a calendar-picker if that makes my intentions more clear.
How can I get it to do that?
Set a click handler for the body to remove your popup.
Set a click handler for the popup itself that calls stopPropagation() on the event, to prevent it from bubbling up to the body.
Roughly:
function showMyPopup(){
...
$(myPopupDiv).click(function(e){
e.stopPropagation();
});
}
function closeMyPopup(){
...
}
$(document.body).click(closeMyPopup);
The basic jist with this technique is to have a wrapping (or independent element layered with z-index) that 'captures' the click event, and hides the elements you desire. I've updated your fiddle with an example of how this would work, except imagine that the blanket element would have a height and width of 100% (to cover the entire viewport).
How does the click() function in jquery work when working with multiple stacked divs?
I have one main div and another div inside of the main div, when i click on the div inside, its also considered a click on the main div, but i dont want that, i want it to only consider a click on the inside div.
<div id="main"><div id="inner"></div></div>
Lets say the main div is a lot larger and the innner div is just a small square, when i click on the inner div(small square) I dont want it to trigger anyting as if i were to click on the main div. How do I maneuver this? Thanks again!
Events bubble up from the one that was clicked, through all its ancestors. Any ancestor that handles that event will have its handler fired.
What you need to do is to call event.stopPropagation() in order to prevent the event from bubbling up to its ancestor elements.
$('#inner').click(function(evt) {
evt.stopPropagation();
// your code
});
http://api.jquery.com/event.stopPropagation/
Another alternative is to return false; at the end of your handler.
$('#inner').click(function(evt) {
// your code
return false;
});
You can test it out here: http://jsfiddle.net/ZpeYr/
$('#inner').click(function() {
alert('clicked inner div'); // do something
});
you can call your inner div using using the css id.