jQuery: How to bind an event for the div when it becomes visible?

Question

I\'ve got a div element:

Tab data

.

How to bind a custom event when this div becomes visible (gets displa

Answer 1

The solution I found was to fire up focus event when the tab is selected.

var tabContainers = $('div.tabs > div');

$('div.tabs ul.tabNavigation a').click(function () {
    tabContainers.each(function(){

        tabContainers.hide().filter(this.hash).show();

        if ( $(this).is(':visible') ) {
            $(this).focus(); // fire this event if tab is visible
        } else {
            $(this).blur(); // if tab is invisible
        }
    });
});

And then I catch these focus and blur events:

$(document).ready(function(){
    $("#tabID").bind("focus",function(){
        if ( $(this).is(":visible") ) {
            // start ajax here
        }
    });

    $("#tab'.$key.'").bind("blur",function(){
        if ( !$(this).is(":visible") ) {
            // stop ajax here
        }
    });
});