Call Javascript function when a div turns from visibility : hidden

Question

I want to call a javascript function when a div is turned from "visibilty : hidden" to "visibility : none;"

Also note that I don't have control over the script which turns this style property of the div. I just want to hook into this. Any possibilities? Or like onFocus() etc?

UPDATE : I do not want to use JQuery or other frameworks. Is it possible?

Answer 1

In mootools you can create custom events. However, I would do something like this:

document.getElementById('foo').triggerMyEvent = function() {
  if (this.style.visibility == 'hidden') {
    // do something
  } else {
    // do something else
  }
}

And add a call to the object's 'triggerMyEvent' method in whatever code switches the object's visibility.

Answer 2

There's the propertychange event in IE that responds to changes in an element's properties, including properties of its style object. However, this only works on properties set directly on the element's style object and doesn't work for CSS changes (e.g. changing the class of the element's parent element) that indirectly affect the element's style. Using the DOMAttrModified in other browsers will work similarly and has the same shortcomings, so this may not be workable for you.