Time limit for notify

[norbertkoteles10]

Hello guys

I recently started using javascript, and i made 2 buttons, which if pressed, then i get a push notification on my phone, and i get a notify too ( Request has been sent, OK or ERROR ), but its there until I click X, to close it.
My question is can i give a time limit to it? For example after 10sec it disappears on its own.

Thanks in advance

[Martyr2]

If you are referring to the Notification API, then those notifications should (on most browsers) automatically close themselves after about 4 or so seconds. This is stated at the resource below in the section titled “Closing Notifications”

Using the Notifications API - Web APIs | MDN

There they also advise that you should not dismiss notifications automatically because you want the user to always be in control of when the notifications are closed. Using the close() function also may have the undesired effect of removing the notification before the user sees it and also remove it from further interaction. Something the user may not want.

I hope this is what you were referring to.

[norbertkoteles10]

hey!
No, im not referring to API notifications.
I meant on my site, i send a little notify, when i press a button, it says “request has been sent” then if its all ok then “OK”

I can send you my code if you like
.

[rpg_digital]

@norbertkoteles10

I can send you my code if you like

@norbertkoteles10 Rather than send could you share a link or a sample of the code here?

That way others can contribute. It may also be helpful to other members who run into the same issue.

[Paul_Wilkins]

@norbertkoteles10

I recently started using javascript, and i made 2 buttons, which if pressed, then i get a push notification on my phone, and i get a notify too ( Request has been sent, OK or ERROR ), but its there until I click X, to close it.
My question is can i give a time limit to it? For example after 10sec it disappears on its own.

Yes there certainly is a way.

When you show the notification, use setTimeout with a delay of 10 seconds, where removeNotification is a function.

setTimeout(removeNotification, 10 * 1000);

Or, if you have multiple notifications then you can use a function to supply different info, for example:

setTimeout(function removeRequestNotification() {
  removeNotification("#request");
}, 10 * 1000);

[norbertkoteles10]

function notify(msg, type) {
  // msg : notification message
  // type : notification type [info | success | error]

  // Create bar
  let bar = document.createElement("div");
  bar.classList.add("bar");

  // Set type
  if (type) {
    let icon = document.createElement("i");
    icon.classList.add("icon");
    switch (type) {
      case 'info':
        bar.classList.add("info");
        icon.innerHTML = "ℹ";
        break;
      case 'success':
        bar.classList.add("success");
        icon.innerHTML = "☑";
        break;
      case 'error':
        bar.classList.add("error");
        icon.innerHTML = "☓";
        break;
    }
    bar.appendChild(icon);
  }

  // Add msg
  let content = document.createElement("span");
  content.innerHTML = msg;
  bar.appendChild(content);

  // Add close button
  let close = document.createElement("span");
  close.innerHTML = "×";
  close.classList.add("closebutton");
  close.onclick = () => { bar.remove(); };
  bar.appendChild(close);

  // Display bar
  document.getElementById("notifications").appendChild(bar);
}

[norbertkoteles10]

Hey, Where do i put that?

[Paul_Wilkins]

Well you are using an element called bar.

It’s not possible to do the following:

setTimeout(removeNotification(bar), 10 * 1000); // doesn't work

The reason why that doesn’t work is that the removeNotification() function gets called right away. What’s needed instead is to pass a function to setTimeout, so that that function can then be called at a later time.

We need a function that can remember that element, which involves something called closure. That’s where an outer function returns an inner function, resulting in the inner one retaining knowledge of variables from the outer one.

That’s achieved by using a callback function. A callback function is best used for that, as that tell us that invoking the removeNotificationCallback() function results in another function.

setTimeout(function removeNotificationCallback(bar), 10 * 1000);

That removeNotificationCallback function needs to return a function. It is inside of that returned function that we do things with bar, as the el variable.

function removeNotificationCallback(el) {
  return function removeNotification() {
    el.remove();
  }
}
setTimeout(function removeNotificationCallback(bar), 10 * 1000);

That removeNotificationCallback function can be placed in your code outside of the notify() function.
The setTimeout line is best placed immediately after the last line in the notify function.

[norbertkoteles10]

Hey!

Thanks for the help!
If i place the “setTimeout(function removeNotificationCallback(bar), 10 * 1000);” in my code, i doesnt run, and i have no idea why. I placed it after my last line of my notify function.

Thanks in advance

[Paul_Wilkins]

This is when we want to be able to examine a live version of the page that’s having the issue.

[norbertkoteles10]

Meanwhile i figured it out that im gonna need to ‘el’ define (am i correct? what u sent me is just an example?), but im not sure if i understand this well enough.

function notify(msg, type) {
  // msg : notification message
  // type : notification type [info | success | error]

  // Create bar
  let bar = document.createElement("div");
  bar.classList.add("bar");

  // Set type
  if (type) {
    let icon = document.createElement("i");
    icon.classList.add("icon");
    switch (type) {
      case 'info':
        bar.classList.add("info");
        icon.innerHTML = "ℹ";
        break;
      case 'success':
        bar.classList.add("success");
        icon.innerHTML = "☑";
        break;
      case 'error':
        bar.classList.add("error");
        icon.innerHTML = "☓";
        break;
    }
    bar.appendChild(icon);
  }

  // Add msg
  let content = document.createElement("span");
  content.innerHTML = msg;
  bar.appendChild(content);

  // Add close button
  let close = document.createElement("span");
  close.innerHTML = "×";
  close.classList.add("closebutton");
  close.onclick = () => { bar.remove(); };
  bar.appendChild(close);

  // Display bar
  document.getElementById("notifications").appendChild(bar);
}
setTimeout(function removeNotificationCallback(bar), 10 * 1000);

function removeNotificationCallback(el) {
  return function removeNotification() {
    el.remove();
  }
}