├── .gitignore ├── History.md ├── component.json ├── README.md ├── css ├── bootstrap-notify.css └── styles │ ├── alert-bangtidy.css │ └── alert-blackgloss.css ├── js └── bootstrap-notify.js └── examples └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | -------------------------------------------------------------------------------- /History.md: -------------------------------------------------------------------------------- 1 | 0.1.0 / 2012-12-24 2 | ================== 3 | 4 | * Adding component.json 5 | -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-notify", 3 | "version": "0.2.0", 4 | "main": "js/bootstrap-notify.js", 5 | "dependencies": {}, 6 | "description": "Bootstrap alert system made better.", 7 | "repository": { 8 | "type": "git", 9 | "url": "git://github.com/goodybag/bootstrap-notify.git" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | bootstrap-notify 2 | ================ 3 | 4 | Bootstrap alert system made better. [See Demo](http://goodybag.github.com/bootstrap-notify) 5 | 6 | ### Contributors 7 | 8 | * Nijiko Yonskai 9 | * Lalit Kapoor 10 | 11 | 12 | Copyright 2012 Goodybag, Inc. 13 | -------------------------------------------------------------------------------- /css/bootstrap-notify.css: -------------------------------------------------------------------------------- 1 | .notifications { 2 | position: fixed; 3 | z-index: 9999; 4 | } 5 | 6 | /* Positioning */ 7 | .notifications.top-right { 8 | right: 10px; 9 | top: 25px; 10 | } 11 | 12 | .notifications.top-left { 13 | left: 10px; 14 | top: 25px; 15 | } 16 | 17 | .notifications.bottom-left { 18 | left: 10px; 19 | bottom: 25px; 20 | } 21 | 22 | .notifications.bottom-right { 23 | right: 10px; 24 | bottom: 25px; 25 | } 26 | 27 | /* Notification Element */ 28 | .notifications > div { 29 | position: relative; 30 | margin: 5px 0px; 31 | } 32 | -------------------------------------------------------------------------------- /css/styles/alert-bangtidy.css: -------------------------------------------------------------------------------- 1 | /** 2 | * bangTidy2 Style - Ported from Growl Style 3 | * Ported By Nijikokun @vizualover @nijikokun 4 | * Original Author Daryl Ginn 5 | * Based On http://dribbble.com/shots/527056-Growl-Theme-2 6 | * 7 | * To use, for style use: bangTidy 8 | * 9 | */ 10 | .alert-bangTidy { 11 | box-sizing: border-box; 12 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 13 | background: rgba(0, 0, 0, 0.80); 14 | background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.88) 100%); 15 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0.80)), color-stop(100%,rgba(0, 0, 0, 0.88))); 16 | background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%); 17 | background: -o-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%); 18 | background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%); 19 | background: linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%); 20 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0.80)', endColorstr='rgba(0, 0, 0, 0.88)',GradientType=0 ); 21 | border: 1px solid #000; 22 | -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1); 23 | -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1); 24 | -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1); 25 | box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1); 26 | -webkit-border-radius: 4px; 27 | -moz-border-radius: 4px; 28 | -o-border-radius: 4px; 29 | border-radius: 4px; 30 | overflow: hidden; 31 | color: white; 32 | -webkit-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); 33 | -moz-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); 34 | -o-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); 35 | text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); 36 | -webkit-font-smoothing: antialiased; 37 | } -------------------------------------------------------------------------------- /js/bootstrap-notify.js: -------------------------------------------------------------------------------- 1 | /** 2 | * bootstrap-notify.js v1.0 3 | * -- 4 | * Copyright 2012 Goodybag, Inc. 5 | * -- 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | (function ($) { 20 | var Notification = function (element, options) { 21 | // Element collection 22 | this.$element = $(element); 23 | this.$note = $('
'); 24 | this.options = $.extend(true, {}, $.fn.notify.defaults, options); 25 | 26 | // Setup from options 27 | if(this.options.transition) { 28 | if(this.options.transition == 'fade') 29 | this.$note.addClass('in').addClass(this.options.transition); 30 | else 31 | this.$note.addClass(this.options.transition); 32 | } else 33 | this.$note.addClass('fade').addClass('in'); 34 | 35 | if(this.options.type) 36 | this.$note.addClass('alert-' + this.options.type); 37 | else 38 | this.$note.addClass('alert-success'); 39 | 40 | if(!this.options.message && this.$element.data("message") !== '') // dom text 41 | this.$note.html(this.$element.data("message")); 42 | else 43 | if(typeof this.options.message === 'object') { 44 | if(this.options.message.html) 45 | this.$note.html(this.options.message.html); 46 | else if(this.options.message.text) 47 | this.$note.text(this.options.message.text); 48 | } else 49 | this.$note.html(this.options.message); 50 | 51 | if(this.options.closable) { 52 | var link = $('×'); 53 | $(link).on('click', $.proxy(onClose, this)); 54 | this.$note.prepend(link); 55 | } 56 | 57 | return this; 58 | }; 59 | 60 | var onClose = function() { 61 | this.options.onClose(); 62 | $(this.$note).remove(); 63 | this.options.onClosed(); 64 | return false; 65 | }; 66 | 67 | Notification.prototype.show = function () { 68 | if(this.options.fadeOut.enabled) 69 | this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this)); 70 | 71 | this.$element.append(this.$note); 72 | this.$note.alert(); 73 | }; 74 | 75 | Notification.prototype.hide = function () { 76 | if(this.options.fadeOut.enabled) 77 | this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this)); 78 | else onClose.call(this); 79 | }; 80 | 81 | $.fn.notify = function (options) { 82 | return new Notification(this, options); 83 | }; 84 | 85 | $.fn.notify.defaults = { 86 | type: 'success', 87 | closable: true, 88 | transition: 'fade', 89 | fadeOut: { 90 | enabled: true, 91 | delay: 3000 92 | }, 93 | message: null, 94 | onClose: function () {}, 95 | onClosed: function () {} 96 | } 97 | })(window.jQuery); 98 | -------------------------------------------------------------------------------- /css/styles/alert-blackgloss.css: -------------------------------------------------------------------------------- 1 | /** 2 | * alert-blackgloss.css v1.0 3 | * -- 4 | * Based off blackgloss growl theme. 5 | * Copyright 2012 Nijiko Yonskai 6 | * -- 7 | * Usage: 8 | * Set style to `blackgloss` and include this css. 9 | * 10 | * Note: 11 | * The gloss is only supported in webkit based browsers. 12 | * Chrome and Safari. 13 | */ 14 | @-webkit-keyframes notification { 15 | 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } 16 | 70% { -webkit-transform: rotateY(20deg); opacity: .8; } 17 | 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } 18 | 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } 19 | } 20 | 21 | @-moz-keyframes notification { 22 | 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } 23 | 70% { -webkit-transform: rotateY(20deg); opacity: .8; } 24 | 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } 25 | 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } 26 | } 27 | 28 | @-o-keyframes notification { 29 | 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } 30 | 70% { -webkit-transform: rotateY(20deg); opacity: .8; } 31 | 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } 32 | 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } 33 | } 34 | 35 | keyframes notification { 36 | 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } 37 | 70% { -webkit-transform: rotateY(20deg); opacity: .8; } 38 | 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } 39 | 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } 40 | } 41 | 42 | /* Webkit Only */ 43 | .alert-blackgloss:before { 44 | background: -webkit-gradient(linear, 0% -16.5%, 16.5% -100%, from(rgba(255,255,255,.0)), to(rgba(255,255,255,.6)), color-stop(.99,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.0))) no-repeat; 45 | -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.5)), color-stop(.8,rgba(255,255,255,.0))); 46 | position: absolute; 47 | content: '.'; 48 | line-height: 0; 49 | top: 0; 50 | right: 0; 51 | bottom: 0; 52 | left: 0; 53 | display: block; 54 | overflow: hidden; 55 | text-indent: -99999px; 56 | -webkit-border-radius: 5px; 57 | } 58 | 59 | .alert-blackgloss { 60 | -webkit-animation: notification .75s linear; 61 | -moz-animation: notification .75s linear; 62 | -ms-animation: notification .75s linear; 63 | -o-animation: notification .75s linear; 64 | animation: notification .75s linear; 65 | background: rgba(0,0,0,1); 66 | -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); 67 | -moz-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); 68 | -ms-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); 69 | -o-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); 70 | box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); 71 | border: 1px solid rgba(0,0,0,.95); 72 | -webkit-border-radius: 5px; 73 | -moz-border-radius: 5px; 74 | -ms-border-radius: 5px; 75 | -o-border-radius: 5px; 76 | border-radius: 5px; 77 | -webkit-font-smoothing: antialiased; 78 | text-shadow: 0 1px 2px rgba(0,0,0,.5); 79 | color: #fff; 80 | -webkit-transform: rotateY(-0deg); 81 | -moz-transform: rotateY(-0deg); 82 | -o-transform: rotateY(-0deg); 83 | transform: rotateY(-0deg); 84 | position: relative; 85 | background-clip: padding-box; 86 | } 87 | 88 | .alert-blackgloss .close { 89 | position: relative; 90 | top: -3px; 91 | right: -25px; 92 | color: #fff; 93 | content: 'x'; 94 | } -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Twitter Bootstrap Notifications, from Nijiko Yonskai 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 |
37 |
38 |
39 |
 
