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

Answer 1

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.

Answer 2

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 3

You could also override jQuery's default show method:

var orgShow = $.fn.show;
$.fn.show = function()
{
    $(this).trigger( 'myOnShowEvent' );
    orgShow.apply( this, arguments );
    return this;
}

Now just bind your code to the event:

$('#foo').bind( "myOnShowEvent", function()
{
    console.log( "SHOWN!" )
});

Answer 4

The code from this link worked for me: http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

(function ($) {
  $.each(['show', 'hide'], function (i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function () {
      this.trigger(ev);
      return el.apply(this, arguments);
    };
  });
})(jQuery); 

$('#foo').on('show', function() {
      console.log('#foo is now visible');
});

$('#foo').on('hide', function() {
      console.log('#foo is hidden');
});

However the callback function gets called first and then the element is shown/hidden. So if you have some operation related to the same selector and it needs to be done after being shown or hidden, the temporary fix is to add a timeout for few milliseconds.