DiviArea.show()

  1. Home
  2. Knowledge Base
  3. Codex
  4. JS API
  5. JS Functions
  6. DiviArea.show()
DiviArea.show(area, event)

Open the Area with the given ID. When an animation is defined for the area, the animation will start to play.

Popup Areas: When the Popup is already open, it will be brought to the front. This function also dims the background and disabled document scrolling, by calling DiviArea.showOverlay().

Params

area
(string|jQuery|DiviAreaItem, required) Identifies the Area to display.
Either a string with the Area-ID (the #-prefix is optional), the Areas jQuery element, or the DiviAreaItem.
event
(Event|jQuery, required) Required for Hover Areas.
It specifies the element against which the Hover Area is positioned. Ignored for any other Area type.

Returns

The function returns true, if the area exists and was displayed. When the return value is false, a debug output describes the reason.

Examples

// The "#" prefix is optional. Following statements are identical:
DiviArea.show('sample');
DiviArea.show('#sample');
// The <id> param can also be the jQuery element of the Area:
var demo = DiviArea.register('#sample');
DiviArea.show(demo);
// Display a Hover Area relative to an <a> tag (Divi Areas Pro only):
jQuery('a').on('mouseenter', function(event) {
    DiviArea.show('#hover-area', event);
});

Notes

This function was previously named DiviPopup.openPopup().

Debugging

When the Area is not displayed please check your JavaScript console for errors. You might see the following message: “[DiviAreas] Could not find an area with the ID: some-popup”. This error can happen, when you call the function too early, or when you misspell the Area ID.

This function can be called on/after the init_area-action. The earliest possible implementation looks like this:

// Show the sample-area as soon as the JS API is ready:
DiviArea.addAction('init_area_sample', function(area) {
    DiviArea.show(area);
});

If you are certain that the JS API is ready and still get the error, please check the spelling of the Area ID and make sure that the Area actually exists on the current page. You can either use DiviArea.getArea(‘id’) or DIviArea.listAreas() to find out, if an Area exists or not:

// Check, if the given Area exists:
var myPopup = DiviArea.getArea('#sample');
if (myPopup) {
    DiviArea.show('#sample');
} else {
    console.log('Could not find the #sample popup. List of available Areas:');
    console.log(DiviArea.listAreas());
}

Was this article helpful?

Related Articles