Umesh Patil
Umesh Patil

Reputation: 10695

Check and process the div block after its loading

In my HTML, one div block(whose id looks like kdsm_32532535) is dynamically created after about 15-20 seconds of dom loading. I want to style this block with javascript with below code.

<script type="text/javascript">
$(document).ready(function(){

if($("div[id^='kdsm_']").length > 0){ 
  $(this).css({'margin':'20px','border':'1px dotted red;'});
}
  /* OR below code. None of them working :( */     
  $("div[id^='kdsm_']").css({'margin':'20px','border':'1px dotted red;'});
});
</script>

If I would do this in document.ready, it will not work because this div block doesn't exist on DOM ready.

How do i check continuously within interval of fraction, whether this div block is loaded or not ?

Upvotes: 0

Views: 211

Answers (3)

Karlisson
Karlisson

Reputation: 520

You can set a common class for these dynamically created divs, so the CSS rules will be applied automatically, like that:

.kdsm_divs { margin:20px, border: 1px dotted red; }

Or you can use the .ready() method that will check for DOM state. Try this:

$("div[id^='kdsm_']").ready(function () {
  $("div[id^='kdsm_']").css({'margin':'20px','border':'1px dotted red;'});
});

Upvotes: 1

Tom Hubbard
Tom Hubbard

Reputation: 16139

What about using style sheets?

You probably know the context where the divs will be placed so you can set up a style rule and let the browser apply the styles automatically.

Upvotes: 0

kaz
kaz

Reputation: 1943

You should call this method in script, that puts new block to DOM. OR use the setInterval method:

function applyCss(){

if($("div[id^='kdsm_']").length > 0){ 
  $(this).css({'margin':'20px','border':'1px dotted red;'});
}
  /* OR below code. None of them working :( */     
  $("div[id^='kdsm_']").css({'margin':'20px','border':'1px dotted red;'});
}

var interval = setInterval('applyCss()',2000);

If you want to stop this interval:

window.clearInterval(interval)

Upvotes: 1

Related Questions