• Stars
    star
    1,503
  • Rank 30,603 (Top 0.7 %)
  • Language
    JavaScript
  • Created almost 10 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Highly customizable jquery plugin to show toast messages

Jquery Toast Plugin

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-right bottom-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.

Copyright

MIT Β© Kamran Ahmed

More Repositories

1

developer-roadmap

Interactive roadmaps, guides and other educational content to help developers grow in their careers.
TypeScript
281,977
star
2

design-patterns-for-humans

An ultra-simplified explanation to design patterns
43,931
star
3

driver.js

A light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the page
TypeScript
21,286
star
4

git-standup

Recall what you did on the last working day. Psst! or be nosy and find what someone else in your team did ;-)
Shell
7,555
star
5

pennywise

Cross-platform application to open any website or media in a floating window
JavaScript
3,735
star
6

githunt

Hunt the most starred projects on any date on GitHub
JavaScript
2,825
star
7

roadmap.sh

Community driven roadmaps, articles and resources for developers
Nunjucks
2,196
star
8

brusher

Create beautiful webpage backgrounds
JavaScript
746
star
9

tab-switcher

Chrome Extension - Switch between the opened tabs in the blink of an eye
JavaScript
446
star
10

aws-cost-cli

CLI tool to perform cost analysis on your AWS account with Slack integration
TypeScript
406
star
11

itomate

Automate your iTerm layouts and session setup
Python
336
star
12

datastructures-in-javascript

Illustrated Data Structures β€” Video Series
JavaScript
172
star
13

kamranahmedse.github.io

Blog created using github-pages-blog-action
HTML
155
star
14

local-ses

Trap and test AWS SES emails locally
TypeScript
149
star
15

pipeline-js

Pipeline pattern implementation with the support for sync and async stages
JavaScript
148
star
16

awesome-minimal-sites

An opinionated collection of minimal yet beautiful websites.
137
star
17

github-pages-blog-action

Create good looking blog from your markdown files in a GitHub repository
CSS
84
star
18

redux-persist-expire

Expiring transformer for redux-persist
JavaScript
79
star
19

stylos

Webpack plugin to automatically generate and inject CSS utilities to your application
JavaScript
67
star
20

css-tailor

βœ‚ Automatically generate CSS from your HTML classes
JavaScript
67
star
21

git-first

Chrome Extension – Takes you to the first commit of a GitHub repository
JavaScript
65
star
22

express-api-problem

Express package to automatically turn your exceptions to the API Problem JSON response
TypeScript
65
star
23

laravel-faulty

Automatically turn your thrown exceptions to JSON response while conforming to API problem specification
PHP
64
star
24

smasher

Smash your directories to get JSON or Array representation and vice versa.
PHP
60
star
25

laravel-modular-boilerplate

A boilerplate to create modular application in laravel 5.1
PHP
59
star
26

copy-marker

Chrome extension β€” Create URLs with highlighted page selection
JavaScript
55
star
27

beetle

Abuse unicode to incite mayhem
Shell
51
star
28

jumper-bot

A game developed using HTML-5 canvas and Javascript
JavaScript
51
star
29

laravel-censor

A middleware for Laravel 5.* to easily redact or replace the words from the pages you want.
PHP
43
star
30

db-playground

Easily create a sandbox environment for your database exploration.
Shell
42
star
31

github-notable-comments

Chrome Extension – Navigate through the most reacted comments in github issues and PRs
JavaScript
40
star
32

gulp-css-tailor

βœ‚ Gulp plugin to automatically generate CSS from your HTML classes
JavaScript
39
star
33

github-diffs

Easier code reviews by collapse/expand diffs in pull requests
JavaScript
35
star
34

laraformer

Laravel 5.* package to easily introduce a transformation layer for your data
PHP
32
star
35

brainza-fps-unity3d-game

First person shooter 3d game.
ASP
31
star
36

makers.ae

Community of makers in UAE
TypeScript
31
star
37

github-actions-youtube

Codebase for my youtube video on GitHub actions
HTML
25
star
38

php-shorthand

Calculate unique shorthands for a given set of strings
PHP
25
star
39

node-basic-auth-example

Sample implementation of Basic Authentication in Node.js
JavaScript
23
star
40

promises-examples

Codebase accompanying my YouTube video: All about Asynchronous JavaScript
23
star
41

mongo-playground

Single command to setup MongoDB playground with different datasets
Shell
21
star
42

tweet-counter

Chrome Extension - Bring back the character counters in tweet boxes
JavaScript
20
star
43

node-session-auth-example

Sample implementation of Session Authentication in Node.js
JavaScript
19
star
44

mongodumper

Docker image to back up MongoDB database and upload to S3
Shell
18
star
45

gcuf-news-caster

Google Chrome Extension that shows the latest news from GCUF Website
JavaScript
17
star
46

slack-msg

Dead simple CLI tool to send messages to Slack
JavaScript
17
star
47

mondex

CLI tool to create and manage MongoDB indexes using code
TypeScript
16
star
48

walkers

A console based fan fiction RPG for The Walking Dead TV Series
PHP
14
star
49

ng-atlas

An Angular JS application that lets you tour around the globe ..free of cost ;-)
JavaScript
13
star
50

markdown-it-class

Plugin for markdown-it to allow adding classes to HTML tags.
JavaScript
10
star
51

yaml-sample

JavaScript
9
star
52

egghead-mongo-aggregation

Codebase for my "Aggregation in MongoDB" videos on Egghead
JavaScript
9
star
53

sendy

Dockerized Sendy application with one-click deployment setup for Railway.
Shell
7
star
54

kamranahmedse

5
star
55

mulk

Gets the country details by country name, ITU or ISO codes
JavaScript
4
star
56

astro-view-transitions-bug

JavaScript
4
star