jQuery event to trigger action when a div is made visible

Question

I m using jQuery in my site and I would like to trigger certain actions when a certain div is made visible   Is it possible to attach some sort of  isvisible  event handler to arbitrary divs and have certain code run when they the div is made visible   I would like something like the following pseudocode     function           contentDiv   isvisible function         alert  do something                The alert  do something   code should not fire until the contentDiv is actually made visible   Thanks

User · Answer

The problem is being addressed by DOM mutation observers. They allow you to bind an observer (a function) to events of changing content, text or attributes of dom elements.

With the release of IE11, all major browsers support this feature, check http://caniuse.com/mutationobserver

The example code is a follows:

_x000D_

$(function() {
  $('#show').click(function() {
    $('#testdiv').show();
  });

  var observer = new MutationObserver(function(mutations) {
    alert('Attributes changed!');
  });
  var target = document.querySelector('#testdiv');
  observer.observe(target, {
    attributes: true
  });

});

_x000D_

<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

_x000D_

User · Answer

One way to do this  Works only on visibility changes that are made by css class change  but can be extended to watch for attribute changes too   var observer   new MutationObserver function mutations            var clone     mutations 0  target  clone            clone removeClass                    for var i   0  i  lt  mutations length  i                         clone addClass mutations i  oldValue                       document body  append clone           var cloneVisibility     clone  is   visible              clone  remove            if  cloneVisibility      mutations 0  target  is   visible                 var visibilityChangedEvent   document createEvent  Event                visibilityChangedEvent initEvent  visibilityChanged   true  true               mutations 0  target dispatchEvent visibilityChangedEvent                  var targets       ui-collapsible-content      each targets  function i target           target addEventListener  visibilityChanged  VisbilityChanedEventHandler            target addEventListener  DOMNodeRemovedFromDocument  VisbilityChanedEventHandler             observer observe target    attributes  true  attributeFilter     class    childList  false  attributeOldValue  true              function VisbilityChanedEventHandler e  console log  Kaboom babe    console log e target

User · Answer

This support easing and trigger event after animation done   tested on jQuery 2 2 4    function             each   show    hide    fadeOut    fadeIn    function  i  ev            var el     fn ev             fn ev    function                  var result   el apply this  arguments               var  self this              result promise   done function                       self triggerHandler ev   result                      console log  self                               return result                        jQuery     Inspired By http   viralpatel net blogs jquery-trigger-custom-event-show-hide-element

User · Answer

I did a simple setinterval function to achieve this  If element with class div1 is visible  it sets div2 to be visible  I know not a good method  but a simple fix   setInterval function      if     div1   is   visible             div2   show          else           div2   hide                 100

User · Answer

Use jQuery Waypoints        contentDiv   waypoint function        alert  do something          Other examples on the site of jQuery Waypoints

User · Answer

You could always add to the original  show   method so you don t have to trigger events every time you show something or if you need it to work with legacy code   Jquery extension   jQuery function         var  oldShow     fn show       fn show   function speed  oldCallback        return   this  each function           var obj             this             newCallback   function                 if    isFunction oldCallback                   oldCallback apply obj                             obj trigger  afterShow                           you can trigger a before show if you want       obj trigger  beforeShow              now use the old function to show the element passing the new callback        oldShow apply obj   speed  newCallback                      Usage example   jQuery function            test        bind  beforeShow   function           alert  beforeShow                 bind  afterShow   function           alert  afterShow                show 1000  function           alert  in show callback                show          This effectively lets you do something beforeShow and afterShow while still executing the normal behavior of the original  show   method   You could also create another method so you don t have to override the original  show   method

User · Answer

redsquare s solution is the right answer     But as an IN-THEORY solution you can write a function which is selecting the elements classed by  visibilityCheck  not all visible elements  and check their visibility property value  if true then do something     Afterward  the function should be performed periodically using the setInterval   function  You can stop the timer using the clearInterval   upon successful call-out   Here s an example   function foo             visibilityCheck   each function             if    this  is   visible                    do something                      window setInterval foo  100     You can also perform some performance improvements on it  however  the solution is basically absurd to be used in action  So

User · Answer

window   scroll function e i        win top      window   scrollTop        win bottom      window   height     win top        console log  win top win bottom            onvisible   each function                 t     this  offset   top          b   t     this  height            if  t  gt  win top  amp  amp  b  lt  win bottom               alert  do something

User · Answer

Just bind a trigger with the selector and put the code into the trigger event   jQuery function       jQuery   contentDiv hidden   show   trigger  show       jQuery   contentDiv   on  show   function         console log   contentDiv is now visible           your code here

