Observing Display Changes in jQuery

Question

Is it possible to add an observer to a DOM element that is triggered on changes to the visibility (i.e. calls to show() and hide())? Thanks!

I wonder if you can try this out for style.display? http://stackoverflow.com/questions/1029241/javascript-object-watch-for-all-browsers/1270182#1270182 — mrk, Jun 16 '11 at 17:03

score 8 · Accepted Answer · answered Jun 16 '11 at 17:09

If you want to observe any call to .show() or .hide() and have access to jQuery 1.5+ you could use jQuery.sub() to create a copy of the jQuery object to override the default .show() or .hide() actions.

var myjQuery = jQuery.sub();
myjQuery.fn.hide = function() {
    alert('hide');

    return jQuery.fn.hide.apply(this, arguments);
};
myjQuery.fn.show = function() {
    alert('show');
    return jQuery.fn.show.apply(this, arguments);
};

And then using the .sub() copy

(function($) {
    $(document).ready(function() {
        $(".click").click(function() {
            if ($("#hide").is(":visible")) {
                $("#hide").hide();
            }
            else {
                $("#hide").show();
            }
        });
    });
})(myjQuery);

Example on jsfiddle

+1 Excellent answer. I hadn't seen this yet in jQuery 1.5+. I'll definitely be using it at some point in the not too distant future. — Endophage, Jun 16 '11 at 17:18

score 1 · Answer 2 · answered Jun 16 '11 at 17:06

It is not possible out of the box that I know of, but if changes happens through jquery you can easily add the tracking yourself by using a custom event like this:

// save the jquery.show() method
$.prototype.base_show = $.prototype.show;
// provide your own that trigger the event then call the original one
$.prototype.show = function(speed, easing, callback) {
    // call your custom event, add any parameters you need there
    $(window).trigger('on_jquery_show'/*, params you need*/);
    // now call the "real" show method
    $.prototype.base_show(speed, easing, callback);
    // return this so you can chain it
    return this;
};
// add some callback to that custom event
$(window).bind('on_jquery_show', function() { console.log('show !'); });
// it works !
$('#some_div').show().show();

Same thing for hide().

score 0 · Answer 3 · answered Jun 16 '11 at 17:08

0

Yes you can:

For example:

 $('#divID').show('slow', function() {
    // Animation complete.
 });

See the docs

answered Jun 16 '11 at 17:08

Naftali

144,921
39
244
303

3

So how would using: `$('#divID').show('slow', function() { // Animation complete. });` have that called back if you for example make all `div`s visible with: `$('div').show();`? It's a callback on the completion of that particular show/hide, not an event listener which monitors the changes to the visibility of that element. – Niklas Jun 16 '11 at 17:10

score 0 · Answer 4 · answered Jun 16 '11 at 17:10

Assuming you're showing and hiding using the jQuery mechanisms, you might try using the Live Query plugin.

Live Query also has the ability to fire a function (callback) when it matches a new element and another function (callback) for when an element is no longer matched.

Observing Display Changes in jQuery

4 Answers4