Top Notification Bar Show and Hide with smooth effect

Question

In case of any error/warning from my server, I need to show and hide Top Notification Bar with absolute position - DIV.

I need to show this BAR only when the error occurs and hide it after say few seconds may be 10 sec, and with smooth effects?

How can one implement this in HTML, CSS/SCSS and Pure Javascript. NO Javscript Frameworks :(

<div id="app-notification-bar" class="app-notification-bar app-error-message"></div>

SCSS, prefix is app-

.#{$prefix}error-message {
        font-family:Helvetica, Arial, sans-serif;
        font-size:12px;
        vertical-align:central;
        color: #cc0000;
        font-weight:bold;
    }

    .#{$prefix}notification-bar {
        position: absolute;
        z-index: 101;
        top: 0;
        left: 0;
        right: 0;
        background: #FFFFFF;
        text-align: center;
        line-height: 2.5;
        overflow: hidden; 
        -webkit-box-shadow: 0 0 5px black;
        -moz-box-shadow:    0 0 5px black;
        box-shadow:         0 0 5px black;
    }

    @-webkit-keyframes slideDown {
        0%, 100% { -webkit-transform: translateY(-50px); }
        10%, 90% { -webkit-transform: translateY(0px); }
    }
    @-moz-keyframes slideDown {
        0%, 100% { -moz-transform: translateY(-50px); }
        10%, 90% { -moz-transform: translateY(0px); }
    }

    .cssanimations.csstransforms .#{$prefix}notification-bar {
        -webkit-transform: translateY(-50px);
        -webkit-animation: slideDown 2.5s 10.0s 1 ease forwards;
        -moz-transform:    translateY(-50px);
        -moz-animation:    slideDown 2.5s 10.0s 1 ease forwards;
    }

JS

document.getElementById('app-notification-bar').innerHTML = wrnMsg;
setTimeout(function(){ document.getElementById('app-notification-bar').innerHTML = ''; }, 3000);

nvm you added your code... my bad and there are some answers already so I do not need to give my input :) good luck — K Nugal, Jul 14 '16 at 11:15
you should refer this ans already suits your question http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css — black_pottery_beauty, Jul 14 '16 at 11:19

score 0 · Answer 1 · answered Jul 14 '16 at 11:18

Js

var d;
function error(message){
var d=document.getElementById("error");
d.innerHTML=message;
d.style.opacity="1";
window.setTimeout(function(){
d.style.opacity="0";
},5000);
}
error("a big bug");

Css:

#error{
opacity:0;
transition:all ease 2s;
background-color:red;
color:white;
}

Html:

<div id="error"></div>

score 0 · Answer 2 · answered Jul 14 '16 at 11:26

Check This Out

CSS

body {
  background: white;
}

div.error-content {
  transition: all 0.5s linear;
  width: 100%;
  height: 70px;
  line-height: 70px;
  background-color:red;
  text-align: center;
  color:white;
  top:-70px;
  position:absolute;
}

div.error-content.active {
  top:0px
}

#showError {
  position: absolute;
 top: 80px; 
}

Javascript

document.getElementById("showError").addEventListener("click", function() {
  var className = document.getElementsByClassName('error-content')[0].className 
  document.getElementsByClassName('error-content')[0].className = className.concat(" active");
  setTimeout(function() {
    document.getElementsByClassName('error-content')[0].className = 'error-content'
  },2000)
});

score -1 · Answer 3 · answered Jul 14 '16 at 11:11

You should write your code to as this question. This can be helpful for you use fadeIn with time and slow.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
    });
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

Just replace your loading div with these colouful boxes

I'm not suppose to use any framework including JQuery – Prateek Agarwal Jul 14 '16 at 11:14 — Prateek Agarwal, Jul 14 '16 at 11:14

Top Notification Bar Show and Hide with smooth effect

3 Answers3