Skip to content

Instantly share code, notes, and snippets.

@mpouncy-netpulse

mpouncy-netpulse/jsbin.noxum.css

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mpouncy-netpulse/9262504 to your computer and use it in GitHub Desktop.
Save mpouncy-netpulse/9262504 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.noxum.css
.alertDot, .alertDotSpan {
text-align:center;
vertical-align:middle;
-webkit-transform-style:preserve-3d;
-webkit-transform-origin:left;
-webkit-transition:all 1s ease-in-out;
}
.alertDot {
display:inline-table;
margin:auto;
position:absolute;
top:50%; right:50%; bottom:auto; left:auto;
z-index:5000;
opacity:1;
min-width:100px;
min-height:60px;
-webkit-transform:translate(50%, -50%);
}
.alertDot.hide {
opacity:0;
-webkit-transform:translate(50%, -200%);
}
.alertDotSpan {
width:90%;
height:90%;
display:table-cell;
margin:5%;
background:#08F;
color:#FFF;
border-radius:100px;
-webkit-box-shadow:#08F 0 0 1px 1px, rgba(0,0,0,.5) 0 0 20px 10px;
}
Raw
jsbin.noxum.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset="utf-8">
<title>Alert Dot</title>
</head>
<body>
<!--//-->
</body>
</html>
Raw
jsbin.noxum.js
var alertDot = function alertDot(msg, duration, context) {
msg = (msg || '');
duration = (duration || 6543);
context = (context || this);
context.clearInterval(context.alertDotTimer);
if (!context.$dotElm) {
context.$dotElm = $('<div class="alertDot hide"><span class="alertDotSpan"><!--//--></span></div>');
$('body').append(context.$dotElm);
}
context.$dotElm.find('span').text(msg);
context.$dotElm.removeClass('hide');
context.alertDotTimer = context.setTimeout(function closeAlertDot() {
context.$dotElm.addClass('hide');
}, duration);
};
$(document).ready(function documentReady() {
try {
alertDot('Ready to roll.');
} catch (e) {
console.log(e);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment