How to execute jQuery code if a div display style changes from none to block?

Question

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.

Why not execute the code when a user clicks on the other tab? — Celos, Apr 30 '12 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, Apr 30 '12 at 10:54
@Alnitak ok so I guess I have to do it the way Celos suggested above. — Pierre, Apr 30 '12 at 11:00
@Peter yeah, it's normally quite easy to trap any event which changes the displayed tab. — Alnitak, Apr 30 '12 at 11:03

jumancy · Answer 1 · 2012-04-30T10:51:16.200

2

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

edited Apr 30 '12 at 10:51

answered Apr 30 '12 at 10:46

jumancy

1,290
1
9
16

missing colon from your `visible` psuedo selector – Mark Walters Apr 30 '12 at 10:48
No worries, thought it was just a typo. :) – Mark Walters Apr 30 '12 at 10:52
OP appears to want an event raised, not to test the visibility – Alnitak Apr 30 '12 at 10:59

thecodeparadox · Answer 2 · 2012-04-30T11:04:17.790

2

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
}

edited Apr 30 '12 at 11:04

answered Apr 30 '12 at 10:46

thecodeparadox

86,271
21
138
164

OP appears to want an event raised, not to test the visibility – Alnitak Apr 30 '12 at 10:59

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

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.

edited May 23 '17 at 12:21

Community

1
1

answered Apr 30 '12 at 11:00

Alnitak

334,560
70
407
495

score -1 · Answer 4 · edited Jul 16 '14 at 12:21

-1

$(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
}

edited Jul 16 '14 at 12:21

rlemon

17,518
14
92
123

answered Apr 30 '12 at 10:46

Kunal Vashist

2,380
6
30
59

Does a jQuery object even have access to the `style` property? I thought it din't. So `$("your id").style.display="block";` won't work. you either have to change it to `$("your id")[0].style.display="block";` or `$("your id").get(0).style.display="block";` or use the jQuery object itself: `$("your id").attr('style','display:block');` or something similar – Elias Van Ootegem Apr 30 '12 at 10:52
the comment above mine is correct. the code you provided throws a syntax error. – rlemon Jul 16 '14 at 12:22

How to execute jQuery code if a div display style changes from none to block?

4 Answers4