Jquery Event to Trigger Action When a Div Is Made Visible

jQuery event to trigger action when a div is made visible

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.}

jQuery when element becomes visible

There are no events in JQuery to detect css changes.

Refer here: onHide() type event in jQuery

It is possible:

DOM L2 Events module defines mutation events; one of them - DOMAttrModified is the one you need. Granted, these are not widely implemented, but are supported in at least Gecko and Opera browsers.

Source: Event detect when css property changed using Jquery

Without events, you can use setInterval function, like this:

var maxTime = 5000, // 5 seconds
    startTime = Date.now();

var interval = setInterval(function () {
        if ($('#element').is(':visible')) {
            // visible, do something
            clearInterval(interval);
        } else {
            // still hidden
            if (Date.now() - startTime > maxTime) {
                // hidden even after 'maxTime'. stop checking.
                clearInterval(interval);
            }
        }
    },
    100 // 0.1 second (wait time between checks)
);

Note that using setInterval this way, for keeping a watch, may affect your page's performance.

7th July 2018:

Since this answer is getting some visibility and up-votes recently, here is additional update on detecting css changes:

Mutation Events have been now replaced by the more performance friendly Mutation Observer.

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature which was part of the DOM3 Events specification.

Refer: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

How to trigger a javascript event when a button becomes visible?

You can try MutationObserver that will listen for changes in css of element and then you can run click event when change happens.

setTimeout(function() {  $('button').css('display', 'block');}, 2000);
var observer = new MutationObserver(function(mutations) {  mutations.forEach(function(mutation) {    if ($('button').css('display') !== 'none') {      $('button').click();    }  });});
observer.observe(document.querySelector('button'), {  attributes: true,  attributeFilter: ['style']});
$('button').click(function() {  alert('clicked');})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button class="btn btn-primary" style="display: none;">Apply All</button>

$(function () {  $('#XML').on("DOMNodeInserted", function (ev) {    console.log('DO SOMETHING');  });
  $('#btnAdd').on('click', function(e) {    $('#XML').append($('<p>', {text: 'this is a new paragragh'}));  });});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="XML"></div>
<button id="btnAdd">Add a paragragh to div</button>

$('.entry').waypoint(function() {
   alert('The element has appeared on the screen.');
});

$('#myDiv').show(0, onDivShow);
$('#myDiv').hide(0, onDivHide);

function onDivShow() { //your code here }
function onDivHide() { //your code here }

  var target = $('#schedule');
  var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(){
             //do stuff here
      });

      observer.observe(target, {
             attributes: true
      });
  }

.on("shown.bs.modal", function(e) {
   alert("bootbox is visible");
});

.on("shown.bs.modal", function(e) {
$('.modal-content').css({
    'transition':'margin-top 1s linear',
  'margin-top': function (){
        var w = $( window ).height();
        var b = $(".modal-dialog").height();
        var h = (w-b)/2;
        return h+"px";
    }
  });
});