<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>

CC BY-SA 3.0
2014-09-30T04:30:31.533Z
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.
Justin Kimbrell
CC BY-SA 3.0
2014-09-08T17:41:25.590Z
2014-09-08T17:43:52.207Z
2014-09-08T17:43:52.207Z
Brandon Kelly
<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>

<plugin-development><custom-fieldtype>
Is there a JavaScript event available for when the parent tab of a custom field is shown?
# 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, you will be able to listen for a custom resize event on your container div using Garnish.Base::addListener(), which will trigger when the element first gets a height.
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.  

---

