Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/naoxink/notifit
Simple colorful animated notifications with JQuery. It never has been easier to create a notification.
https://github.com/naoxink/notifit
animation javascript jquery notifications notifit
Last synced: 6 days ago
JSON representation
Simple colorful animated notifications with JQuery. It never has been easier to create a notification.
- Host: GitHub
- URL: https://github.com/naoxink/notifit
- Owner: naoxink
- License: mit
- Created: 2013-06-11T09:54:06.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-10-08T06:23:15.000Z (about 6 years ago)
- Last Synced: 2024-12-10T20:35:20.911Z (26 days ago)
- Topics: animation, javascript, jquery, notifications, notifit
- Language: JavaScript
- Homepage: http://naoxink.epizy.com
- Size: 153 KB
- Stars: 99
- Watchers: 6
- Forks: 21
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Check out [notifit 2!](https://github.com/naoxink/notifit-2) :D
notifIt!
=
Simple notifications with JQuery.
Now you can send notifications of everything you want and when you want, simply and quickly.
Easy to learn and use. Customize with your favorite colors, define the size you want, set the opacity, make a sticky one and much more!
#### Give it a try! [Demo](http://naoxink.ga/notifIt)
#### Install via npm
```
npm install notifit-js
```
#### Structure
```
notifIt
├── css
│ └── notifIt.css
│ └── notifIt.min.css
├── demo.html
├── dev
│ └── notifIt.js
└── js
├── notifIt.js
└── notifIt.min.js
```
#### Plug
```html
```
#### & Play
```javascript
notif({
msg: "Oops! A wild error appeared!",
type: "error",
position: "center"
});
```
## `notif()`
#### Configuration
Variable name|Type|Posible values|Default
---|---|---|---
type|`String`|success, error, warning, info|default
msg|`String`|Message|
position|`String`|left, center, right, bottom|right
width|`Integer`-`String`|Number > 0, 'all'|400
height|`Integer`|Number between 0 and 100|60
autohide|`Boolean`|true, false|true
opacity|`Float`|From 0 to 1|1
multiline|`Boolean`|true, false|false
fade|`Boolean`|true, false|false
bgcolor|`String`|HEX color|#444
color|`String`|HEX color|#EEE
timeout|`Integer`|Miliseconds|5000
zindex|`Integer`|The z-index of the notification|null (ignored)
offset|`Integer`|The offset in pixels from the edge of the screen|0
callback|`Function`|Function|null (ignored),
clickable|`Boolean`|true, false|false
append (dev)|`Boolean`|true, false|false
## `notif_confirm()`
### Description
Now you can ask 'yes' or 'no' easy as --
```javascript
var myCallback = function(choice){
if(choice){
notif({
'type': 'success',
'msg': 'Yeah!',
'position': 'center'
})
}else{
notif({
'type': 'error',
'msg': ':(',
'position': 'center'
})
}
}
notif_confirm({
'textaccept': 'Let\'s go!',
'textcancel': 'I\'ll think about it',
'message': 'Shall we?',
'callback': myCallback
})
```
#### Configuration
Variable name|Type|Default|Optional
---|---|---|---
textaccept|`String`|Accept|Yes
textcancel|`String`|Cancel|Yes
message|`String`|Is that what you want to do?|Yes
callback|`Function`|null|Yes
fulllscreen|`Boolean`|false|Yes
#### Response
Function returns `true` or `false`
If callback is passed, it recieves a param `true` or `false`
## `notif_prompt()`
### Description
Ask whatever you want quick and easy
```javascript
var myCallback = function(input_value){
if(input_value){
notif({
'type': 'success',
'msg': input_value,
'position': 'center'
})
}else{
notif({
'type': 'error',
'msg': 'Empty or cancelled',
'position': 'center'
})
}
}
notif_confirm({
'textaccept': 'That\'s it!',
'textcancel': 'I don\'t have a pet :(',
'message': 'What\'s your pet\'s name?',
'callback': myCallback
})
```
#### Configuration
Variable name|Type|Default|Optional
---|---|---|---
textaccept|`String`|Accept|Yes
textcancel|`String`|Cancel|Yes
default_value|`String`||Yes
message|`String`|Tell me something|Yes
callback|`Function`|null|Yes
fulllscreen|`Boolean`|false|Yes
#### Response
If callback is passed, it recieves a param with the input value (if accepted) or `false` (if cancelled)
# More things :)
- [bgfader](https://github.com/naoxink/bgfader)
- [Sublime text color scheme](https://github.com/naoxink/nxk-sublime-color-scheme)
- [asdText](https://github.com/naoxink/asdText)
- [View more](https://github.com/naoxink?tab=repositories)