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.
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 ...
}
visible psuedo selector
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
}
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