Divi Areas Pro has automatic triggers to open an Area after a few seconds. It can be done with a few clicks, and does not require any coding skills.
Recently, we have received requests from customers that want to apply the same logic and apply it to the close event: Hide a Popup or Fly-In after a few seconds, without the user clicking anywhere.
In this tutorial, we’re going to implement that auto-close logic using the JS API. For this tutorial, you need a website with Divi Areas Pro 2.3.6 or Popups for Divi 2.3.6 or later.
Click the button to see a demo Fly-In that automatically closes after 3 seconds.
Auto Close logic
JavaScript has a very convenient way to integrate delayed actions: We use setTimeout()
to schedule a delayed action. This function is a core function of every browser:
function autohideArea() {
DiviArea.hide("sample-area");
}
setTimeout(autohideArea, 5000);
The above snippet starts a timer that calls DiviArea.hide("sample-area")
after 5000 milliseconds (i.e. after 5 seconds).
This script has a few drawbacks:
- It starts the auto-close timer on page load, which is wrong.
- The timer is only started once, even if the Area is opened multiple times.
- It has a hard-coded area-ID.
- The auto-hide timer does not stop when the user manually closes the Area.
Let’s address those issues!
Remove hard-coded IDs
First, we create two functions for the core logic. One function will start the auto-hide timer for an Area. The other function stops that auto-hide timer again.
var timer = {};
function startAutohide(area, delay) {
var id = area.theId();
stopAutohide(area);
timer[id] = setTimeout(function() {
area.hide();
timer[id] = 0;
}, 1000 * delay);
}
function stopAutohide(area) {
var id = area.theId();
if (timer[id]) {
clearTimeout(timer[id]);
timer[id] = 0;
}
}
Those two functions are very generic and do not have hard-coded IDs or delays. In the next step, we will use startAutohide()
and stopAutohide()
to bind the custom logic to certain Areas on our page.
Ready?
Auto-hide certain Areas
For this final step, we use the JS API that comes with Divi Areas Pro (and Popups for Divi) to call our custom functions when a certain Area is opened or closed.
DiviArea.addAction('show_area', function(area) {
if (area.hasId('demo-flyin')) {
startAutohide(area, 3); // Auto-close the "#demo-flyin" after 3 seconds.
}
});
DiviArea.addAction('hide_area', function(area) {
stopAutohide(area);
});
In this sample, we apply the auto-close logic to the “demo-flyin” Area. You can replace line 2 with a different condition to auto-close other Areas. Here are some more conditions to help you with your custom logic:
// Apply the logic to multiple Areas, using area.hasId().
if (area.hasId('demo-flyin') || area.hasId('other-area')) { ... }
// Apply the logic to all Fly-Ins, using area.isType().
if (area.isType('flyin')) { ... }
// Apply logic to all Areas that do not have a close button, using area.getData().
if (!area.getData('show-close')) { ... }
// Apply logic to all Areas that contain <h3 class="demo">, using area.find().
if (area.find('h3.demo').length) { ... }
// A combination of above.
if (area.isType('flyin') && ! area.hasId('main-menu')) { ... }
Full snippet
Here is the full snippet that you can copy-paste to your website. We wrap the custom code inside an IIFE to avoid conflicts with other scripts:
(function() {
var timer = {};
function startAutohide(area, delay) {
var id = area.theId();
stopAutohide(area);
timer[id] = setTimeout(function() {
area.hide();
timer[id] = 0;
}, 1000 * delay);
}
function stopAutohide(area) {
var id = area.theId();
if (timer[id]) {
clearTimeout(timer[id]);
timer[id] = 0;
}
}
DiviArea.addAction('show_area', function(area) {
if (area.hasId('demo-flyin')) {
startAutohide(area, 3);
}
});
DiviArea.addAction('hide_area', function(area) {
stopAutohide(area);
});
})()