Reputation: 10695
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
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
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
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