Auto-Close Area After A Delay
Editorial Note We may earn a commission when you visit links from this website.

Auto-Close Area After A Delay

Avatar PhilippTutorialsDivi Areas ProPopups for Divi

Divi Areas Pro has automatic triggers to open an Area after a few seconds. It can be done with a few clicks and requires no coding skills.

Recently, we have received requests from customers who 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 will 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.

Demo Fly-In

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);
  });
})()

More Articles You Will Like