Code Monkey home page Code Monkey logo

notie's Introduction

notie

Join the chat at https://gitter.im/jaredreich/notie

notie is a clean and simple notification suite for javascript, with no dependencies. demo: https://jaredreich.com/projects/notie

With notie you can:

  • Alert users
  • Confirm user choices
  • Input user information

Alt text

Features

  • Pure JavaScript, no dependencies
  • Works in all modern browsers (Chrome, Firefox, Safari, IE 9+, Edge, Opera)
  • Easily customizable
  • Change colors to match your style/brand
  • Modify styling with the sass file (notie.scss)
  • Font size auto-adjusts based on screen size

Installation

HTML:

<head>
  ...
  <link rel="stylesheet" type="text/css" href="/path/to/notie.css">
</head>
<body>
  ...
  <!-- Bottom of body -->
  <script src="/path/to/notie.js"></script>
</body>

npm:

npm install notie

Bower:

bower install notie

Usage

notie.alert(alertType(Number), message(String, timeInSeconds);

notie.confirm(title(String), yesText(String), noText(String), yesCallback(Function), noCallbackOptional(Function));

notie.input(options(JSON), title(String), submitText(String), cancelText(String), submitCallback(Function), cancelCallbackOptional(Function));

For example:

notie.alert(1, 'Success!', 1.5);
notie.alert(2, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2);
notie.alert(3, 'Error.', 2.5);
notie.alert(4, 'Information.', 2);

notie.confirm('Are you sure you want to do that?', 'Yes', 'Cancel', function() {
    notie.alert(1, 'Good choice!', 2);
});
notie.confirm('Are you sure?', 'Yes', 'Cancel', function() {
    notie.confirm('Are you <b>really</b> sure?', 'Yes', 'Cancel', function() {
        notie.confirm('Are you <b>really</b> <i>really</i> sure?', 'Yes', 'Cancel', function() {
            notie.alert(1, 'Okay, jeez...', 2);
        });
    });
});

notie.input({
	type: 'email'
	placeholder: '[email protected]',
	prefilledValue: '[email protected]'
},'Please enter your email address:', 'Submit', 'Cancel', 'email', '[email protected]', function(value_entered) {
    notie.alert(1, 'You entered: ' + value_entered, 2);
});
notie.input({
	type: 'password',
	placeholder: 'Enter your password'
}, 'Please enter your password:', 'Submit', 'Cancel', function(valueEntered) {
	notie.alert(1, 'You entered: ' + valueEntered, 2);
}, function(valueEntered) {
	notie.alert(3, 'You cancelled with this value: ' + valueEntered, 2);
});

Options

notie.setOptions({
	animationDelay: 300, // Be sure to also change "transition: all 0.3s ease" variable in .scss file
	backgroundClickDismiss: true
});

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.