Notification

Notification

Dear forum users,

I made a jquery notification system and it works! BUT... I want to make it like fade in when it shows. But it don't work! I don't know why. Could someone help me out? The script.js is down on this page!!!

index.php

  1. <html>
  2. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  5. <script src="script.js"></script>
  6. </head>
  7. <body>
  9.  <script type="text/javascript">
  10.   notificatie({
  11.                                     type: "error"
  12.                                 });
  13.                     </script>
  14. </body>
  15. </html>
style.css
  2. /* notificatie */
  3. #not{
  4. width: 500px;
  5. height: 56px;
  6. margin: auto;
  7. border-radius: 6px;
  8. padding: 12px;
  9. }
  10. #not > .left {
  11. float: left;
  12. }
  13. #not > .right {
  14. float: right;
  15. }
  16. .error_not{
  17. background: #ffd2d3;
  18. border: 1px solid #f4cbcb;
  19. }
  20. .succes_not{
  21. background: #d4ffcd;
  22. border: 1px solid #cff4c9;
  23. }
  24. .info_not{
  25. background: #dbecff;
  26. border: 1px solid #d2e6fc;
  27. }
  28. .waarschuwing_not{
  29. background: #fefccb;
  30. border: 1px solid #f6f2b5;
  31. }
  32. #not p {
  33. text-align: center;
  34. font-size: 21px;
  35. margin-top: -4px;
  36. font-family: Helvetica, Arial;
  37. }
  38. #not span {
  39. text-align: center;
  40. font-size: 16px;
  41. color: #FFF;
  42. margin-top: -8px;
  43. display: block;
  44. font-family: Helvetica, Arial;
  45. }
  46. .error_not p {
  47. color: #c27171;
  48. }
  49. .succes_not p{
  50. color: #7bc26f;
  51. }
  52. .info_not p{
  53. color: #84a0e1;
  54. }
  55. .waarschuwing_not p{
  56. color: #c1be6e;
  57. }
script.js
  2. function notificatie(para){

  4. //de opties
  5. var opties = {
  6. 'duur': 2, //Duur van de notificatie
  7. 'na': 1, //Sluiten na x seconden
  8. 'autoclose': false, //Het automatisch sluiten van de notificatie
  9. 'type': 'error', //Het type error: succes/error/info/waarschuwing
  10. 'bericht': 'Notificatie error!', //Bericht wat mee komt
  11. 'sub': 'Er is iets mis met het notificatie systeem.' //Sub bericht
  12. };

  14. // opties aan de notificatie functie voegen
  15. $.extend(true,opties,para);

  17. // design toepassen aan verscheidene classes
  18. var not_class = 'error_not';
  19. if(opties['type'] == 'succes'){
  20. not_class = 'succes_not';
  21. }else if(opties['type'] == 'info'){
  22. not_class = 'info_not';
  23. }else if(opties['type'] == 'waarschuwing'){
  24. not_class = 'waarschuwing_not';
  25. }

  27. //Container waarin de notificatie verschijnt
  28. var container = '<div id="not" class="'+not_class+'">';
  29. container += '<div class="left"><img src="images/'+opties['type']+'.png" /></div><p>';
  30. container += opties['bericht'];
  31. container += '</p><span>'+opties['sub']+'</span></div>';
  33. $noti = $(container);

  35. //notificatie toevoegen na de body tag
  36. $('body').append($noti);

  38. //animatie bij het showen
  39.     var divHeight = $('#not').height();
  40.     // see CSS top to minus of div height
  41.     $('#not').css({
  42.         top : '-'+divHeight+'px'
  43.     });
  45. //het showen van de notificatie
  46. $('#not').show();

  48. slideDownNotificatie(opties['duur'], opties['na'], opties['autoclose']);
  49. }


  52. function slideDownNotificatie(duur, na, autoclose){    
  53.     setTimeout(function(){
  54.         $('#not').animate({
  55.             top: 0
  56.         }); 
  57.     }, parseInt(na * 1000));    
  58. }
I hope someone can help me!