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
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”
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.
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
.
@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.
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);
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);
}
Hey, Where do i put that?
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.
Techyrack Website stock market day trading and youtube monetization and adsense Approval
Adsense Arbitrage website traffic Get Adsense Approval Google Adsense Earnings Traffic Arbitrage YouTube Monetization YouTube Monetization, Watchtime and Subscribers Ready Monetized Autoblog
from Web Development – My Blog https://ift.tt/RrYcNgM
via IFTTT
No comments:
Post a Comment