Vanilla Javascript HTML notifications

Notifier.js is an easy yet fully configurable push notification library to show toast and growl style messages in the bottom right corner of the page.

More Features:

  • Allows you to attach the notifications to any container.
  • 4 built-in themes: Success, Error, Warning, Info.
  • Auto dismisses with a countdown bar.
  • Allows you to create your own themes (styles).

How to use it:

1. Download & unzip the library and then load the minified version of the Notifier.js in the HTML file.

<link href="dist/Notifier.min.css" rel="stylesheet" />
<script src="dist/Notifier.min.js"></script>

2. Initialize the Norifier.js and we’re ready to go.

var notifier = new Notifier();

3. Create push notifications using built-in themes.

// Success
var notification = notifier.notify("success", "<b>Success</b> Message");

// Info
var notification = notifier.notify("info", "<b>Info</b> Message");

// Warning
var notification = notifier.notify("warning", "<b>Warning</b> Message");

// Error
var notification = notifier.notify("error", "<b>Error</b> Message");

4. Create your own notification types (themes).

var notifier = new Notifier({
    "custom": {
      "classes": "my-class",
      "icon": "icon here"
notification = notifier.notify("custom", "<b>Custom</b> Message");
.notifyjs-container {
  /* CSS Styles Here */

.notifyjs-container p.progress {
  /* CSS Styles Here */

.notifyjs-container {
  /* CSS Styles Here */

5. Determine whether or not to auto push the notification. Default: true.

var notifier = new Notifier({
    autopush: false

6. Specify the timeout. Default: 4500ms.

var notifier = new Notifier({
    default_time: 5000

7. Config the animation.

var notifier = new Notifier({
    vanish_time: 300,
    fps: 30

8. Determine the position & direction.

var notifier = new Notifier({
    // top-left, top-right, bottom-left and bottom-right
    position: 'bottom-right',
    // top, or bottom
    direction: 'bottom',

9. Customize the CSS z-index property.

var notifier = new Notifier({
    zindex: 9999

10. Override the default styles of the notification.

var notifier = new Notifier({
    success: {
        classes: 'notifyjs-success',
        textColor: "#155724",
        borderColor: "#c3e6cb",
        backgroundColor: "#d4edda",
        progressColor: "#155724",
        iconColor: "#155724",
        // iconClasses: "",
        icon: '<svg xmlns="" width="8" height="8" viewBox="0 0 8 8"><path d="M6.41 0l-.69.72-2.78 2.78-.81-.78-.72-.72-1.41 1.5 3.5-3.5.72-.72-1.44-1.41z" transform="translate(0 1)" /></svg>'
    error: {
        classes: 'notifyjs-danger',
        textColor: "#721c24",
        borderColor: "#f5c6cb",
        backgroundColor: "#f8d7da",
        progressColor: "#721c24",
        iconColor: "#721c24",
        // iconClasses: "",
        icon: '<svg xmlns="" width="8" height="8" viewBox="0 0 8 8"><path d="M1.41 0l-1.41 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" /></svg>'
    warning: {
        classes: 'notifyjs-warning',
        textColor: "#856404",
        borderColor: "#fff3cd",
        backgroundColor: "#ffeeba",
        progressColor: "#856404",
        iconColor: "#856404",
        // iconClasses: "",
        icon: '<svg xmlns="" width="8" height="8" viewBox="0 0 8 8"><path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 . 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" /></svg>'
    info: {
        classes: 'notifyjs-info',
        textColor: "#0c5460",
        borderColor: "#d1ecf1",
        backgroundColor: "#bee5eb",
        progressColor: "#0c5460",
        iconColor: "#0c5460",
        // iconClasses: "",
        icon: '<svg xmlns="" width="8" height="8" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-1.5 2.5c-.83 0-1.5.67-1.5 1.5h1c0-.28.22-.5.5-.5s. 1.64-1 2.5c0 .86.67 1.5 1.5 1.5s1.5-.67 1.5-1.5h-1c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-.36 1-1.84 1-2.5 0-.81-.67-1.5-1.5-1.5z" transform="translate(2)"/></svg>'

11. Dismiss all notifications.


12. Destroy the library.



v1.2.4 (08/29/2020)

  • Fixed type classes was not being applied

v1.2.2 (05/02/2020)

  • Added z-index option

Download Details:

Author: jsanahuja


Source Code:


What is GEEK

Buddha Community

Vanilla Javascript HTML notifications
Lyda  White

Lyda White


How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

w3hubs com

w3hubs com


Display Current Time Using HTML,CSS And JavaScript

In this Display Current Time, we were Using HTML, CSS And JavaScript. We used the javascript inbuild function for a time, and to display, we used javascript DOM. To show the live time, we used javascript setInterval functions.

Also Read:- Bootstrap Progress Bar Percentage Using Jquery

For the responsive side, we used CSS media queries. Also, to make it more attractive, we used a background image with an opacity background.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code


#javascript #JavaScript #html #HTML 

Ava Watson

Ava Watson


Know Everything About HTML With HTML Experts

HTML stands for a hypertext markup language. For the designs to be displayed in web browser HTML is the markup language. Technologies like Cascading style sheets (CSS) and scripting languages such as JavaScript assist HTML. With the help of HTML websites and the web, designs are created. Html has a wide range of academic applications. HTML has a series of elements. HTML helps to display web content. Its elements tell the web how to display the contents.

The document component of HTML is known as an HTML element. HTML element helps in displaying the web pages. An HTML document is a mixture of text nodes and HTML elements.

Basics of HTML are-

The simple fundamental components oh HTML is

  1. Head- the setup information for the program and web pages is carried in the head
  2. Body- the actual substance that is to be shown on the web page is carried in the body
  3. HTML- information starts and ends with and labels.
  4. Comments- come up in between

Html versions timeline

  1. HTML was created in 1990. Html is a program that is updated regularly. the timeline for the HTML versions is
  2. HTML 2- November, 1995
  3. HTML 3- January, 1997
  4. HTML 4- December, 1997; April, 1998; December, 1999; May, 2000
  5. HTML 5- October, 2014; November, 2016; December, 2017

HTML draft version timelines are

  1. October 1991
  2. June 1992
  3. November 1992
  4. June 1993
  5. November 1993
  6. November 1994
  7. April 1995
  8. January 2008
  9. HTML 5-
    2011, last call
    2012 candidate recommendation
    2014 proposed recommendation and recommendation

HTML helps in creating web pages. In web pages, there are texts, pictures, colouring schemes, tables, and a variety of other things. HTML allows all these on a web page.
There are a lot of attributes in HTML. It may get difficult to memorize these attributes. HTML is a tricky concept. Sometimes it gets difficult to find a single mistake that doesn’t let the web page function properly.

Many minor things are to be kept in mind in HTML. To complete an HTML assignment, it is always advisable to seek help from online experts. These experts are well trained and acknowledged with the subject. They provide quality content within the prescribed deadline. With several positive reviews, the online expert help for HTML assignment is highly recommended.

#html assignment help #html assignment writing help #online html assignment writing help #html assignment help service online #what is html #about html

code savvy

code savvy


Product landing page using HTML CSS & JavaScript | web design


This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

πŸ“ Assets 
Icons :
Fonts :
GitHub :

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

code savvy

code savvy


Web Design Speed Code | HTML, CSS, JavaScript (GSAP) | Portfolio Design

Portfolio Website Design with HTML, CSS & Javascript


Hello Everyone, In this video we'll create a Portfolio Page design using HTML, CSS & JavaScript (GSAP) πŸ“

🧠 Knowledge : 

Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.

Anyway, you can learn everything mentioned. Follow the tutorial.

⏱ Outline


#css #javascript  #JavaScript  #HTML #html 

Click to Watch Full Tutorial