This is a Javascript plugin I am working on for floating notifications. It is a work in progress.
A Pen by Saransh Sinha on CodePen.
This is a Javascript plugin I am working on for floating notifications. It is a work in progress.
A Pen by Saransh Sinha on CodePen.
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> | |
%div.title-container | |
.title | |
FlatNotifiy.js v0.1 | |
%a.sub-title{href: 'http://www.twitter.com/screenshake', target: '_blank'} | |
Super simple notifications by @screenshake | |
%div.button-container | |
%a.alert{href: '#', onclick: "flatNotify().alert('Testing Alert Notification',2000)"} Alert | |
%a.success{href: '#', onclick: "flatNotify().success('Testing Success Notification with a two line message. Sweet right?',1500)"} Success | |
%a.error{href: '#', onclick: "flatNotify().error('Testing Error Notification with a really long message. I mean come on? Who notifies people like this? This is so wrong on so many levels.',3000)"} Error |
/** | |
* | |
* flatNotify.js v0.1 | |
* @screenshake | |
* | |
* Inspired by : | |
* http://tympanus.net/codrops/2014/07/23/notification-styles-inspiration/ | |
* | |
* Animation courtesy : | |
* bounce.js - http://bouncejs.com/ | |
* | |
* Class manipulation | |
* classie.js https://github.com/desandro/classie | |
* | |
*/ | |
;( function( window ) { | |
var proto_methods = { | |
options: { | |
wrapper: document.body, | |
dismissIn: 5000 | |
}, | |
init: function() { | |
this.ntf = document.createElement('div'); | |
this.ntf.className = 'f-notification'; | |
var strinner = '<div class="f-notification-inner"></div><div class="f-close">x</div></div>'; | |
this.ntf.innerHTML = strinner; | |
// append to body or the element specified in options.wrapper | |
this.options.wrapper.insertBefore(this.ntf, this.options.wrapper.lastChild); | |
// init events | |
this.initEvents(); | |
}, | |
initEvents: function() { | |
var self = this; | |
// dismiss notification | |
this.ntf.querySelector('.f-close').addEventListener('click', function() { | |
self.dismiss(); | |
}); | |
}, | |
dismiss: function() { | |
var self = this; | |
clearTimeout(this.dismissttl); | |
classie.remove(self.ntf, 'f-show'); | |
setTimeout(function() { | |
classie.add(self.ntf, 'f-hide'); | |
}, 25); | |
setTimeout(function() { | |
self.options.wrapper.removeChild( self.ntf ); | |
}, 500); | |
}, | |
setType: function(newType) { | |
var self = this; | |
classie.remove(self.ntf, 'f-notification-error'); | |
classie.remove(self.ntf, 'f-notification-alert'); | |
classie.remove(self.ntf, 'f-notification-success'); | |
classie.add(self.ntf, newType); | |
}, | |
success: function(message, dismissIn) { | |
var self = this; | |
/** | |
* Use supplied dismiss timeout if present, else uses default value. | |
* If set to 0, doesnt automatically dismiss. | |
*/ | |
dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn; | |
/** | |
* Set notification type styling | |
*/ | |
self.setType('f-notification-success'); | |
self.ntf.querySelector('.f-notification-inner').innerHTML = message; | |
classie.remove(self.ntf, 'f-hide'); | |
classie.add(self.ntf, 'f-show'); | |
if (dismissIn > 0) { | |
this.dismissttl = setTimeout(function() { | |
self.dismiss(); | |
}, dismissIn); | |
} | |
}, | |
error: function(message, dismissIn) { | |
var self = this; | |
/** | |
* Use supplied dismiss timeout if present, else uses default value. | |
* If set to 0, doesnt automatically dismiss. | |
*/ | |
dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn; | |
/** | |
* Set notification type styling | |
*/ | |
self.setType('f-notification-error'); | |
self.ntf.querySelector('.f-notification-inner').innerHTML = message; | |
classie.remove(self.ntf, 'f-hide'); | |
classie.add(self.ntf, 'f-show'); | |
if (dismissIn > 0) { | |
this.dismissttl = setTimeout(function() { | |
self.dismiss(); | |
}, dismissIn); | |
} | |
}, | |
alert: function(message, dismissIn) { | |
var self = this; | |
/** | |
* Use supplied dismiss timeout if present, else uses default value. | |
* If set to 0, doesnt automatically dismiss. | |
*/ | |
dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn; | |
/** | |
* Set notification type styling | |
*/ | |
self.setType('f-notification-alert'); | |
self.ntf.querySelector('.f-notification-inner').innerHTML = message; | |
classie.remove(self.ntf, 'f-hide'); | |
classie.add(self.ntf, 'f-show'); | |
if (dismissIn > 0) { | |
this.dismissttl = setTimeout(function() { | |
self.dismiss(); | |
}, dismissIn); | |
} | |
} | |
}, flatNotify, _flatNotifiy; | |
_flatNotifiy = function() { | |
this.init(); | |
}; | |
_flatNotifiy.prototype = proto_methods; | |
flatNotify = function() { | |
return new _flatNotifiy(); | |
}; | |
/** | |
* add to global namespace | |
*/ | |
window.flatNotify = flatNotify; | |
} )( window ); |
<script src="http://yourjavascript.com/30914111154/classie.js"></script> |
@import compass | |
body | |
background: #eee | |
font-family: 'Brandon Grotesque', Avenir, 'Lato', sans-serif | |
.title-container | |
margin: 120px auto 0 | |
text-align: center | |
width: 350px | |
.title | |
font-size: 40px | |
margin-bottom: 15px | |
.sub-title | |
text-decoration: none | |
font-size: 20px | |
color: #D3D3D3 | |
.button-container | |
width: 438px | |
height: 78px | |
margin: 40px auto 0 | |
a | |
text-decoration: none | |
padding: 20px 0 | |
width: 130px | |
text-align: center | |
margin: 20px 6px | |
display: inline-block | |
color: #FFF | |
font-size: 20px | |
border-radius: 5px | |
transition: all 0.3s | |
&.success | |
background: #2ecc71 | |
&.error | |
background: #e74c3c | |
&.alert | |
background: #f1c40f | |
&:hover | |
opacity: 0.6 | |
.f-notification | |
position: fixed | |
bottom: 20px | |
right: 20px | |
text-align: left | |
width: 300px | |
min-height: 20px | |
padding: 20px 40px 20px 18px | |
border-radius: 5px | |
color: rgba(255, 255, 255, 0.85) | |
&:hover | |
opacity: 0.9 | |
.f-notification-close | |
background: rgba(77, 77, 79, 0.1) | |
.f-notification-title | |
font-weight: 600 | |
color: #4D4D4F | |
cursor: default | |
.f-close | |
position: absolute | |
right: 15px | |
top: 20px | |
height: 20px | |
width: 20px | |
line-height: 18px | |
vertical-align: middle | |
text-align: center | |
border-radius: 20px | |
color: #4D4D4F | |
cursor: pointer | |
background: rgba(255, 255, 255, 0.25) | |
&:hover | |
background: rgba(77, 77, 79, 0.2) | |
.f-notification-success | |
background: #2ecc71 | |
.f-notification-error | |
background: #e74c3c | |
.f-notification-alert | |
background: #f1c40f | |
.f-show | |
animation-name: animSlideElastic | |
animation-duration: 1s | |
animation-timing-function: linear | |
.f-hide | |
animation-name: animSlideElastic | |
animation-duration: 0.5s | |
animation-direction: reverse | |
@keyframes animSlideElastic | |
0% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1) | |
3.333333% | |
transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 521.82545, 0, 0, 1) | |
6.666667% | |
transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 218.3238, 0, 0, 1) | |
10% | |
transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 57.59273, 0, 0, 1) | |
13.333333% | |
transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.12794, 0, 0, 1) | |
16.666667% | |
transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.40503, 0, 0, 1) | |
20% | |
transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.10141, 0, 0, 1) | |
23.333333% | |
transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -19.40752, 0, 0, 1) | |
26.666667% | |
transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.08575, 0, 0, 1) | |
30% | |
transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.23737, 0, 0, 1) | |
33.333333% | |
transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.84893, 0, 0, 1) | |
36.666667% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22079, 0, 0, 1) | |
40% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.37284, 0, 0, 1) | |
43.333333% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.46116, 0, 0, 1) | |
46.666667% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.35963, 0, 0, 1) | |
50% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22487, 0, 0, 1) | |
53.333333% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.11734, 0, 0, 1) | |
56.666667% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04909, 0, 0, 1) | |
60% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01295, 0, 0, 1) | |
63.333333% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0025, 0, 0, 1) | |
66.666667% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00684, 0, 0, 1) | |
70% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00632, 0, 0, 1) | |
73.333333% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00436, 0, 0, 1) | |
76.666667% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00249, 0, 0, 1) | |
80% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00118, 0, 0, 1) | |
83.333333% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00042, 0, 0, 1) | |
86.666667% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00005, 0, 0, 1) | |
90% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1) | |
93.333333% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0001, 0, 0, 1) | |
96.666667% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1) | |
100% | |
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) | |
i want to make it apear from the leftside !! any help with matrix3d please ?