Skip to content

Instantly share code, notes, and snippets.

@simsketch

simsketch/simple-growl.css

Last active January 9, 2020 23:13
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simsketch/e6b8d41745577b8d7f41 to your computer and use it in GitHub Desktop.
Save simsketch/e6b8d41745577b8d7f41 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Growl Notification
Raw
simple-growl.css
body {
text-align:center;
background:#000;
}
.growl-notice {
display:none;
font-family:Helvetica,Verdana,sans-serif;
width: 300px;
height: 65px;
padding: 5px 10px;
border-radius: 4px;
opacity: .97;
font-size: 14px;
color: #fff;
background: #BF0025;
position: fixed;
right: 10px;
bottom: 34px;
line-height:60px;
}
#activator {
text-decoration:none;
font-family:Courier New, sans-serif;
font-size:48px;
font-weight:bold;
color:#606060;
background:#272727;
padding:10px 20px;
-webkit-border-radius:10px;
border-radius:10px;
margin-top:40px;
display:inline-block;
}
Raw
simple-growl.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="simple-growl.css">
</head>
<body>
<div class="growl-notice"></div>
<a href="#" id="activator" onclick="javascript:displayGrowl('Notification has been displayed.')">Click Me To View Growl</a>
</body>
<script src="simple-growl.js"></script>
</html>
Raw
simple-growl.js
<script>
function displayGrowl(message) {
$('.growl-notice').fadeIn().html(message);
setTimeout(function(){
$('.growl-notice').fadeOut();
}, 2000);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment