{"id":13402168,"url":"https://github.com/kamranahmedse/jquery-toast-plugin","last_synced_at":"2025-04-13T03:59:58.100Z","repository":{"id":21365032,"uuid":"24682283","full_name":"kamranahmedse/jquery-toast-plugin","owner":"kamranahmedse","description":"Highly customizable jquery plugin to show toast messages","archived":false,"fork":false,"pushed_at":"2022-08-02T20:57:43.000Z","size":187,"stargazers_count":1523,"open_issues_count":39,"forks_count":505,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-04-13T03:59:51.119Z","etag":null,"topics":["growl","growl-notifications","jquery-toast-plugin","notifications","toast","toast-message","toastr"],"latest_commit_sha":null,"homepage":"http://kamranahmed.info/toast","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kamranahmedse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-01T14:47:46.000Z","updated_at":"2025-04-10T10:57:55.000Z","dependencies_parsed_at":"2022-08-02T16:01:06.139Z","dependency_job_id":null,"html_url":"https://github.com/kamranahmedse/jquery-toast-plugin","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamranahmedse%2Fjquery-toast-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamranahmedse%2Fjquery-toast-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamranahmedse%2Fjquery-toast-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamranahmedse%2Fjquery-toast-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kamranahmedse","download_url":"https://codeload.github.com/kamranahmedse/jquery-toast-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661706,"owners_count":21141450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["growl","growl-notifications","jquery-toast-plugin","notifications","toast","toast-message","toastr"],"created_at":"2024-07-30T19:01:12.251Z","updated_at":"2025-04-13T03:59:58.076Z","avatar_url":"https://github.com/kamranahmedse.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Jquery Toast Plugin\n\nA plugin to show highly customizable notifications to the user. \n\n\u003cimg src=\"http://i.imgur.com/RRrb0KE.png\" /\u003e\n\n# How to use\n\n- You can install the plugin via Bower:\n\n    ```js\n    bower install jquery-toast-plugin\n    ```\n    \n    or via `npm`\n    \n    ```js\n    npm install jquery-toast-plugin\n    ```\n    \n    Or directly download the repository and place the content of `dist` wherever you can access them.\n- Include the CSS and JS files.\n- 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.\n\n# Demo\nFor 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\n\n## Quick usage examples\n**Simple textual toast**\n```javascript\n// Non sticky version\n$.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.\")\n// Sticky version\n$.toast({\n  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.\",\n  hideAfter : false\n})\n```\n\n**Toast using HTML as a text**\n```javascript\n// Non sticky\n$.toast(\"Let's test some HTML stuff... \u003ca href='#'\u003egithub\u003c/a\u003e\")\n// sticky\n$.toast({\n  text : \"\u003cstrong\u003eRemember!\u003c/strong\u003e You can \u003cspan style='font-weight: bold; color:red;' class='horribly-styled'\u003ealways\u003c/span\u003e introduce your own × HTML and \u003cspan style='font-size: 18px;'\u003eCSS\u003c/span\u003e in the toast.\",\n  hideAfter : false\n})\n```\n\n**Unordered list elements as the text of toast using array**\n```javascript\n// Non sticky version\n$.toast([\"Ubuntu : One of it's kind\", \"Sublime Text : Productivity unleashed\", \"HeidiSQL : Just love it\", \"Github : Just Lovely\"])\n// Sticky version\n$.toast({\n  text : [\"Ubuntu : One of it's kind\", \"Sublime Text : Productivity unleashed\", \"HeidiSQL : Just love it\", \"Github : Just Lovely\"],\n  hideAfter : false\n})\n```\n\n**Changing the animations**\n```javascript\n$.toast({ \n  text : \"Let's test some HTML stuff... \u003ca href='#'\u003egithub\u003c/a\u003e\", \n  showHideTransition : 'slide'  // It can be plain, fade or slide\n})\n```\n\n**Changing the formatting**\n```javascript\n$.toast({ \n  text : \"Let's test some HTML stuff... \u003ca href='#'\u003egithub\u003c/a\u003e\", \n  showHideTransition : 'slide',  // It can be plain, fade or slide\n  bgColor : 'blue',              // Background color for toast\n  textColor : '#eee',            // text color\n  allowToastClose : false,       // Show the close button or not\n  hideAfter : 5000,              // `false` to make it sticky or time in miliseconds to hide after\n  stack : 5,                     // `fakse` to show one stack at a time count showing the number of toasts that can be shown at once\n  textAlign : 'left',            // Alignment of text i.e. left, right, center\n  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\n})\n```\n\n**Resetting the toast**\n```javascript\nvar myToast = $.toast('Some toast that needs to be removed.');\nmyToast.reset(); // remove the toast \"Some toast that needs to be removed\"\n```\nWhat if I want to reset all the toasts at once? You may ask. Well in that case, you can do the following:\n```javascript\n$.toast().reset('all');\n```\n\n**Updating the toast**\nSuppose, 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\n\n```javascript\nvar myToast = $.toast({\n  text : 'Some toast that needs to show the success message after the ajax call.',\n  hideAfter : false,\n  bgColor : '#E01A31'\n});\n\nwindow.setTimeout(function(){\n  myToast.update({\n    text : '\u003cstrong\u003eUpdated after a few seconds\u003c/strong\u003e',\n    bgColor : '#23B65D'\n  });\n}, 5000);\n```\nTo learn more about how to use and customize it, head to \u003ca href=\"http://kamranahmed.info/toast\" target=\"_blank\"\u003ehttp://kamranahmed.info/toast\u003c/a\u003e. Also you can find a customizer there that will let you modify the look and feel of the toast however you like it.\n\n\u003chr\u003e\n\nYou can simply download the repo or if you are in rush the \u003ca href=\"https://raw.githubusercontent.com/kamranahmedse/jquery-toast-plugin/master/jquery.toast.min.css\" target=\"_blank\"\u003eminified CSS\u003c/a\u003e or \u003ca href=\"https://raw.githubusercontent.com/kamranahmedse/jquery-toast-plugin/master/jquery.toast.css\"\u003enon-minified CSS\u003c/a\u003e can be found and \u003ca href=\"https://raw.githubusercontent.com/kamranahmedse/jquery-toast-plugin/master/jquery.toast.min.js\" target=\"_blank\"\u003eminified JS\u003c/a\u003e and \u003ca href=\"https://raw.githubusercontent.com/kamranahmedse/jquery-toast-plugin/master/jquery.toast.js\" target=\"_blank\"\u003enon minified JS\u003c/a\u003e can also be found.\n\n# Features\n\u003cul\u003e\n  \u003cli\u003eShow different types of toasts i.e. informational, warning, errors and success\u003c/li\u003e\n  \u003cli\u003eCustom \u003cstrong\u003etoast background color\u003c/strong\u003e and \u003cstrong\u003etext color\u003c/strong\u003e\u003c/li\u003e\n  \u003cli\u003eAbility to \u003cstrong\u003ehack the CSS\u003c/strong\u003e to add your own thing\u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong\u003eText can be\u003c/strong\u003e provided in the form of\n    \u003cul\u003e\n      \u003cli\u003e\u003cstrong\u003eArray\u003c/strong\u003e (It's elements will be changed to an un ordered list)\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eSimple text\u003c/strong\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eHTML\u003c/strong\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eEvents support\u003c/strong\u003e i.e. \u003ccode\u003ebeforeHide\u003c/code\u003e, \u003ccode\u003eafterHidden\u003c/code\u003e, \u003ccode\u003ebeforeShow\u003c/code\u003e, \u003ccode\u003eafterShown\u003c/code\u003e\u003c/li\u003e\n\n  \u003cli\u003e\u003ccode\u003eFade\u003c/code\u003e and \u003ccode\u003eSlide\u003c/code\u003e show/hide transitions support (More to come)\u003c/li\u003e\n  \u003cli\u003eSupports showing the loader for the toast\u003c/li\u003e\n  \u003cli\u003eYou can \u003cstrong\u003eposition the toast, wherever you want\u003c/strong\u003e there is support for \u003ccode\u003etop-left\u003c/code\u003e, \u003ccode\u003etop-right\u003c/code\u003e \u003ccode\u003ebottom-left\u003c/code\u003e and \u003cstrong\u003ebottom-right\u003c/strong\u003e, \u003ccode\u003etop-center\u003c/code\u003e, \u003ccode\u003ebottom-center\u003c/code\u003e and \u003ccode\u003emid-center\u003c/code\u003e ...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 \u003cstrong\u003eyour own positioning\u003c/strong\u003e just \u003cstrong\u003eby passing a simple js object\u003c/strong\u003e containing \u003ccode\u003e{ top: - , bottom: -, left: -, right: - }\u003c/code\u003e \u003c/li\u003e\n\n  \u003cli\u003eAbility to add \u003cstrong\u003esticky toast\u003c/strong\u003e\u003c/li\u003e\n\n  \u003cli\u003eOptional \u003cstrong\u003estack length can be defined\u003c/strong\u003e (i.e. maximum number of toasts that can be shown at once)\u003c/li\u003e\n\n\u003c/ul\u003e\n\nPlease report any bugs or features you would like added.\n\n# Copyright\n\nMIT © [Kamran Ahmed](http://kamranahmed.info)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamranahmedse%2Fjquery-toast-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkamranahmedse%2Fjquery-toast-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamranahmedse%2Fjquery-toast-plugin/lists"}