0

Is there a way to wait for a particular tab/panel to be displayed (display : block) before the JS is executed?

something like: 

$document.getElementById( '#panel1' ).style.display = 'block' {
// Run code //
}
R0LL
  • 73
  • 10
  • 1
    I think we're going to need more context in order to answer your question. What are you trying to accomplish, and what does the rest of your code look like? – S McCrohan Apr 19 '15 at 16:52
  • Do you mean it contains external resources (e.g. images), and you want to wait until those have finished loading? Or do you want to wait until the element has been loaded to the DOM? – Oriol Apr 19 '15 at 16:55
  • I have a slide out panel that contains a panel with an img-gallery, I don't want the img-galley code to be executed when the main-page is loaded, but rather when the particular img panel is clicked/loaded. The img-gallery code will not execute correctly when "displayed: none;" as the img panel is sat to when the main-page is loaded. – R0LL Apr 19 '15 at 16:58
  • You should with a [`MutationObserver`](http://stackoverflow.com/a/20683311/451969). – Jared Farrish Apr 19 '15 at 16:59
  • You can use the jequery attrchange plugin: http://meetselva.github.io/attrchange/ – dognose Apr 19 '15 at 18:12

1 Answers1

0

There is currently no reliable cross-browser method to listen for a change to a CSS property via JavaScript. Instead, you would need whatever script is setting display: block to run the additional code when it's complete.

For example:

function showPanel() {
   document.getElementById( '#panel1' ).style.display = 'block';
   // Run code //
}

Or with jQuery:

function showPanel() {
   $('#panel1').show();
   // Run code //
}

As was mentioned in another comment by Jared Farrish, you could look into the MutationObserver. However, it won't work in older browsers, like IE < 11, or on some mobile devices.

Dale Harris
  • 550
  • 4
  • 14