Is there any way to listen for elements being shown or hidden?
I would like categorically to--whenever an element goes from hidden to shown--put focus on the first input element within the newly shown element
I thought of attaching a click event to everything and putting it at the top of the document, thinking that would trigger before anything and I could track whether the clicked element's next("div") (or something) would have a css display property of none, then setting a small timeout, then setting the focus, but I get undefined when I try to access that CSS property
$("html").on("click", "body", function(){
alert($(this).next("div").css("display")); //undefined
});
Is there a way to do this?
Is there any way to listen for elements being shown or hidden?
I would like categorically to--whenever an element goes from hidden to shown--put focus on the first input element within the newly shown element
I thought of attaching a click event to everything and putting it at the top of the document, thinking that would trigger before anything and I could track whether the clicked element's next("div") (or something) would have a css display property of none, then setting a small timeout, then setting the focus, but I get undefined when I try to access that CSS property
$("html").on("click", "body", function(){
alert($(this).next("div").css("display")); //undefined
});
Is there a way to do this?
Share Improve this question asked Oct 4, 2013 at 14:37 12527481252748 15.4k34 gold badges117 silver badges242 bronze badges 8- 2 As far as I know, there isn't. Your best bet would be to poll for changes. – Joshua Dwire Commented Oct 4, 2013 at 14:38
- you realize that .next() only targets the very next element, regardless of the selector correct? the selector is applied after an element has been found. – Kevin B Commented Oct 4, 2013 at 14:38
-
Also,
<body></body>shouldn't have a div after it.... – Kevin B Commented Oct 4, 2013 at 14:39 - 2 This may help you. – Nelson Galdeman Graziano Commented Oct 4, 2013 at 14:40
- 1 If you know exactly what makes it show/hide, you could monkeypatch that method so that it triggers an event. – Kevin B Commented Oct 4, 2013 at 14:43
3 Answers
Reset to default 3You can try something like this (it’s kind of a hack). If you monkey-patch the css/show/hide/toggle prototypes in jQuery, you can test if the element changes it’s :hidden attribute after a "tick" (I used 4ms). If it does, it has changed it’s visibility. This might not work as expected for animations etc, but should work fine otherwise.
DEMO: http://jsfiddle/Bh6dA/
$.each(['show','hide','css','toggle'], function(i, fn) {
var o = $.fn[fn];
$.fn[fn] = function() {
this.each(function() {
var $this = $(this),
isHidden = $this.is(':hidden');
setTimeout(function() {
if( isHidden !== $this.is(':hidden') ) {
$this.trigger('showhide', isHidden);
}
},4);
});
return o.apply(this, arguments);
};
})
Now, just listen for the showhide event:
$('div').on('showhide', function(e, visible) {
if ( visible ) {
$(this).find('input:first').focus();
}
});
Tada!
PS: I love monkeypatching
You could:
var allEls = $('body *');
function isDisplayBlock(arr) {
var isBlock = [];
$.each(arr, function(i, e){
if ($(e).css('display') === 'block') {
isBlock.push(e);
}
})
return isBlock;
}
But ive no idea how to check if they changed, instead of just checking if they are block.
You can just use $('div:visible') to check whether a div has display: block or display: none. Those are the only two values that :visible looks at anyway.
Source: How do I check if an element is hidden in jQuery?
-edit- I realise I didn't read thoroughly, you're asking about an event that tells you when display changed. There is none, see Nelson's ment on your question.