diff --git a/README.md b/README.md
index b32f113..682e4f7 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ In cases when you don't really want notifications getting in the way of the ever
Simply include the `hat-tip.js` in your project (or copy the raw code out), add the css you'll find in `hat-tip.css`, and put the following mark-up at the bottom of your page. Minifed versions of both of those are also included, but their already SUPER-small (the bundle file is only 3kb, uncompressed).
```html
-
+
×
@@ -55,6 +55,11 @@ You can also include some basic styling in the message, thusly.
hattip_fire('I may be drunk, Miss, but in the morning I will be sober and
you will still be ugly. ');
```
+Since v1.2, you have a third option which makes the notification a little "louder" with a bounce-in animation. Simply add `dont-panic` as the final attribute. Did you ever see "[Dad's Army](https://tenor.com/search/dads-army-gifs)?"
+```js
+hattip_fire('The time has come for us to no longer
keep calm and carry on... ', 'ht-danger', 'dont-panic');
+```
+
If a second notification is fired while the first is still on the screen, it'll automatically close, clean-up, and fire the new notification.
## Changlog
@@ -63,6 +68,8 @@ v1.0 - Initial Release
v1.1 - Adds Minified Versions as well as a "Bundle" option
+v1.2 - Don't Panic! (louder animation) added
+
![adrian-dascal-aQu92J-TrxY-unsplash-small](https://user-images.githubusercontent.com/12448527/205357306-d46b193b-6f9b-41a3-8e4a-b0252fb58089.jpg)
Photo Credit: Adrian Dascal https://unsplash.com/@dascal on Unspash
diff --git a/hat-tip-bundle.js b/hat-tip-bundle.js
index 4677555..9ad0948 100644
--- a/hat-tip-bundle.js
+++ b/hat-tip-bundle.js
@@ -1,45 +1,56 @@
// Hat-Tip Bundle v1.1
// Bundle does NOT need you to add the markup or the CSS. Both get added for you. Just include the file and call the function.
// https://github.com/jdmdigital/hat-tip
+// Hat-Tip v 1.2 - BUNDLE
+// https://github.com/jdmdigital/hat-tip
+function hattip_die(){
+ $('#hattip').removeClass('fire loud');
-function hattip_die() {
- $('#hattip').removeClass('fire');
-
- setTimeout(function () {
- $('#hattip #msg').html('');
- $('#hattip').removeAttr('class');
- }, 400);
+ setTimeout(function() {
+ $('#hattip #msg').html('');
+ $('#hattip').removeAttr('class');
+ },400);
}
-function hattip_fire(msg = 'Top of the morning to ya!', colorClass = 'ht-default') {
- var hhwaiting = 50;
-
- if ($('#hattip').hasClass('fire')) {
- hattip_die();
- hhwaiting = 500;
- }
-
- setTimeout(function () {
- $('#hattip #msg').html(msg);
- $('#hattip').addClass(colorClass).addClass('display');
- setTimeout(function () {
- $('#hattip').addClass('fire');
- }, 25);
+function hattip_fire(msg = 'Hello World!',colorClass = 'ht-default',loud = 'keep-calm'){
+ var hhwaiting = 50;
+ $('#hattip').data('loud',loud);
+
+ if($('#hattip').hasClass('fire')) {
+ hattip_die();
+ hhwaiting = 500;
+ }
+
+ setTimeout(function() {
+ $('#hattip #msg').html(msg);
+ $('#hattip').addClass(colorClass).addClass('display');
+ setTimeout(function() {
+ if($('#hattip').data('loud') == 'dont-panic') {
+ $('#hattip').addClass('fire loud');
+ } else {
+ $('#hattip').addClass('fire');
+ }
+ }, 30);
+
+ // Auto-hide after 6 seconds if no other notifications are added?
+ /*setTimeout(function() {
+ hattip_die();
+ },6000);*/
+
+ },hhwaiting);
+}
- // Auto-hide after 10 seconds if no other notifications are added?
- /*setTimeout(function() {
- hattip_die();
- }, 10000);*/
+jQuery('#hattip button').click(function() {
+ hattip_die();
+});
- }, hhwaiting);
-}
jQuery(document).ready(function () {
- if (!jQuery('#hattip').length) {
- jQuery("body").prepend('
×
');
+ if (!jQuery('#hattip').length){
+ jQuery("body").prepend('
×
');
}
-
- jQuery('#hattip button').click(function () {
- hattip_die();
+
+ jQuery('#hattip button').click(function() {
+ hattip_die();
});
});
\ No newline at end of file
diff --git a/hat-tip-demo.zip b/hat-tip-demo.zip
index 4ac48e2..474aa51 100644
Binary files a/hat-tip-demo.zip and b/hat-tip-demo.zip differ
diff --git a/hat-tip.css b/hat-tip.css
index e61c089..051747a 100644
--- a/hat-tip.css
+++ b/hat-tip.css
@@ -1,3 +1,6 @@
+/* Hat-Tip v 1.2
+ * https://github.com/jdmdigital/hat-tip
+ */
#hattip{
position: fixed;
display: none;
@@ -9,6 +12,7 @@
transition-delay: 0.1s;
padding:15px 90px 15px 30px;
margin-bottom:0!important;
+ z-index: 88;
}
#hattip span, #hattip button{
color:rgba(255,255,255,0.95);
@@ -48,12 +52,16 @@
opacity: 1;
outline: none;
}
-#hattip.fire{
- bottom:-1px;
-}
+
#hattip.display{
display: block;
}
+#hattip.loud{
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
#hattip.ht-success{
background-color:rgba(6,134,134,0.95);
}
@@ -62,4 +70,96 @@
}
#hattip.ht-danger{
background-color:rgba(225,27,80,0.95);
+}
+
+/* Attention seekers */
+@-webkit-keyframes bounce {
+ from,
+ 20%,
+ 53%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 40%,
+ 43% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ -webkit-transform: translate3d(0, -20px, 0) scaleY(1.1);
+ transform: translate3d(0, -20px, 0) scaleY(1.1);
+ }
+
+ 70% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ -webkit-transform: translate3d(0, -10px, 0) scaleY(1.01);
+ transform: translate3d(0, -10px, 0) scaleY(1.01);
+ }
+
+ 80% {
+ -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ -webkit-transform: translate3d(0, 0, 0) scaleY(0.99);
+ transform: translate3d(0, 0, 0) scaleY(0.99);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
+ transform: translate3d(0, -4px, 0) scaleY(1.02);
+ }
+}
+@keyframes bounce {
+ from,
+ 20%,
+ 53%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 40%,
+ 43% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ -webkit-transform: translate3d(0, -20px, 0) scaleY(1.1);
+ transform: translate3d(0, -20px, 0) scaleY(1.1);
+ }
+
+ 70% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ -webkit-transform: translate3d(0, -10px, 0) scaleY(1.01);
+ transform: translate3d(0, -10px, 0) scaleY(1.01);
+ }
+
+ 80% {
+ -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ -webkit-transform: translate3d(0, 0, 0) scaleY(0.99);
+ transform: translate3d(0, 0, 0) scaleY(0.99);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
+ transform: translate3d(0, -4px, 0) scaleY(1.02);
+ }
+}
+#hattip.fire{
+ bottom:-1px;
+}
+#hattip.fire.loud{
+ -webkit-animation-name: bounce;
+ animation-name: bounce;
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+}
+@media screen and (min-width:1170px){
+ #hattip #msg{
+ font-size:1.25rem;
+ }
}
\ No newline at end of file
diff --git a/hat-tip.js b/hat-tip.js
index 7b7e4a4..64f9925 100644
--- a/hat-tip.js
+++ b/hat-tip.js
@@ -1,7 +1,7 @@
-// Hat-Tip v 1.1
+// Hat-Tip v 1.2
// https://github.com/jdmdigital/hat-tip
function hattip_die(){
- $('#hattip').removeClass('fire');
+ $('#hattip').removeClass('fire loud');
setTimeout(function() {
$('#hattip #msg').html('');
@@ -9,20 +9,25 @@ function hattip_die(){
},400);
}
-function hattip_fire(msg = 'Hello World!',colorClass = 'ht-default'){
+function hattip_fire(msg = 'Hello World!',colorClass = 'ht-default',loud = 'keep-calm'){
var hhwaiting = 50;
-
+ $('#hattip').data('loud',loud);
+
if($('#hattip').hasClass('fire')) {
hattip_die();
hhwaiting = 500;
- }
+ }
setTimeout(function() {
$('#hattip #msg').html(msg);
$('#hattip').addClass(colorClass).addClass('display');
setTimeout(function() {
- $('#hattip').addClass('fire');
- }, 25);
+ if($('#hattip').data('loud') == 'dont-panic') {
+ $('#hattip').addClass('fire loud');
+ } else {
+ $('#hattip').addClass('fire');
+ }
+ }, 30);
// Auto-hide after 6 seconds if no other notifications are added?
/*setTimeout(function() {
@@ -32,8 +37,6 @@ function hattip_fire(msg = 'Hello World!',colorClass = 'ht-default'){
},hhwaiting);
}
-jQuery(document).ready(function () {
- jQuery('#hattip button').click(function() {
- hattip_die();
- });
-});
\ No newline at end of file
+jQuery('#hattip button').click(function() {
+ hattip_die();
+});
diff --git a/hat-tip.min.css b/hat-tip.min.css
index 71353a1..27a014a 100644
--- a/hat-tip.min.css
+++ b/hat-tip.min.css
@@ -1,2 +1,2 @@
-/* Hat-Tip CSS v1.1 */
-#hattip{position:fixed;display:none;bottom:-150px;max-height:100px;width:100%;background-color:rgba(12,21,38,.9);transition:.35s 0.1s;padding:15px 90px 15px 30px;margin-bottom:0!important;text-align:left}#hattip button,#hattip span{color:rgba(255,255,255,.95)}#hattip button{position:absolute;top:0;right:0;padding:15px 30px;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;float:right;font-size:1.5rem;font-weight:600;line-height:1;text-shadow:0 1px 0 #fff;opacity:.5;text-transform:none;overflow:visible;margin:0;border-radius:0;transition:opacity .15s}#hattip button:not(:disabled){cursor:pointer}#hattip button:not(:disabled):focus,#hattip button:not(:disabled):not(.disabled):hover{opacity:.75;text-decoration:none;outline:0}#hattip button:not(:disabled):active{opacity:1;outline:0}#hattip.fire{bottom:-1px}#hattip.display{display:block}#hattip.ht-success{background-color:rgba(6,134,134,.95)}#hattip.ht-info{background-color:rgba(13,202,240,.95)}#hattip.ht-danger{background-color:rgba(225,27,80,.95)}
\ No newline at end of file
+/* Hat-Tip CSS v1.2 */
+ #hattip{position: fixed;display: none;bottom:-150px;max-height: 100px;width: 100%;background-color:rgba(12,21,38,0.90);transition: all 0.35s;transition-delay: 0.1s;padding:15px 90px 15px 30px;margin-bottom:0!important;z-index: 88;}#hattip span, #hattip button{color:rgba(255,255,255,0.95);}#hattip button{position: absolute;top: 0;right: 0;padding: 0.75rem 1.25rem;background-color: transparent;border: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 15px 30px;float: right;font-size: 1.5rem;font-weight: 600;line-height: 1;text-shadow: 0 1px 0 #fff;opacity: .5;text-transform: none;overflow: visible;margin: 0;border-radius: 0;transition: opacity 0.15s;}#hattip button:not(:disabled){cursor: pointer;}#hattip button:not(:disabled):focus, #hattip button:not(:disabled):not(.disabled):hover {opacity: .75;text-decoration: none;outline: none;}#hattip button:not(:disabled):active{opacity: 1;outline: none;}#hattip.display{display: block;}#hattip.loud{-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}#hattip.ht-success{background-color:rgba(6,134,134,0.95);}#hattip.ht-info{background-color:rgba(13,202,240,0.95);}#hattip.ht-danger{background-color:rgba(225,27,80,0.95);}@-webkit-keyframes bounce {from, 20%, 53%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}40%, 43% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform: translate3d(0, -20px, 0) scaleY(1.1);transform: translate3d(0, -20px, 0) scaleY(1.1);}70% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform: translate3d(0, -10px, 0) scaleY(1.01);transform: translate3d(0, -10px, 0) scaleY(1.01);}80% {-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform: translate3d(0, 0, 0) scaleY(0.99);transform: translate3d(0, 0, 0) scaleY(0.99);}90% {-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);transform: translate3d(0, -4px, 0) scaleY(1.02);}}@keyframes bounce {from, 20%, 53%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}40%, 43% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform: translate3d(0, -20px, 0) scaleY(1.1);transform: translate3d(0, -20px, 0) scaleY(1.1);}70% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform: translate3d(0, -10px, 0) scaleY(1.01);transform: translate3d(0, -10px, 0) scaleY(1.01);}80% {-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform: translate3d(0, 0, 0) scaleY(0.99);transform: translate3d(0, 0, 0) scaleY(0.99);}90% {-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);transform: translate3d(0, -4px, 0) scaleY(1.02);}}#hattip.fire{bottom:-1px;}#hattip.fire.loud{-webkit-animation-name: bounce;animation-name: bounce;-webkit-transform-origin: center bottom;transform-origin: center bottom;}@media screen and (min-width:1170px){#hattip #msg{font-size:1.25rem;}}
\ No newline at end of file
diff --git a/hat-tip.min.js b/hat-tip.min.js
index 971d9da..7ccd16e 100644
--- a/hat-tip.min.js
+++ b/hat-tip.min.js
@@ -1 +1,3 @@
-function hattip_die(){$("#hattip").removeClass("fire"),setTimeout(function(){$("#hattip #msg").html(""),$("#hattip").removeAttr("class")},400)}function hattip_fire(t="Hello World!",i="ht-default"){var a=50;$("#hattip").hasClass("fire")&&(hattip_die(),a=500),setTimeout(function(){$("#hattip #msg").html(t),$("#hattip").addClass(i).addClass("display"),setTimeout(function(){$("#hattip").addClass("fire")},25)},a)}jQuery("#hattip button").click(function(){hattip_die()});
\ No newline at end of file
+// Hat-Tip v 1.2
+// https://github.com/jdmdigital/hat-tip
+function hattip_die(){$("#hattip").removeClass("fire loud"),setTimeout(function(){$("#hattip #msg").html(""),$("#hattip").removeAttr("class")},400)}function hattip_fire(t="Hello World!",a="ht-default",i="keep-calm"){var d=50;$("#hattip").data("loud",i),$("#hattip").hasClass("fire")&&(hattip_die(),d=500),setTimeout(function(){$("#hattip #msg").html(t),$("#hattip").addClass(a).addClass("display"),setTimeout(function(){"dont-panic"==$("#hattip").data("loud")?$("#hattip").addClass("fire loud"):$("#hattip").addClass("fire")},30)},d)}jQuery("#hattip button").click(function(){hattip_die()});
\ No newline at end of file