Checking if element change state from hidden to visible

Question

Possible Duplicate:
jquery event handler: div becomes visible/hidden

Can I set an event to trigger after some element is hidden and then is set to visible by js?

And also can I detect if js has added class to element?

I'm working with jQuery

Is there any way you can post some code to help us better the question fully? For the second question, you can check to see if an element has a class by using the `hasClass()` function (http://api.jquery.com/hasClass/). — Chase, Sep 06 '12 at 12:37
According to this answer http://stackoverflow.com/a/1950052/692560 there isn't a built in way of listening to classes being added/removed, but another answer from the same question (http://stackoverflow.com/a/1950199/692560) gives a way of getting a similar effect assuming all changes to classes are done with JQUery. I can't see any DOM event that would be triggered by an element being hidden or shown either, but the same principle of overwriting JQuery functions could be applied. — Vala, Sep 06 '12 at 12:38
if you control the code that is causing the show/hide, you should just execute your other code there. — jbabey, Sep 06 '12 at 12:43
@Thor84no: Overrideing the jquery function looks like a solution to my problem — Gale, Sep 06 '12 at 12:53

score 2 · Answer 1 · answered Sep 06 '12 at 13:10

2

Yes. You can track addition and removal of classes via events.

You can track this using the DOMAttrModified event - which, as the name suggests, is fired every time any attribute of any element in the DOM is modified.

In this particular case we track the modification of the class attribute for the element we wish to track.

Demo: http://jsfiddle.net/techfoobar/dnRUu/2/

In the demo, click the 'Toggle Class' button to add a class to the first DIV. The alert you get is fired by the DOMAttrModified event.

More Info Here:

https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference?redirectlocale=en-US&redirectslug=DOM_Events

http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent

Disclaimer: Tested only in Mozilla Firefox!

answered Sep 06 '12 at 13:10

techfoobar

65,616
14
114
135

does it work on all browsers? it didn't work on safari 6.0 – Ghassan Elias Sep 06 '12 at 13:16
Oh! Tested only on FF actually. Developed the above solution as a proof-of-concept after reading mozilla docs, so that probably explains it.. :-) – techfoobar Sep 06 '12 at 13:30
It is, but only for browsers with DOM events support, like FF, IE9+ etc. – techfoobar Sep 06 '12 at 13:44
No, you mean for browser with DOM level 2 support not DOM level 3. it's deprecated in DOM Level 3: – Ghassan Elias Sep 06 '12 at 13:46
Yes exactly. For browsers with DOM L3 support. – techfoobar Sep 06 '12 at 13:48
Ok, this is working. How to test if it's supported? – Gale Sep 06 '12 at 13:50
1

http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3 it's not supported anymore! – Ghassan Elias Sep 06 '12 at 13:52
@mgalesic - This will work only for browsers with support for DOM L3 Spec. This includes FF, IE9+ but unfortunately does not include Chrome, Safari etc.. as of now. – techfoobar Sep 06 '12 at 13:53
@Gustonez - tkx for the info. – techfoobar Sep 06 '12 at 13:56
@mgalesic - It is better not to use it as it will likely never be supported by all browsers. Maybe you should use a periodic poller/timer based solution. – techfoobar Sep 06 '12 at 13:58

Ghassan Elias · Answer 2 · 2012-09-06T13:37:35.547

Maybe you can use interval to handle such event:

function checkIt () {
    if ($('#Element').length > 0) {
        if($('#Element').is(':hidden') == true) {
           // add class name
            alert('Element was hidden');
            $('#Element').removeClass('hidden').addClass('visible');

            // or toggle class name
            //$('#Element').toggleClass('className');

            // or remove class name
            //$('#Element').removeClass('className');

            // if you want to clear the interval
            //clearInterval(listenerID);
        }
    }
}

var listenerID;
$(function(){
    listenerID = setInterval(checkIt, 500);
});

http://jsfiddle.net/KFGrL/2/

To check if an element has a class name:

if ($('#Element').hasClass('className')) {
    // your code
}

score 0 · Answer 3 · answered Sep 06 '12 at 12:39

0

There is no such event you could subscribe to. The best you can do is run periodically your own function to check for changes you care about..

answered Sep 06 '12 at 12:39

Michal Klouda

14,263
7
53
77

Checking if element change state from hidden to visible

3 Answers3