Run javascript when div shows up

Question

I need tu run javascript (Stop JWPlayer) when DIV shows up. It shows approx. 15 sec after page is fully loaded.

The code I have so far

if (document.getElementById("overlay_div")) { jwplayer().stop(); }

i guess my code looks for overlay_div at the time of page load, and not after some time (15 sec in this case)

Edit: it turns out that DIV is actually there all the time but it switches from display: none to display:block after this time interval. Is there any way to run script whan div turns to display: block

Edit2: I managed to solve this on my own with the help of @elbunuelo Here is the code in case anyone needs it:

var interval = setInterval(function(){
 if (document.getElementById("overlay_main_div").style.display=="block"){ 
      jwplayer().stop(); 
      clearInterval(interval);
 } }, 1000);

instead of basing your logic on div visibility wouldn't it be better to put jwplayer().stop() in the same function which actually shows the div? — lostsource, Nov 16 '12 at 13:10

score 1 · Answer 1 · answered Nov 16 '12 at 13:22

1

You can add script tag just after the div, so it will run when markup is in place.

<div id="overlay_div"></div>
<script type="text/javascript">
if (document.getElementById("overlay_div")) { jwplayer().stop(); }
</script>

answered Nov 16 '12 at 13:22

Vyacheslav Voronchuk

2,403
19
16

score 0 · Accepted Answer · answered Nov 16 '12 at 13:16

0

Have you tried using an interval? i.e. Checking every 1000 ms or so if the div is present and then stopping the player?

var interval = setInterval(function(){
     if (document.getElementById("overlay_div")) { 
          jwplayer().stop(); 
          clearInterval(interval);
     }
}, 1000);

answered Nov 16 '12 at 13:16

elbunuelo

91
2

Thanks this was helpful, however, it turns out that DIV is actually there all the time but it switches from display: none to display:block after this time interval. Is there any way to run script whan div turns to display: block? – user1829531 Nov 16 '12 at 13:21
I know how to do it in Mootools, but I don't remember how to get a specific style rule in native Javascript. Are you using any framework? Quick edit: If you're not using any framework, [this](http://stackoverflow.com/questions/4172871/javascript-get-styles) post may be handy. Just get the 'display' style and check if its set to block instead of checking if the element exists – elbunuelo Nov 16 '12 at 13:30

nfroidure · Answer 3 · 2012-11-16T13:32:08.063

It depends on the way the div element is shown :

in your code : just call the function ;)
in third party code :
- Use mutation event observer if the node is inserted in the DOM tree https://developer.mozilla.org/en-US/docs/DOM/MutationObserver?redirectlocale=en-US&redirectslug=DOM%2FDOM_Mutation_Observers
- if the node is shown by another undectectable way (CSS addition) and as a fallback to the previous method, just create a timeout call an limit it to n times:

-

var times=0;
function divcheck() {
    if (document.getElementById("overlay_div")) { jwplayer().stop(); }
    else if(times<10) { times++; setTimeout(divCheck,1000); }
    }

setTimeout(divCheck,15000);

Run javascript when div shows up

3 Answers3