Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

Overview

Pure Javascript Toaster

Requires Nothing

Demo

Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

What Is This Toast You Speak Of?

While toast is most often used to describe sliced bread that has been browned by dry heat, it can really refer to any kind of material that has been browned in such fashion.

Or - as is our case - toast can refer to a non-modal, unobtrusive UI element used to display brief, auto-expiring (aka auto-dismissing) windows of information to a user. It does not accept focus or user input, nor does it interrupt the current activity.

While the definitive origin of the term "toast" to describe this type of notification system is unknown to me, it could reasonably be a reference to either (a) the salutation or words of congratulations, good wishes, appreciation, etc., spoken immediately before drinking to a person or event or (b) the fact that it pops up like bread from a toaster. Cheers!

Usage

Include the toaster-box.js JavaScript file and toaster-box.css CSS file on your HTML page, then display toast messages anytime like this:

/*
* Pass an parameters as an object:
* The only required paramter is message
* Order does not matter
*/
new ToasterBox({ msg : 'Your message here' });
new ToasterBox({ msg : 'Your message here', duration : 3000 });
new ToasterBox({ msg : '<strong>Success</strong> Your message here', html : true, closeButton : false });
new ToasterBox({ msg : 'Your message here', maxWidth : 350, position : 'top-right' });
new ToasterBox({ msg : 'Your message here', autoOpen : false, closeIcon: '<i class="fas fa-close">' });
new ToasterBox({ msg : 'Your message here', className: 'custom-class' });
You might also like...

Exposes theming options available in Joy UI by providing color palette and typography controls.

Joy Theme Creator Note: Joy UI is currently in alpha - some things may not be finished or working as expected. This project exposes the theming option

Dec 28, 2022

A tiny clock and date, period, or duration math library 2k (minified/gzipped)

timewave v0.1.4 A tiny time simulation and date/time math library 3k (minified/gzipped) const clock = Clock(new Date(2022,1,1),{tz:'America/New_York

Dec 18, 2022

Pure CSS toggle switch

Pure CSS toggle switch demo install npm i toggle-switch-css or yarn add toggle-switch-css use label class="toggle-switch my-toggle-switch" in

Sep 14, 2021

A pure CSS toggle switch for form input checkboxes

A pure CSS toggle switch for form input checkboxes

Toggle Switchy A pure CSS toggle switch for form input checkboxes Preview Installation CSS link rel="stylesheet" href="toggle-switchy.css" HTML lab

Dec 8, 2022

An Obsidian plugin that allows adding iframes with custom styling as editor tabs. Also comes with presets for Google Keep and more.

An Obsidian plugin that allows adding iframes with custom styling as editor tabs. Also comes with presets for Google Keep and more.

Obsidian Custom Frames An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep an

Jan 8, 2023

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

Jun 27, 2022

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time. Dropdown, navigation bu

Nov 25, 2022

It's an alert library build with JavaScript. You can replace your traditional JavaScript alert, confirm and toast with the library.

asteroid-alert It's an alert library build with JavaScript. You can replace your traditional JavaScript alert, confirm with the library. It has also e

Mar 12, 2021

Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop.

 Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop.

MultiDeviceHover Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop. Usage Install Using npm, install multi

Oct 5, 2021
Owner
Kuldeep
Kuldeep
A lightweight JavaScript library for creating snackbar & toaster notifications.

Notify.js Notify.js is a lightweight (2.3kb) utility library for creating snackbar and toaster notifications. Installation Download Notify.js via NPM:

Kyle Andrews 7 Feb 13, 2022
Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

null 5 Oct 23, 2022
✨ Small and Clean JavaScript Toast Notifications

BuzzNotify Small and Clean JavaScript Toast Notifications New version introduces breaking changes! Now the styles come separately and you will have to

R. Eliut 9 Aug 23, 2022
Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.

Key Sequence Shortcut Key Sequence Shortcut is an obsidian plugin, allow binding key sequences to an obsidian command. For example If we assume "t" st

Yu Wang 26 Dec 26, 2022
A lightweight JavaScript library that renders text in a brilliant style by displaying strings of random characters before the actual text.

cryptoWriter.js A lightweight javascript library which creates brilliant text animation by rendering strings of random characters before the actual te

Keshav Bajaj 2 Sep 13, 2022
A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

Strapi Preview Button A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view. Get Started Features I

Matt Milburn 53 Dec 30, 2022
Turn an HTML input box to a duration picker, without jQuery

html-duration-picker.js html-duration-picker.js is a very tiny JS library used for transforming a native HTML text input into a duration picker. The a

Dan Chif 27 Oct 19, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023