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”.
Paramstype
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.
Paramsselector
When not specified, the area element is returned.
When a selector is given, then matching elements inside the Area will be returned, likearea.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.
Paramskey
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.
Paramskey
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 )orarea.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.