Javascript event on CSS style change from block to none

Question

Is there a pure Javascript event (no jQuery) that is fired when I change the CSS style of my div from block to none. I was under the impression I can catch that via "onBlur" but looks like I cannot!

Please advise!

yeah..learned the difference the hard way. Is there any other standard event that i can use for my case? — curioussam, Mar 22 '13 at 22:08
@downvoter While there is no code attached to this question it is on topic and useful. The OP want's to know if the dom fires an event when a specific action happens. Something like that can be hard to track down via google. and the answer that was given by Joseph is actually very useful, and could be useful to many people. — Ryan, Mar 22 '13 at 22:17
If you are struggling with an external script like me - e.g. hiding a subscribe form => the ugly way is to setInterval with short delay to check when it hides and clearInterval when it does. — jave.web, Sep 12 '14 at 10:59

score 5 · Answer 1 · answered Mar 22 '13 at 22:11

There are no DOM events triggered for visibility changes.

The best you can do is always use the same function to adjust the block's visibility instead of changing it's style each time.

Old pattern:

function doSomething() {
    alert("I'm doing something!");
    myBlock.style.display = "block";
}

function doSomethingElse() {
    alert("I'm doing something else now!");
    myBlock.style.display = "none";
}

New pattern:

function doSomething() {
    alert("I'm doing something!");
    toggleMyBlock(true);
}

function doSomethingElse() {
    alert("I'm doing something else now!");
    toggleMyBlock(false);
}

function toggleMyBlock(show) {
    if (show) {
        // code here for what would be your 'it became visible' event.
    } else {
        // code here for what would be your 'it became invisible' event.
    }
    myBlock.style.display = show ? "block" : "none";
}

+1 for answering the question, no dom event happens, and for pointing out a better way of structuring his javascript. AND for not doing it in jquery... — Ryan, Mar 22 '13 at 22:18

Elmar Jansen · Answer 2 · 2017-07-17T06:25:33.020

Going forward, the new "Intersection Observer API" is what you're looking for. It currently works in latest Chrome, Firefox and Edge. See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API for more info.

Simple code example for observing display:none switching:

// Start observing visbility of element. On change, the
//   the callback is called with Boolean visibility as
//   argument:

respondToVisibility(element, callback) {
  var options = {
    root: document.documentElement
  }

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

respondToVisibility(myElement, isVisible => {
  if (isVisible) {
    doSomething();
  }
});

In action: https://jsfiddle.net/elmarj/u35tez5n/5/

score 2 · Answer 3 · edited May 23 '17 at 12:15

2

You could use JavaScript to listen to a DOM event for a CSS3 transition (with a minimal fade time):

CSS3 transition events

edited May 23 '17 at 12:15

Community

1
1

answered Mar 22 '13 at 22:12

coolaj86

74,004
20
105
125

1

and if he needs to support older browsers *cough IE* ? – Ryan Mar 22 '13 at 22:13
Let the MSIE arguments die already. ChromeFrame works great (and is less inconvenient than Flash) and MSIE 10 actually has minimal "html5" (bad buzzword usage alert) support, including css3. https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions Saying you can't do something because you want to support MSIE is bunk. You can get things done, even with MSIE in the way. – coolaj86 Mar 22 '13 at 22:24
I'm sorry that is a horrible view. Many people (including everyone in my office who is not a developer!) are forced to use IE at work, don't have access to admin rights and CAN'T install chromeframe. Also the OP asked for a javascript answer, and a very good one was provided. Finally NO one said you can't do something because of MSIE. You can do what the op wants just not the way *your* answer suggested. – Ryan Mar 22 '13 at 22:43
The OP didn't say anything about IE. I don't think you need admin rights to install chrome or chromeframe (can be installed to a user account rather than the system). If the website were that important to the office productivity, the IT people would install it (not to say that that kind of dictatorship makes for a productive work environment - I don't believe it does). And I did give a javascript answer - listen to DOM events. Or is that a DOM answer? He asked about display: block and display: none. Does that make it a CSS question? – coolaj86 Mar 23 '13 at 05:11

sellmeadog · Answer 4 · 2013-03-22T22:23:56.723

I think the closest to what you're looking for would be the DOMAttrModified event. I'm not entirely sure on it's usage, but it's along the lines of:

element.addEventListener('DOMAttrModified', function (e) {
  ...
});

The event handler receives a MutationEvent which should provide you enough information to determine whether display has been set to block or none.

EDIT

I may have misread the question. I don't believe a CSS change will result in a DOMAttrModified event. Initially, I had read the question to mean you were setting display with a CSS value via JavaScript. My answer may not be helpful.

Javascript event on CSS style change from block to none

4 Answers4