I'm trying to execute jQuery code when a div's style changes from display: none; to display: block;

I'm using tabs that's why this div's style changes like this, and this jQuery code should only be running when viewing this tab only.

so how can I achieve this ?

and thanks.

EDIT: I tried .is(':visible'); and it only works if we load the page and this div is visible, not if this div will be visible later.

I'm trying to execute jQuery code when a div's style changes from display: none; to display: block;

I'm using tabs that's why this div's style changes like this, and this jQuery code should only be running when viewing this tab only.

so how can I achieve this ?

and thanks.

EDIT: I tried .is(':visible'); and it only works if we load the page and this div is visible, not if this div will be visible later.

• javascript
• jquery

• 2 Why not execute the code when a user clicks on the other tab? – Celos Commented Apr 30, 2012 at 10:43
• yes maybe this will work, but I want to know if it's possible to do this using jQuery, listening when something happened ? – Pierre Commented Apr 30, 2012 at 10:54
• @Alnitak ok so I guess I have to do it the way Celos suggested above. – Pierre Commented Apr 30, 2012 at 11:00
• @Peter yeah, it's normally quite easy to trap any event which changes the displayed tab. – Alnitak Commented Apr 30, 2012 at 11:03

4 Answers 4

What you're looking for are DOM Mutation Events, which can raise an event when a DOM element is inserted, deleted or modified.

Unfortunately they were never well supported, and were deprecated in DOM3.

In any event (no pun intended), in your case it would be simpler just to catch whatever UI event it is that causes the tab to be displayed.

if($("#myTab").is(':visible')){
    here is your code ...
}

try something like this:

if($(DIV).is(':visible')) {   // DIV => valid selector of your target
   // execute your code
}

OR:

if($('body').on('EVENTNAME', 'DIV:visible')) {   // DIV => valid selector of your target
   // execute your code
}

$(document).ready(function(){
    $(your tab container).click(function(){
        //set none property to all of your id's
        var obj=$this;
        if(obj){
            $("your id").style.display="block"; // set block to your current item
        }
    });
});

or

if($("you id").is('visible')){
    //do it
}