Giter Club home page Giter Club logo

notice-js's Introduction

notice.js

A bare-bones notification tool.

new notice('Howdy, Folks!');

Getting Started

notice.js supports AMD (RequireJS) if that is your style.

define(['notice'], function(){
	new notice('I love RequireJS');
});

Or if you want to just throw it right into the DOM like a savage, you are welcome to do that too.

<script src="notice.js"></script>
<script>
	new notice('Guten Tag!');
</script>

Usage

To create a notice simply write:

var mynotice = new notice('My cool notice');

To set more options, pass an object into the second parameter:

var mynotice = new notice('My even cooler notice', {
	animate: false,
	safe: false,
	type: 'alert',
	timeout: 5000,
	onclick: function(){},
	ontimeout: null
});

Options

  • animate Boolean Indicates whether the notice should fade out or just disappear immediately. Will default to true if jQuery is present or false if jQuery is not present.
  • safe Boolean Indicates if notice.js should escape any HTML being put into a notice. Useful if you want to prevent XSS attacks.
  • type String The type of alert that the notice will be. Accepted types are alert, success, error, warn, and info.
  • timeout Number The number of milliseconds to wait before automatically removing the notice. Set to false to keep up forever.
  • onclick Function A function that will be run when the notice is clicked. When a notice is clicked it will automatically hide it, if this function returns false, the notice will not be removed.
  • onclick Function A function that will be run when the notice automatically hides itself.

Methods

Each instance gets its own methods, so don't go running these on the global notice object.

mynotice.updateText( text )

Update the text on an existing notice

  • text String The new text. The input will obey the original safe setting.

mynotice.cancelTimeout()

If a notice is set to dissapear automatically, this method will keep it from doing that.

mynotice.remove()

Removes the notice from the DOM

CSS Quickstart

notice.js is made to be easy to style. That being said, this is some recommended CSS to start with:

ul#notice-base {
	z-index: -2147483647;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 20px;
	list-style: none;
}
ul#notice-base li.notice-item {
	line-height: 1em;
	cursor: pointer;
	display: table;
	margin-bottom: 10px;
	min-width: 220px;
	max-width: 320px;
	padding: 10px;
	border-radius: 3px;
	color: white;
	border-left-width: 5px;
	border-left-style: solid;
}
ul#notice-base li.notice-item h1,
ul#notice-base li.notice-item h2,
ul#notice-base li.notice-item h3,
ul#notice-base li.notice-item h4,
ul#notice-base li.notice-item h5,
ul#notice-base li.notice-item h6 {
	color: white;
	margin: 0px;
	margin-bottom: 3px;
}
ul#notice-base li.notice-item p:last-child,
ul#notice-base li.notice-item p:only-child {
	margin-bottom: 0px;
}
ul#notice-base li.notice-item.alert {
	border-left-color: #7f8c8d;
	background-color: #95a5a6;
}
ul#notice-base li.notice-item.success {
	background-color: #2ecc71;
	border-left-color: #27ae60;
}
ul#notice-base li.notice-item.error {
	border-left-color: #c0392b;
	background-color: #e74c3c;
}
ul#notice-base li.notice-item.warn {
	background-color: #f1c40f;
	border-left-color: #f39c12;
}
ul#notice-base li.notice-item.info {
	background-color: #3498db;
	border-left-color: #2980b9;
}

License

Copyright (c) 2013 Nick Comer

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

notice-js's People

Contributors

nkcmr avatar

Watchers

James Cloos avatar Abou Mohamed  avatar

Forkers

aydinsakar

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.