create a notification bar

Question

Im able to print a message at the top, but the css doesnt work as supposed. I want it to look like this and be placed at the bottom:

Also, it is an error message i want the color to be red and displaying for 4000 ms, else if it is success i want it to be green and displaying for 1000ms. If the notification bar already is showing i want to switch the notification bar to the new one.

The code so far:

 function error(msg) { $('<div/>').prependTo('body').addClass('#notify-error').html(msg).slideDown(); } function success(msg) { $('<div/>').prependTo('body').addClass('#notify-success').html(msg).slideDown(); } $('#notify-error').click(function () { $(this).slideUp().empty(); }); $('#notify-success').click(function () { $(this).slideUp().empty(); }); error('Error!'); success('Success!'); 

 /* css: */ #notify-success { position:relative; width:100%; background-color:green; height:30px; color:white; display:none; text-align:center; padding:5px; font-size:2em; line-height:1em; font-family: Arial, sans-serif; border:2px solid #666; cursor:pointer; } #notify-error { position:relative; width:100%; background-color:red; height:30px; color:white; display:none; text-align:center; padding:5px; font-size:2em; line-height:1em; font-family: Arial, sans-serif; border:2px solid #666; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

jsfiddle

Answer 1

.addClass() adds a class to the element so you have to change your CSS selector :

Change CSS :

#notify-success{...} -> .notify-success{...}
#notify-error{...} -> .notify-error{...}

And JS :

.addClass('#notify-success') -> .addClass('notify-success')
.addClass('#notify-error') -> .addClass('notify-error')

JSFiddle

Answer 2

try this i had made some changes in your JS and CSS .

in your js you are adding a class with # such as addClass('#notify-error') Which denotes the id so i have remove it from JS functions error(msg) and success(msg)

 /* JS */ function error(msg) { $('<div/>').prependTo('body').addClass('notify-error').html(msg).slideDown(); } function success(msg) { $('<div/>').prependTo('body').addClass('notify-success').html(msg).slideDown(); } $('#notify-error').click(function () { $(this).slideUp().empty(); }); $('#notify-success').click(function () { $(this).slideUp().empty(); }); error('Error!'); success('Success!'); 

 /* CSS */ .notify-success { position:relative; width:100%; background-color:green; height:30px; color:white; display:none; text-align:center; padding:5px; font-size:2em; line-height:1em; font-family: Arial, sans-serif; border:2px solid #666; cursor:pointer; } .notify-error { position:relative; width:100%; background-color:red; height:30px; color:white; display:none; text-align:center; padding:5px; font-size:2em; line-height:1em; font-family: Arial, sans-serif; border:2px solid #666; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

see your UPDATE FIDDLE

Answer 3

Remove from the addclass the "#" char.

function error(msg) {
    $('<div/>').prependTo('body').addClass('notify-error').html(msg).slideDown();
}

function success(msg) {
    $('<div/>').prependTo('body').addClass('notify-success').html(msg).slideDown();
}

Also in the css change this

#notify-error and  #notify-success

to this

.notify-error and  .notify-success

UPDATE:

you can achieve the second part by fixing this part of the code:

function error(msg) {
    $('<div/>').prependTo('body').addClass('notify-error').html(msg).slideDown(4000);
    $('.notify-success').hide();
}

function success(msg) {
    $('<div/>').prependTo('body').addClass('notify-success').html(msg).slideDown(1000);
    $('.notify-error').hide();
}

Answer 4

You are trying to add style to id thats the problem

Try this :

 /* JS */ function error(msg) { $('<div>').prependTo('body').addClass('notify-error').html(msg).slideDown(); } function success(msg) { $('<div/>').prependTo('body').addClass('notify-success').html(msg).slideDown(); } $('body').on('click','.notify-error',function () { $(this).slideUp().empty(); }); $('body').on('click','.notify-success',function () { $(this).slideUp().empty(); }); error('Error!'); success('Success!'); 

 /* CSS */ .notify-success { position:relative; width:100%; background-color:green; height:30px; color:white; display:none; text-align:center; padding:5px; font-size:2em; line-height:1em; font-family: Arial, sans-serif; border:2px solid #666; cursor:pointer; } .notify-error { position:relative; width:100%; background-color:red; height:30px; color:white; display:none; text-align:center; padding:5px; font-size:2em; line-height:1em; font-family: Arial, sans-serif; border:2px solid #666; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 5

When you are adding class attribute in this line $('<div/>').prependTo('body').addClass('#notify-error').html(msg).slideDown(); You should not write '#'. It should be like this $('<div/>').prependTo('body').addClass('notify-error').html(msg).slideDown(); after this change your CSS from #notift-error to .notify-error same for the notify-success. In HTML are just declaring attributes and their value the selector '#' for ID and '.' for class is used for while selecting them in CSS or JavaScript.