How to write onshow event using javascript/jquery?

Question

I have an anchor tag on my page, i want an event attached to it, which will fire when the display of this element change.

How can i write this event? and catch whenever the display of this element change?

Answer 1

This is my way of doing on onShow, as a jQuery plugin. It may or may not perform exactly what you are doing, however.

(function($){
  $.fn.extend({ 
    onShow: function(callback, unbind){
      return this.each(function(){
        var _this = this;
        var bindopt = (unbind==undefined)?true:unbind; 
        if($.isFunction(callback)){
          if($(_this).is(':hidden')){
            var checkVis = function(){
              if($(_this).is(':visible')){
                callback.call(_this);
                if(bindopt){
                  $('body').unbind('click keyup keydown', checkVis);
                }
              }                         
            }
            $('body').bind('click keyup keydown', checkVis);
          }
          else{
            callback.call(_this);
          }
        }
      });
    }
  });
})(jQuery);

You can call this inside the $(document).ready() function and use a callback to fire when the element is shown, as so.

$(document).ready(function(){
  $('#myelement').onShow(function(){
    alert('this element is now shown');
  });
});

It works by binding a click, keyup, and keydown event to the body to check if the element is shown, because these events are most likely to cause an element to be shown and are very frequently performed by the user. This may not be extremely elegant but gets the job done. Also, once the element is shown, these events are unbinded from the body as to not keep firing and slowing down performance.

Answer 2

You can't get an onshow event directly in JavaScript. Do remember that the following methods are non-standard.

IN IE you can use

onpropertychange event

Fires after the property of an element changes

and for Mozilla

you can use

watch

Watches for a property to be assigned a value and runs a function when that occurs.