User · Answer

lt div id  welcometo  gt   zhan lt  div gt   lt input type  button  name  ooo          onclick  JavaScript                      if document all welcometo style display   none                             document all welcometo style display                           else                           document all welcometo style display  none                          gt    This code auto control not required query visible or unvisible control

User · Answer

You can use jQuery s Live Query plugin   And write code as follows       contentDiv visible   livequery function         alert  do something          Then everytime the contentDiv is visible   do something  will be alerted

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     example usage   if   info center is   visible          info center attr  data-trigger-visible-event   true   one  visible  processMoreLessButton   else      processMoreLessButton      function processMoreLessButton      some logic

User · Answer

If you want to trigger the event on all elements  and child elements  that are actually made visible  by   show  toggle  toggleClass  addClass  or removeClass     each   show    toggle    toggleClass    addClass    removeClass    function        var  oldFn     fn this         fn this    function            var hidden   this find   hidden   add this filter   hidden             var result    oldFn apply this  arguments           hidden filter   visible   each function                  this  triggerHandler  show      No bubbling                     return result              And now your element       myLazyUl   bind  show   function        alert this         You could add overrides to additional jQuery functions by adding them to the array at the top  like  attr

User · Answer

You can also try jQuery appear plugin as mentioned in parallel thread https   stackoverflow com a 3535028 741782

User · Answer

The following code  pulled from http   maximeparmentier com 2012 11 06 bind-show-hide-events-with-jquery   will enable you to use     someDiv   on  show   someFunc      function           each   show    hide    function  i  ev        var el     fn ev         fn ev    function            this trigger ev         return el apply this  arguments                   jQuery

User · Answer

Hope this will do the job in simplest manner       myID   on  show   trigger  displayShow         myID   off  displayShow   on  displayShow   function e        console log  This event will be triggered when myID will be visible

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

What helped me here is recent ResizeObserver spec polyfill   const divEl       section60     const ro   new ResizeObserver      gt        if  divEl is   visible              console log  it s visible now               ro observe divEl 0      Note that it s crossbrowser and performant  no polling

User · Answer

a hide show event trigger based on Glenns ideea  removed toggle because it fires show hide and we don t want 2fires for one event    function          each   show   hide    toggleClass    addClass    removeClass    function            var  oldFn     fn this             fn this    function                var hidden   this find   hidden   add this filter   hidden                 var visible   this find   visible   add this filter   visible                 var result    oldFn apply this  arguments               hidden filter   visible   each function                      this  triggerHandler  show                                visible filter   hidden   each function                      this  triggerHandler  hide                                return result

User · Answer

There is no native event you can hook into for this however you can trigger an event from your script after you have made the div visible using the  trigger function  e g    declare event to run when div is visible function isVisible         do something       hookup the event     someDivId   bind  isVisible   isVisible      show div and trigger custom event in callback when div is visible     someDivId   show  slow   function          this  trigger  isVisible

User · Answer

I changed the hide show event trigger from Catalint based on Glenns idea  My problem was that I have a modular application  I change between modules showing and hiding divs parents  Then when I hide a module and show another one  with his method I have a visible delay when I change between modules  I only need sometimes to liten this event  and in some special childs  So I decided to notify only the childs with the class  displayObserver     each   show    hide    toggleClass    addClass    removeClass    function          var  oldFn     fn this         fn this    function              var hidden   this find   displayObserver hidden   add this filter   hidden             var visible   this find   displayObserver visible   add this filter   visible             var result    oldFn apply this  arguments           hidden filter   visible   each function                    this  triggerHandler  show                         visible filter   hidden   each function                    this  triggerHandler  hide                        return result              Then when a child wants to listen for  show  or  hide  event I have to add him the class  displayObserver   and when It does not want to continue listen it  I remove him the class  bindDisplayEvent  function             child1   addClass  displayObserver           child1   off  show   this onParentShow          child1   on  show   this onParentShow       bindDisplayEvent  function             child1   removeClass  displayObserver           child1   off  show   this onParentShow        I wish help

User · Answer

There is a jQuery plugin available for watching change in DOM attributes   https   github com darcyclarke jQuery-Watch-Plugin  The plugin wraps All you need do is bind MutationObserver  You can then use it to watch the div using        selector   watch  css   function         console log  Visibility      this style display     none   hidden   shown           or any random events

[javascript] jQuery event to trigger action when a div is made visible

Examples related to javascript

Examples related to jquery