DiviAreaItem

  1. Home
  2. Knowledge Base
  3. Codex
  4. JS API
  5. 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”

KeyTypeAreasDescription
attach-tojQueryHoverThe element that triggers the Hover Area
close-altboolAffects default Close Button (no background-color)
close-delayfloatHoverDelay between close-trigger and actually closing the Area
close-triggerstringHoverEither “click” of “hover”
containerjQueryThe parent container of the Area (when attached to the DOM)
dark-modeboolAffects default Close Button (inverts colors)
has-show-animboolInternal usage
is-modalboolIgnore click on the background overlay
max-heightstringe.g. “400px”
max-widthstringe.g., “200px”
no-shadowboolHide default shadow
on-desktopboolTrigger on desktop devices
on-mobileboolTrigger on mobile devices
on-tabletboolTrigger on tablets
positionstringe.g., “bottom-right”
position-hstringEither “left”, “center”, “right”.
position-vstringEither “top”, “center”, “bottom”
show-closeboolShow the default close button
singletonboolPopupClose other Popups when
skip-animationboolInternal usage
trigger-exitboolPopup
Fly-In
Enable exit-intent trigger
wrap-classesstringAdditional classes that will be added to the area wrapper
z-indexinte.g., 100002

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

AliasTypeReturns / Sets
hide-closeboolOpposite of show-close
not-desktopboolOpposite of on-desktop
not-mobileboolOpposite of on-mobile
not-modalboolOpposite of is-modal
not-tabletboolOpposite of on-tablet
shadowboolOpposite 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.

Was this article helpful?

Related Articles