EasyNotify: Lightweight Responsive jQuery Plugin for Modern Notification

  • Description
  • FAQ
  • Screenshots
  • DEMO
  • Updates & Support

Description

EasyNotify is a light-weight responsive jQuery plugin that permits you to create easy notification in fashionable, flat taste with a number of choices.

Create and display notifications with knowledge that you wish to have to put across. Customise and magnificence notifications to suit your wishes.

Nice for exhibiting information, messages in your website online or offering comments for the consumer.

Vanilla JavaScript model →

Options

  • Simple Integration With Any Web page
  • Blank & Commented Code
  • Totally Customizable
  • Improve for CSS Variables
  • Responsive & Cell Pleasant
  • Improve for Animate.css Plugin
  • Create any Notification Textual content
  • Display or Conceal Any Components
  • Customized Icons
  • Other Positions
  • Limitless Notifications Units
  • 100% Bootstrap Suitable
  • No Photographs
  • Go-Browser Compatibility
  • Unfastened Up to date

Set up

<!doctype html>

<html>
  <head>
    <!-- 0. Not obligatory: upload Animate.css plugin -->
    <hyperlink href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <!-- 1. Paste the stylesheet into the <head> of your internet web page -->
    <hyperlink href="easy-notify.min.css" rel="stylesheet">
  </head>

  <frame>
    <h1>Hi, EasyNotify!</h1>

    <!-- 2. Upload the jQuery record close to the tip of your pages, correct ahead of the ultimate </frame> tag -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 3. Upload the javascript record -->
    <script src="easy-notify.min.js"></script>
    <!-- 4. Init EasyNotify without or with choices -->
    <script>
      $(serve as() {
        $.easyNotify();
      });
    </script>
  </frame>
</html>

Customization

All choices are not obligatory.