40 | 41 |
42 | 43 | 44 | 45 |
46 | 47 | 48 |
49 | 50 |
 
51 |
 
52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |

Twitter Bootstrap Extensions: Notifications

65 |
66 | 67 |

Introducing... Notifications for Twitter Bootstrap. What? Doesn't it already have alerts? Yes, but they are not as user-friendly as this is, to make a notification with bootstrap you have to code some ugly psuedo-html/js solution in a hacky manner or create your own notification system. So I created this basic one that leverages the default alert script from bootstrap:

68 | 69 |

Html:

70 | 
 71 |   <div class='notifications top-left'></div>
 72 |
73 | 74 |
Position Options:
75 | 76 |

Notifications supports four different position classes, only if utilizing the css file provided.

77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
PositionClass NameDescription
Top Lefttop-leftNotifications will appear fixed in the top-left corner
Top Righttop-rightNotifications will appear fixed in the top-right corner
Bottom Leftbottom-leftNotifications will appear fixed in the bottom-left corner
Bottom Rightbottom-rightNotifications will appear fixed in the bottom-right corner
109 | 110 |

Js:

111 | 112 | 
113 |   $('.top-left').notify({
114 |     message: { text: 'Aw yeah, It works!' }
115 |   }).show(); // for the ones that aren't closable and don't fade out there is a .close() function.
116 |
117 | 118 |
Options:
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 156 | 157 | 158 | 159 | 160 | 161 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 |
Nametypedefaultdescription
typestring'success'Alert style, omit alert- from style name.
closablebooleantrueAllow alert to be closable through a close icon.
transitionstring'fade'Alert transition, pretty sure only fade is supported, you can try others if you wish.
fadeOutobject... 153 |

Fade alert out after a certain delay (in ms)

154 |

Object structure: fadeOut: { enabled: true, delay: 3000 }

155 |
messageobject... 162 |

Text to show on alert, you can use either html or text. HTML will override text.

163 |

Object structure: message: { html: false, text: 'This is a message.' }

164 |
onClosefunction...Called before alert closes.
onClosedfunction...Called after alert closes.
180 |
181 |
182 |
183 |
184 |
 
185 | 186 |
187 | 188 | 189 |
190 |
191 |
192 |
193 |

Notifications: Custom Styles

194 |
195 | 196 |

Notifications supports custom styles, and in fact have a few that come with the download. The buttons to the left show this.

197 | 198 |

Custom Styles Included:

199 | 200 |

bangTidy: css/styles/alert-bangtidy.css

201 |

blackgloss: css/styles/alert-blackgloss.css mostly supported only by webkit!

202 | 203 |
204 |
205 |
206 | 207 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 261 | 262 | 263 | --------------------------------------------------------------------------------