DiviArea.register()

DiviArea.register(element, options, type)

Turns a plain element into a Divi Area. Both, Divi Areas Pro and Popups for Divi will call this function automatically for any detected Area. U

se this function, if you want to manually turn any section/div/etc. into a Divi Area.

A registered Area is removed from the DOM tree and can be displayed again by calling DiviArea.show().

Static inline Areas: When you register a static Inline-Area, it is not removed from the DOM tree but stays visible without calling DiviArea.show().

Params

element

(string|jQuery|HTMLElement, required) An element ID attribute (the # is optional) or a valid jQuery selector, such as '.et_pb_section1'.
Alternatively, this parameter can be a HTMLElement or jQuery object that will be turned into an Area.

options

(object, optional) Area configuration. Possible flags are documented in DiviAreaItem.setData()
Default: {} (empty object)

type

(string, optional) Defines the area type: popup, flyin, hover, inline.
When no type is defined, the plugin looks at the classes and attributes of the element.
Default: false

Returns

Returns a DiviAreaItem object with the new Divi Area, or false when the registration failed for some reason.

When the function returns false, additional details about the problem are output in the JS console.

On success, the function returns a DiviAreaItem object that's fully initialized and can instantly be displayed.

Examples

// The "#" prefix is optional. Following statements are identical:
DiviArea.register('sample');
DiviArea.register('#sample');

// The return value is the jQuery element of the Area or false.
var area = DiviArea.register('#sample');
if (area) {
    area.addClass('something-new');
}

// Manually register a hover area.
DiviArea.register('#sample', {}, 'hover');

// And display the hover area next to any <a> element, on mouseenter.
jQuery('a').on('mousenter', function(event) {
    DiviArea.show('#sample', event);
});

// Create a fly-in with some options.
var flyin = DiviArea.register(
  '#my-flyin',
  {'show-close': false, 'shadow': false},
  'flyin'
);

// Display the Fly-In after 5 seconds.
window.setTimeout(function() {
  DiviArea.show(flyin)
}, 5000);

// Create a dynamic Popup Area.
var div = jQuery('<div class="et_pb_section">Dynamic Area</div>');
var dynamic = DiviArea.register( div, {}, 'popup' );

// Display the Popup.
DiviArea.show(dynamic);

Notes

No notes