DiviArea.config()

  1. Home
  2. Knowledge Base
  3. JS API
  4. DiviArea.config()
DiviArea.config(id, attrib, value)
DiviArea.config(id, attrib) // attrib is an object with {attrib: value} pairs.

Configure the specified Area.

Params

id
(string|jQuery) Identifies the Area to display. The #-prefix is optional.
attrib
(string|object) A string defines a single attribute to update. To update multiple attributes at once, specify an object with a list of {attrib: value} pairs.
value
(string) Optional. The new value of the attribute. Only used, when the attrib parameter is a string.
You can omit the value for boolean attributes (such as “show-close”)

Returns

The function does not return anything.

Attributes

on-mobile
not-mobile
Boolean attribute
Default: on-moble
Whether to trigger the Area on mobile devices.
on-tablet
not-tablet
Boolean attribute
Default: on-tablet
Whether to trigger the Area on tablet devices.
on-desktop
not-desktop
Boolean attribute
Default: on-desktop
Whether to trigger the Area on desktop devices.
show-close
hide-close
Boolean attribute
Default: show-close
Whether to display a close button in the top right corner of the Area.
trigger-exit
Boolean attribute
Default: (unset)
Whether to trigger the area when an exit-intent is detected.
close-alt
Boolean attribute
Default: (unset)
Whether to use the alternate close button layout, which only displays an icon without the frame.
dark
Boolean attribute
Default: (unset)
Whether to use the alternate close button layout, which shows a light button with a dark background.
is-modal
not-modal
Boolean attribute
Default: not-modal
Whether the Popup is modal. A modal Popup stays visible when the user clicks on the background overlay.
Only used by Popup Areas
singleton
Boolean attribute
Default: (unset)
Whether the Popup is a singleton. By default, multiple Popups can be opened at the same time (they will stack and overlap each other). However, when a singleton Popup is opened, it will first close any other Popup.
Only used by Popup Areas
shadow
no-shadow
Boolean attribute
Default: shadow
Whether to apply the default box-shadow to the Area.
alternate-id
Default: (unset)
The value defines an Alias to address the Area. See below for an example.
max-width
max-height
Default: (unset)
The value defines a max-width or max-height to the area.
When a max-height is defined, the area contents will scroll vertically when needed.
z-index
Default: (unset)
The value defines the z-index of a Hover Area.
Only used by Hover Areas
position
Default: “center-center”
The value defines the alignment of the popup. Possible values are:
top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, top-right
Not every Area-Type supports all positions.
close-trigger
Default: “hover”
The value defines when a Hover Area should be hidden again. Possible values are:
click .. Hide the Hover Area when the user clicks anywhere outside the Area.
hover .. Hide the Hover Area when the mouse leaves the trigger element.
Only used by Hover Areas
close-trigger
Default: 0.0
The value is a float number that defines a delay (in seconds) between the closes-trigger event and actually hiding a Hover Area.
Only used by Hover Areas

Examples

// The "#" prefix is optional. Following statements are identical:
DiviArea.config('sample', 'show-close', true);
DiviArea.config('#sample', 'show-close', true);
// For boolean attributes, the third parameter is optional.
DiviArea.config('#sample', 'show-close');
DiviArea.config('#sample', 'show-close', true); // Same as above.

// Boolean attributes can be removed by passing in the value `false` or by 
// setting the negated attribute.
DiviArea.config('#sample', 'show-close', false); // This removes the close button.
DiviArea.config('#sample', 'hide-close', true); // Also removes the close button.
// Example of configuring the Area via an object.
DiviArea.config('#sample', { 
    'show-close': true,
    'trigger-exit': true,
    'close-alt': true
});
// Example of setting non-boolean attributes.
DiviArea.config('#sample', 'max-width', '200px');
DiviArea.config('#sample', { 
    'max-height': '10vh',
    'z-index', 20
});
// Use the alternate-id option.
DiviArea.config('#sample', 'alternate-id', 'foobar');

// From now on, the "#sample" Area can be also accessed via "#foobar".
DiviArea.show('#foobar');
DiviArea.hide('#sample');

Notes

Was this article helpful?

Related Articles