nilbuild/jquery-toast-plugin is one of the open-source repositories TopGit tracks, currently at 1.5k stars, written primarily in JavaScript. Highly customizable jquery plugin to show toast messages
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
A plugin to show highly customizable notifications to the user.
How to use
You can install the plugin via Bower:
bower install jquery-toast-plugin
or via npm
npm install jquery-toast-plugin
Or directly download the repository and place the content of dist wherever you can access them.
Include the CSS and JS files.
Simply do $.toast('Toast message to be shown') Of course it would be the world's simplest toast message but believe me you can do a lot more with the options.
Demo
For some quick demos and a detailed documentation accompanied by the demos for each of the available options can be accessed through http://kamranahmed.info/toast
Quick usage examples
Simple textual toast
// Non sticky version
$.toast("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.")
// Sticky version
$.toast({
text : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.",
hideAfter : false
})
Toast using HTML as a text
// Non sticky
$.toast("Let's test some HTML stuff... <a href='#'>github</a>")
// sticky
$.toast({
text : "<strong>Remember!</strong> You can <span style='font-weight: bold; color:red;' class='horribly-styled'>always</span> introduce your own × HTML and <span style='font-size: 18px;'>CSS</span> in the toast.",
hideAfter : false
})
Unordered list elements as the text of toast using array
// Non sticky version
$.toast(["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"])
// Sticky version
$.toast({
text : ["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"],
hideAfter : false
})
Changing the animations
$.toast({
text : "Let's test some HTML stuff... <a href='#'>github</a>",
showHideTransition : 'slide' // It can be plain, fade or slide
})
Changing the formatting
$.toast({
text : "Let's test some HTML stuff... <a href='#'>github</a>",
showHideTransition : 'slide', // It can be plain, fade or slide
bgColor : 'blue', // Background color for toast
textColor : '#eee', // text color
allowToastClose : false, // Show the close button or not
hideAfter : 5000, // `false` to make it sticky or time in miliseconds to hide after
stack : 5, // `fakse` to show one stack at a time count showing the number of toasts that can be shown at once
textAlign : 'left', // Alignment of text i.e. left, right, center
position : 'bottom-left' // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values to position the toast on page
})
Resetting the toast
var myToast = $.toast('Some toast that needs to be removed.');
myToast.reset(); // remove the toast "Some toast that needs to be removed"
What if I want to reset all the toasts at once? You may ask. Well in that case, you can do the following:
$.toast().reset('all');
Updating the toast
Suppose, you had shown some toast upon the page, a sticky toast for example and now you want to update the toast. You can do the following
var myToast = $.toast({
text : 'Some toast that needs to show the success message after the ajax call.',
hideAfter : false,
bgColor : '#E01A31'
});
window.setTimeout(function(){
myToast.update({
text : '<strong>Updated after a few seconds</strong>',
bgColor : '#23B65D'
});
}, 5000);
To learn more about how to use and customize it, head to http://kamranahmed.info/toast. Also you can find a customizer there that will let you modify the look and feel of the toast however you like it.
You can simply download the repo or if you are in rush the minified CSS or non-minified CSS can be found and minified JS and non minified JS can also be found.
Features
Show different types of toasts i.e. informational, warning, errors and success
Custom toast background color and text color
Ability to hack the CSS to add your own thing
Text can be provided in the form of
Array (It's elements will be changed to an un ordered list)
Simple text
HTML
Events support i.e. beforeHide, afterHidden, beforeShow, afterShown
Fade and Slide show/hide transitions support (More to come)
Supports showing the loader for the toast
You can position the toast, wherever you want there is support for top-left, top-rightbottom-left and bottom-right, top-center, bottom-center and mid-center ...sighs! That's a whole lot of options, isn't it? No, you say. Ok then here is the most exciting thing, you can also introduce your own positioning just by passing a simple js object containing { top: - , bottom: -, left: -, right: - }
Ability to add sticky toast
Optional stack length can be defined (i.e. maximum number of toasts that can be shown at once)
Please report any bugs or features you would like added.
How active is development on nilbuild/jquery-toast-plugin?
The most recent commit recorded on nilbuild/jquery-toast-plugin was 4.2 years ago, based on the GitHub push timestamp. The repository has 498 forks — one of the better signals of community interest.
How many stars does nilbuild/jquery-toast-plugin have?
nilbuild/jquery-toast-plugin has 1.5k GitHub stars — refresh the page for the live number, or check github.com/nilbuild/jquery-toast-plugin. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
What is nilbuild/jquery-toast-plugin?
nilbuild/jquery-toast-plugin (nilbuild/jquery-toast-plugin) is a JavaScript project on GitHub. From the project's own README: Highly customizable jquery plugin to show toast messages
What language is nilbuild/jquery-toast-plugin written in?
nilbuild/jquery-toast-plugin is written primarily in JavaScript. GitHub's language field is based on the largest share of bytes in the default branch.
What topics is nilbuild/jquery-toast-plugin associated with?
GitHub's repository topics for nilbuild/jquery-toast-plugin: "growl", "growl-notifications", "jquery-toast-plugin", "notifications", "toast", "toast-message", "toastr". TopGit's editorial category is open-source.
Read full README in the tab above.
Is jquery-toast-plugin worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of jquery-toast-plugin.
/jquery-toast-plugin