Answers.Body: <p>There is not, however if you have a Javascript class that extends <a href="https://github.com/pixelandtonic/Garnish/blob/master/Source/garnish.js#L472" rel="nofollow">Garnish.Base</a>, you will be able to listen for a custom <code>resize</code> event on your container div using <a href="https://github.com/pixelandtonic/Garnish/blob/master/Source/garnish.js#L601" rel="nofollow">Garnish.Base::addListener()</a>, which will trigger when the element first gets a height.</p>
  
  <pre class="lang-javascript prettyprint-override"><code>window.MyClass = Garnish.Base.extend(
  {
      container: null,
  
      init: function(container)
      {
          this.$container = $(container);
  
          // Is the container already visible?
          if (this.$container.height())
          {
              this.doStuff();
          }
          else
          {
              // Hold off until it is
              this.addListener(this.$container, 'resize', function(ev)
              {
                  this.removeListener(this.$container, 'resize');
                  this.doStuff();
              }
          }
      },
  
      doStuff: function()
      {
          // this.$container is visible now
          // ...
      }
  });
  </code></pre>
  
  <p>Off-topic, but worth noting: one of the benefits of using Garnish.Base::addListener() rather than jQuery.on() or jQuery.bind() is that it will maintain the scope for you in the callback function. So you don’t need to worry about doing that yourself with jQuery.proxy(), e.g.</p>
  
  <pre><code>this.$container.bind('click', $.proxy(function(ev)
  {
      // `this` would refer to the container element here, if it weren’t for $.proxy().
  }, this);
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-30T04:30:31.533Z
Answers.Text: I finally got around to implementing this. This logic worked out great. I had to make a couple changes to get it working, but the overall logic was sound. Before I had a class that would bootstrap all the fieldtype JS, but I changed that class so that it extended Garnish.Base and got it all working great as far as I can tell.
Answers.UserDisplayName: Justin Kimbrell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-08T17:41:25.590Z
Answers.LastActivityDate: 2014-09-08T17:43:52.207Z
Answers.LastEditDate: 2014-09-08T17:43:52.207Z
Answers.UserDisplayName: Brandon Kelly
Body: <p>I need to have a JavaScript event that is triggered when the parent tab of my field type instance is shown on the entry form. So if the field is on the second tab, the div is hidden on instantiation. The div is obviously shown once the parent tab is clicked. I need this event to reset the map in my field type. If a map is instantiated with a hidden div, it must be redrawn before it can be displayed properly. So when the div displays (after the parent tab click) I need to trigger the method to redraw the map. Is there a JavaScript event available for this and if so, how would I use it? </p>
  
  <p>If no such event exists and if one can't be added, I guess the only other way would be to try to traverse the DOM and add click events to the respective tabs. This feels kind of like a hack though and would break if the DOM changes.</p>
  
Tags: <plugin-development><custom-fieldtype>
Title: Is there a JavaScript event available for when the parent tab of a custom field is shown?
ThreadText: # Is there a JavaScript event available for when the parent tab of a custom field is shown?
  
  (Asked by: username_0 on 2014-09-06)
  
  I need to have a JavaScript event that is triggered when the parent tab of my field type instance is shown on the entry form. So if the field is on the second tab, the div is hidden on instantiation. The div is obviously shown once the parent tab is clicked. I need this event to reset the map in my field type. If a map is instantiated with a hidden div, it must be redrawn before it can be displayed properly. So when the div displays (after the parent tab click) I need to trigger the method to redraw the map. Is there a JavaScript event available for this and if so, how would I use it?
  
  If no such event exists and if one can't be added, I guess the only other way would be to try to traverse the DOM and add click events to the respective tabs. This feels kind of like a hack though and would break if the DOM changes.
  
  **Tags:** plugin-development, custom-fieldtype
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2014-09-08. Score: 1 | Accepted answer
  
  There is not, however if you have a Javascript class that extends [Garnish.Base](https://github.com/pixelandtonic/Garnish/blob/master/Source/garnish.js#L472), you will be able to listen for a custom `resize` event on your container div using [Garnish.Base::addListener()](https://github.com/pixelandtonic/Garnish/blob/master/Source/garnish.js#L601), which will trigger when the element first gets a height.
  
  ```javascript
  window.MyClass = Garnish.Base.extend(
  {
      container: null,
  
      init: function(container)
      {
          this.$container = $(container);
  
          // Is the container already visible?
          if (this.$container.height())
          {
              this.doStuff();
          }
          else
          {
              // Hold off until it is
              this.addListener(this.$container, 'resize', function(ev)
              {
                  this.removeListener(this.$container, 'resize');
                  this.doStuff();
              }
          }
      },
  
      doStuff: function()
      {
          // this.$container is visible now
          // ...
      }
  });
  
  ```
  
  Off-topic, but worth noting: one of the benefits of using Garnish.Base::addListener() rather than jQuery.on() or jQuery.bind() is that it will maintain the scope for you in the callback function. So you don’t need to worry about doing that yourself with jQuery.proxy(), e.g.
  
  ```
  this.$container.bind('click', $.proxy(function(ev)
  {
      // `this` would refer to the container element here, if it weren’t for $.proxy().
  }, this);
  
  ```
  
  > **Comments:**
  > **username_0**: I finally got around to implementing this. This logic worked out great. I had to make a couple changes to get it working, but the overall logic was sound. Before I had a class that would bootstrap all the fieldtype JS, but I changed that class so that it extended Garnish.Base and got it all working great as far as I can tell.  
  
  ---
  
  