Wednesday, October 27, 2021
More

    JavaScript Notification Library notie.js

    Must Read

    Programmerhttp://www.improgrammer.net
    We started this site to inspire young minds to motivate and encourage them towards Programming Language. In this site you will get programming tutorials, tech, programming facts, programming fun and programming blogs.

    notie.js

    A neat and simple-to-use alert/growl style notifications plugin for JavaScript that has no dependencies and allows you to override or add style in a separate CSS file

    Notify.js is a jQuery plugin to provide simple yet fully customizable notifications. The javascript code snippets in this documentation with the green edge are runnable by clicking them. notie.js is a clean and simple notification plugin (alert/growl style) for javascript, with no dependencies

    $.notify("Hello World");

    With notie.js you can:

    • Observant users
    • Confirm user options
    • Input user advice

    Features

    • Pure javascript, no dependencies, only one file to include
    • Works in all modern browsers (Chrome, Firefox, Safari, IE, Edge, Opera)
    • Comfortablycustomizable
    • Change the colors to match your style/brand
    • Font size auto-adjusts based on screen size
    • Turn bottom shadow off for flat design, on for material design
    • Nullifyor add baptize in a separate .css file (optional)

    Installation

    javascript-notification-library
    javascript-notification-library

    HTML:

    ...

    npm:

    npm install notie

    Bower:

    bower install notie

    Options

    At the top of notie.js, you can change all the colors to match your style/brand, turn on or off the bottom shadow, and change the large and small font sizes that auto adjust based on screen width.

    // General
    var shadow = true;
    var font_size_small = '18px';
    var font_size_big = '24px';
    var font_change_screen_width = 600;
    var animation_delay = 0.3;
    var background_click_dismiss = true;
    
    // notie.alert colors
    var alert_color_success_background = '#57BF57';
    var alert_color_warning_background = '#E3B771';
    var alert_color_error_background = '#E1715B';
    var alert_color_info_background = '#4D82D6';
    var alert_color_text = '#FFF';
    
    // notie.confirm colors
    var confirm_and_input_color_background = '#4D82D6';
    var confirm_and_input_color_yes_background = '#57BF57';
    var confirm_and_input_color_no_background = '#E1715B';
    var confirm_and_input_color_text = '#FFF';
    var confirm_and_input_color_yes_text = '#FFF';
    var confirm_and_input_color_no_text = '#FFF';
    
    // ID's for use within your own .css file (OPTIONAL)
    // (Be sure to use !important to override the javascript)
    // Example: #notie-alert-inner { padding: 30px !important; }
    var alert_outer_id = 'notie-alert-outer';
    var alert_inner_id = 'notie-alert-inner';
    var alert_text_id = 'notie-alert-text';
    var confirm_outer_id = 'notie-confirm-outer';
    var confirm_inner_id = 'notie-confirm-inner';
    var confirm_backdrop_id = 'notie-confirm-backdrop';
    var confirm_yes_id = 'notie-confirm-yes';
    var confirm_no_id = 'notie-confirm-no';
    var confirm_text_id = 'notie-confirm-text';
    var confirm_yes_text_id = 'notie-confirm-yes-text';
    var confirm_no_text_id = 'notie-confirm-no-text';
    var input_outer_id = 'notie-input-outer';
    var input_inner_id = 'notie-input-inner';
    var input_backdrop_id = 'notie-input-backdrop';
    var input_div_id = 'notie-input-div';
    var input_field_id = 'notie-input-field';
    var input_yes_id = 'notie-input-yes';
    var input_no_id = 'notie-input-no';
    var input_text_id = 'notie-input-text';
    var input_yes_text_id = 'notie-input-yes-text';
    var input_no_text_id = 'notie-input-no-text';

    See more: Javascript Framework

    Latest Articles

    More Recipes Like This