DiviAreaItem

This class defines a single Divi Area ("Popup").

Methods

theId()
Returns the Area ID, with the leading hash, e.g. "#my-popup"

Returns

(string) The Area ID
theKey()
Returns the Area Hook-Key that is used in various actions. The Hook-Key is created by DiviArea.Utils.sanitizeHookName().

Returns

(string) The Hook-Key
theType()
Returns the Area type.

Returns

(string) Either "popup", "flyin", "inline", "hover"
inDom()
Returns true, when the Area is currently attached to the DOM tree.

Returns

(bool) True or False
isVisible()
Returns true, when the Area is currently visible.

Returns

(bool) True or False
isType(type)
Tests, whether the current Area matches the given type. Recognized types are "popup", "hover", "inline", "flyin".

Params

type
A comma-separated list of types, optionally prefixed with "not:" to invert the result.

Examples:
* "popup": Returns true when the area is a Popup
* "inline, hover": Returns true when the area is an Inline Area or a Hover Area
* "not: popup": Returns false when the area is a Popup
* "not: popup, hover": Returns false, when the Area is a Popup or Hover Area.

Returns

(bool) True or False
get( [selector] )
Returns the jQuery element of the Area.

Params

selector
When not specified, the area element is returned.
When a selector is given, then matching elements inside the Area will be returned, like area.get( '.close' )

Returns

(jQuery) Always a jQuery element.
getWrap()
Returns the jQuery element of the Area wrapper.

Returns

(jQuery) Always a jQuery element.
getData( key )
Get the value of a given Area configuration.

Params

key
The option value to return.

Returns

(mixed) The return type and value depend on the option.
setData( key, value )
Update the value of a given Area configuration. This function can be used to store custom information of any type inside the Area. A list of all internal keys is in the section below.

Params

key
The option value to return.

value
The new option value.
Internal keys are sanitized, custom values are stored without modification.

Returns

Nothing
hasClass( name )
Convenience function. Same as area.get().hasClass()

Returns

(jQuery) The jQuery element of the area.
addClass( name )
Convenience function. Same as area.get().addClass()

Returns

(jQuery) The jQuery element of the area.
removeClass( name )
Convenience function. Same as area.get().removeClass()

Returns

(jQuery) The jQuery element of the area.
attr( name, [value] )
Convenience function. Same as area.get().attr()

Returns

(jQuery) The jQuery element of the area.
removeAttr( name )
Convenience function. Same as area.get().removeAttr()

Returns

(jQuery) The jQuery element of the area.
find( selector )
Convenience function. Same as area.get().find( selector ) or area.get( selector )

Returns

(jQuery) The jQuery element of the area.

Internal Data-Keys

Note that key names are case-insensitive and all hyphens "-" will be ignored. That means the following keys are identical: "show-close", "ShowClose", "showclose".

For readability, this document ion shows the hyphenated version, e.g., "show-close"

Key Type Areas Description
attach-to jQuery Hover The element that triggers the Hover Area
close-alt bool - Affects default Close Button (no background-color)
close-delay float Hover Delay between close-trigger and actually closing the Area
close-trigger string Hover Either "click" of "hover"
container jQuery - The parent container of the Area (when attached to the DOM)
dark-mode bool - Affects default Close Button (inverts colors)
has-show-anim bool - Internal usage
is-modal bool - Ignore click on the background overlay
max-height string - e.g. "400px"
max-width string - e.g., "200px"
no-shadow bool - Hide default shadow
on-desktop bool - Trigger on desktop devices
on-mobile bool - Trigger on mobile devices
on-tablet bool - Trigger on tablets
position string - e.g., "bottom-right"
position-h string - Either "left", "center", "right".
position-v string - Either "top", "center", "bottom"
show-close bool - Show the default close button
singleton bool Popup Close other Popups when
skip-animation bool - Internal usage
trigger-exit bool Popup
Fly-In
Enable exit-intent trigger
wrap-classes string - Additional classes that will be added to the area wrapper
z-index int - e.g., 100002

The following keys are aliases and will return the value of a key from the above list:

Alias Type Returns / Sets
hide-close bool Opposite of show-close
not-desktop bool Opposite of on-desktop
not-mobile bool Opposite of on-mobile
not-modal bool Opposite of is-modal
not-tablet bool Opposite of on-tablet
shadow bool Opposite of no-shadow
// Following statements are identical: 
hasShadow = area.getData( 'shadow' );      // alias, returns the value "not no-shadow"
hasShadow = ! area.getData( 'no-shadow' ); // returns the value "no-shadow"

// Also, those two statements are identical: 
area.setData( 'shadow' false );    // alias, set "no-shadow" to "not false" (i.e., true).
area.setData( 'no-shadow', true ); // sets "no-shadow" to true.

Notes

All DiviAreaItem objects are created by calling the JS API function DiviArea.register(), which happens during the ready action. However, you can also use that function at a later point to create custom Divi Areas.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.