How make toast hide after few second without button #40800

Laszlo7801 · 2024-09-07T07:52:01Z

Laszlo7801
Sep 7, 2024

Hi,
As other people, I'm experiencing difficulties to make toast hide after few second. I've found this code that works : https://codepen.io/louismaximepiton/pen/xxmGLQj

However, now I'm looking for an adaptation of this code to show the toast when the page is loaded and make the toast disapear automatticaly after few seconds.

Could you help me ?

Answered by ANU1o

Sep 9, 2024

try this

HTML

<body onload="loaderToast()"></body>

Note: If it is raw HTML use this. Otherwise while using any framework, use the outermost tag or onload function related to the framework

Javascript

function loaderToast () { const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample) toastBootstrap.show() }

View full answer

ANU1o · 2024-09-09T11:55:11Z

ANU1o
Sep 9, 2024

try this

HTML

<body onload="loaderToast()"></body>

Note: If it is raw HTML use this. Otherwise while using any framework, use the outermost tag or onload function related to the framework

Javascript

function loaderToast () { const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample) toastBootstrap.show() }

1 reply

Laszlo7801 Sep 9, 2024
Author

Works like a charm.

Thanks ANU1o !

mrrizwan304 · 2024-09-11T09:38:30Z

mrrizwan304
Sep 11, 2024

To make a toast hide automatically after a few seconds without needing a button, you can use JavaScript to set a timer. Here's an example using HTML, CSS, and JavaScript:

HTML:
html
Copy code

This is a toast message!

CSS: css Copy code .toast { visibility: hidden; min-width: 250px; background-color: #333; color: white; text-align: center; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; transform: translateX(-50%); border-radius: 4px; }

.toast.show {
visibility: visible;
animation: fadeOut 0.5s 5s forwards; /* Fades out after 5 seconds */
}

@Keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
JavaScript:
javascript
Copy code
function showToast() {
var toast = document.getElementById("toast");
toast.classList.add("show");

// Hide the toast after 5 seconds
setTimeout(function(){
    toast.classList.remove("show");
}, 5000); // 5000ms = 5 seconds

}

// Call the function to display the toast
showToast();
Explanation:
The .show class is added to make the toast visible.
setTimeout is used to automatically remove the .show class after 5 seconds, causing the toast to disappear.
The @Keyframes fadeOut is used to animate the fade-out effect.
When showToast() is called, the toast will appear and automatically hide after 5 seconds.

1 reply

ANU1o Sep 11, 2024

In his source code data-bs-delay="1000" is already doing that. He'll need to adjust it for disappearing.

Note that 1000 means 1 second.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

How make toast hide after few second without button #40800

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Bootstrap

How make toast hide after few second without button #40800

Laszlo7801 Sep 7, 2024

HTML

Javascript

Replies: 2 comments · 2 replies

ANU1o Sep 9, 2024

HTML

Javascript

Laszlo7801 Sep 9, 2024 Author

mrrizwan304 Sep 11, 2024

ANU1o Sep 11, 2024

Laszlo7801
Sep 7, 2024

Replies: 2 comments 2 replies

ANU1o
Sep 9, 2024

Laszlo7801 Sep 9, 2024
Author

mrrizwan304
Sep 11, 2024