Event listener for when element becomes visible

Question

I am building a toolbar that is going to be included into a page  the div it is going to be included in will default to display none  Is there a way i can put an event listener on my toolbar to listen for when it becomes visible so it can initialize  or will I have to pass it a variable from the containing page   Thanks

User · Answer

If you just want to run some code when an element becomes visible in the viewport:

function onVisible(element, callback) {
  new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if(entry.intersectionRatio > 0) {
        callback(element);
        observer.disconnect();
      }
    });
  }).observe(element);
}

When the element has become visible the intersection observer calls callback and then destroys itself with .disconnect().

Use it like this:

onVisible(document.querySelector("#myElement"), () => console.log("it's visible"));

User · Answer

There is at least one way  but it s not a very good one  You could just poll the element for changes like this   var previous style      poll   window setInterval function         var current style   document getElementById  target   style display      if  previous style    current style            alert  style changed            window clearInterval poll         else           previous style   current style           100     The DOM standard also specifies mutation events  but I ve never had the chance to use them  and I m not sure how well they re supported  You d use them like this   target addEventListener  DOMAttrModified   function         if  e attrName     style             alert  style changed             false     This code is off the top of my head  so I m not sure if it d work   The best and easiest solution would be to have a callback in the function displaying your target

User · Answer

I had this same problem and created a jQuery plugin to solve it for our site    https   github com shaunbowe jquery visibilityChanged  Here is how you would use it based on your example       contentDiv   visibilityChanged function element  visible        alert  do something

User · Answer

Just to comment on the DOMAttrModified event listener browser support   Cross-browser support  These events are not implemented consistently across different browsers  for example    IE prior to version 9 didn t support the mutation events at all and does not implement some of them correctly in version 9  for example  DOMNodeInserted  WebKit doesn t support DOMAttrModified  see webkit bug 8191 and the workaround   mutation name events   i e  DOMElementNameChanged and DOMAttributeNameChanged are not supported in Firefox  as of version 11   and probably in other browsers as well    Source   https   developer mozilla org en-US docs Web Guide Events Mutation events

User · Answer

my solution      function         each    toggle    show    hide     function  i  name         var cssFn     fn  name          fn  name     function  speed  easing  callback             if speed    null    typeof speed      boolean                var ret cssFn apply  this  arguments                 fn triggerVisibleEvent apply this arguments              return ret          else              var that this             var new callback function                    callback call this                    fn triggerVisibleEvent apply that arguments                            var ret this animate  genFx  name  true    speed  easing  new callback               return ret                         fn triggerVisibleEvent function        this each function            if   this  is   visible                   this  trigger  visible                 this  find   data-trigger-visible-event    triggerVisibleEvent                         jQuery     for example   if   info center is   visible          info center attr  data-trigger-visible-event   true   one  visible  processMoreLessButton   else      processMoreLessButton      function processMoreLessButton      some logic

User · Answer

Javascript events deal with User Interaction  if your code is organised enough you should be able to call the initialising function in the same place where the visibility changes  i e  you shouldn t change myElement style display on many places  instead  call a function method that does this and anything else you might want

User · Answer

Going forward  the new HTML Intersection Observer API is the thing you re looking for  It allows you to configure a callback that is called whenever one element  called the target  intersects either the device viewport or a specified element  It s available in latest versions of 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   function respondToVisibility element  callback      var options         root  document documentElement          var observer   new IntersectionObserver  entries  observer    gt        entries forEach entry   gt          callback entry intersectionRatio  gt  0                options      observer observe element      In action  https   jsfiddle net elmarj u35tez5n 5

User · Answer

You may also try this jQuery plugin  https   github com morr jquery appear

User · Answer

var targetNode   document getElementById  elementId    var observer   new MutationObserver function        if targetNode style display     none               doSomething           observer observe targetNode    attributes  true  childList  true       I might be a little late  but you could just use the MutationObserver to observe any changes on the desired element  If any change occurs  you ll just have to check if the element is displayed

User · Answer

As  figha says  if this is your own web page  you should just run whatever you need to run after you make the element visible   However  for the purposes of answering the question  and anybody making Chrome or Firefox Extensions  where this is a common use case   Mutation Summary and Mutation Observer will allow DOM changes to trigger events    For example  triggering an event for a elements with data-widget attribute being added to the DOM  Borrowing this excellent example from David Walsh s blog   var observer   new MutationObserver function mutations           For the sake of   observation   let s output the mutation to console to see how this all works     mutations forEach function mutation            console log mutation type                       Notify me of everything  var observerConfig         attributes  true       childList  true       characterData  true         Node  config    In this case we ll listen to all changes to body and child nodes var targetNode   document body  observer observe targetNode  observerConfig     Responses include added  removed  valueChanged and more  valueChanged includes all attributes  including display etc

[javascript] Event listener for when element becomes visible?

Examples related to javascript