6

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!

5
  • 1
    onblur is for when a element loses focus
    – Ryan
    Commented Mar 22, 2013 at 22:05
  • yeah..learned the difference the hard way. Is there any other standard event that i can use for my case?
    – curioussam
    Commented Mar 22, 2013 at 22:08
  • your changing the div with javascript right?
    – Ryan
    Commented Mar 22, 2013 at 22:10
  • 3
    @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
    Commented Mar 22, 2013 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
    Commented Sep 12, 2014 at 10:59

4 Answers 4

5

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
  • 1
    +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
    Commented Mar 22, 2013 at 22:18
4

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/

2

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

4
  • 1
    and if he needs to support older browsers cough IE ?
    – Ryan
    Commented Mar 22, 2013 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. developer.mozilla.org/en-US/docs/CSS/Tutorials/… 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
    Commented Mar 22, 2013 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
    Commented Mar 22, 2013 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
    Commented Mar 23, 2013 at 5:11
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.