CODEWITHSUNDEEP
javascriptjquerycss
Henrik
Henrik

Reputation: 1807

create a notification bar

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:

image

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

Upvotes: 1

Views: 3052

Answers (5)

Satish Sharma
Satish Sharma

Reputation: 9635

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

Upvotes: 1

Md Mahmudul Haque Fahim
Md Mahmudul Haque Fahim

Reputation: 283

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>

Upvotes: 1

nowhere
nowhere

Reputation: 1548

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();
}

Upvotes: 1

Jaysinh
Jaysinh

Reputation: 57

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.

Upvotes: 1

Vucko
Vucko

Reputation: 20834

.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

Upvotes: 1

Related Questions