$.easyNotify({
  // {String}: distinctive identifier of the field for saving in native garage
  // e.g. 'newYear2021', 'hi', 'gFbb3A', and so forth.
  identity: '',

  // {String}: the theme of the field
  // will have to be '' or 'darkish'
  theme: '',

  // {Boolean}: when developer mode is enabled, ultimate the field isn't stored in native garage
  // will have to be true or false
  dev: false,

  // {String}: the background coloration of the field
  // css-variable analog: --easy-notify-bg-color
  // e.g. '#f3f0d6', '#d6f3de', 'white', and so forth.
  bgColor: '#ffffff',

  // {String}: the background picture of the field
  // css-variable analog: --easy-notify-bg-image
  // e.g. 'url("path_to_image.jpg")', 'linear-gradient(to correct, #d6e9f3, #f2e1fd)', and so forth.
  bgImage: 'none',

  // {String}: the font coloration of the field
  // css-variable analog: --easy-notify-color
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  coloration: '#222222',

  // {String}: the width of the field
  // css-variable analog: --easy-notify-width
  // e.g. '320px', '640px', and so forth.
  width: '450px',

  // {String}: the padding of the field
  // css-variable analog: --easy-notify-padding
  // e.g. '32px', '16px 24px', '24px 32px 16px 16px', and so forth.
  padding: '24px',

  // {String}: the border radius of the field
  // css-variable analog: --easy-notify-radius
  // e.g. '0', '4px 16px 4px 16px', and so forth.
  radius: '8px',

  // {String}: the shadow of the field
  // css-variable analog: --easy-notify-shadow
  // e.g. 'none', '0 8px 16px rgba(0, 0, 0, 0.25)', '4px 4px 32px rgba(255, 0, 0, 0.5)', and so forth.
  shadow: '0 -1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.05), 0 16px 16px rgba(0, 0, 0, 0.05), 0 32px 32px rgba(0, 0, 0, 0.05)',

  // {Quantity}: the z-index of the field
  // e.g. 10, 120, 100100100, and so forth.
  zIndex: 100000,

  // {String}: the location of the field
  // will have to be 'top-left', 'top-right', 'bottom-right' or 'bottom-left'
  place: 'bottom-left',

  // {String}: the call of the animation when it seems that
  // css-variable analog: --easy-notify-animation-name-in
  // will have to be customized animation call or animation call from animate.css plugin
  animationNameIn: 'easyNotifyIn',

  // {String}: the call of the animation when it disappears
  // css-variable analog: --easy-notify-animation-name-out
  // will have to be customized animation call or animation call from animate.css plugin
  animationNameOut: 'easyNotifyOut',

  // {String}: the length time of the animation in seconds
  // css-variable analog: --easy-notify-animation-duration
  // e.g. '0s', '1.5s', and so forth.
  animationDuration: '0.5s',

  // {String}: the field seems after the desired time in seconds
  // css-variable analog: --easy-notify-animation-delay
  // e.g. '1s', '3.5s', and so forth.
  animationDelay: '0s',

  // {Boolean}: cover the shut button
  // will have to be true or false
  closeBtnHide: false,

  // {String}: the colour of the shut button
  // css-variable analog: --easy-notify-close-color
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  closeBtnColor: '#acacad',

  // {String}: the hover coloration of the shut button
  // css-variable analog: --easy-notify-close-color-hover
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  closeBtnColorHover: '#858687',

  // {Boolean}: cover the icon
  // will have to be true or false
  iconHide: false,

  // {String}: the colour of the default icon
  // css-variable analog: --easy-notify-icon-color
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  iconColor: '#f5234b',

  // {String}: the src characteristic of the customized icon
  // will have to be '' or 'path_to_image.png'
  iconSrc: '',

  // {Quantity}: the dimensions of the customized icon through width
  // e.g. 24, 36, and so forth.
  iconWidth: 48,

  // {Quantity}: the dimensions of the customized icon through peak
  // e.g. 24, 36, and so forth.
  iconHeight: 48,

  // {String} the outline of the field
  // e.g. 'Orders positioned on-line from November twenty fourth till December twenty first 2020 will also be returned up till February 1st 2021 for a complete refund.', 'Uncover our presents — to proportion with the ones closest to you, or just to stay for your self.', and so forth.
  content material: 'We use cookies to make certain that we provide the absolute best revel in on our web page. Via proceeding to make use of our website online, you settle for our cookie coverage.',

  // {Boolean}: cover the 'Be informed extra' hyperlink
  // will have to be true or false
  moreLinkHide: false,

  // {String}: the href characteristic of the 'Be informed extra' hyperlink
  // e.g. '/privateness', '/presents', and so forth.
  moreLinkHref: '#',

  // {String}: the textual content of the 'Be informed extra' hyperlink
  // e.g. 'About', 'Main points', and so forth.
  moreLinkText: 'Be informed extra',

  // {String}: the font coloration of the 'Be informed extra' hyperlink
  // css-variable analog: --easy-notify-link-color
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  moreLinkColor: '#0066cc',

  // {String}: the hover font coloration of the 'Be informed extra' hyperlink
  // css-variable analog: --easy-notify-link-color-hover
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  moreLinkColorHover: '#0052a3',

  // {Boolean}: cover the settle for button
  // will have to be true or false
  acceptBtnHide: false,

  // {String}: the textual content of the settle for button
  // e.g. 'Shut', 'Let’s Cross', and so forth.
  acceptBtnText: 'Settle for',

  // {String}: the background coloration of the settle for button
  // css-variable analog: --easy-notify-btn-bg-color
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  acceptBtnBgColor: '#0070f5',

  // {String}: the font coloration of the settle for button
  // css-variable analog: --easy-notify-btn-color
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  acceptBtnColor: '#ffffff',

  // {String}: the hover background coloration of the settle for button
  // css-variable analog: --easy-notify-btn-bg-color-hover
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  acceptBtnBgColorHover: '#005ac4',

  // {String}: the hover font coloration of the settle for button
  // css-variable analog: --easy-notify-btn-color-hover
  // e.g. 'currentColor', '#2f6e92', 'black', and so forth.
  acceptBtnColorHover: '#ffffff',

  // {String}: the padding of the settle for button
  // css-variable analog: --easy-notify-btn-padding
  // e.g. '12px', '4px 20px', '4px 16px 4px 20px', and so forth.
  acceptBtnPadding: '0 16px',

  // {String}: the peak of the settle for button
  // css-variable analog: --easy-notify-btn-height
  // e.g. '30px', '50px', and so forth.
  acceptBtnHeight: '40px',

  // {String}: the border radius of the settle for button
  // css-variable analog: --easy-notify-btn-radius
  // e.g. '0', '4px 8px 4px 8px', and so forth.
  acceptBtnRadius: '8px',
});

Browsers give a boost to

Plugin is suitable with all main browsers:

  • Edge
  • Firefox
  • Chrome
  • Safari
  • Opera

Alternate log

v1.0.0

  • Preliminary unlock
or
Shopping Cart
  • Your cart is empty.
Scroll to Top