CODEWITHSUNDEEP
javascriptjquerynotifyjs
Maha
Maha

Reputation: 25

Notify JS not working

I am working on a Notify JS Notification option. I have tried but its not working. If I remove Style and class name its working fine. 

   <style>

    .notifyjs-happyblue-base {
      white-space: nowrap;
      background-color: lightblue;
      padding: 5px;
    }
    .notifyjs-happyblue-superblue {
      color: white;
      background-color: blue;
    }
    </style>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="notify.js"></script>
<script src="notify.min.js"></script>  

<script>

        $(function(){
          $.notify("Your Break is Approved", {
            style: 'happyblue',
            className: 'superblue'
            title: "E-Contact Application"
          });
     });
</script>

Upvotes: 0

Views: 9460

Answers (2)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

use $.notify.addStyle(... befor $.notify("Message",...

$.notify.addStyle('happyblue', {
  html: "<span><span data-notify-text/></span>",
     classes: {
        base: {
          "white-space": "nowrap",
          "background-color": "lightblue",
          "padding": "5px"
        },
        superblue: {
          "color": "white",
          "background-color": "blue"
        }
      }
});

$.notify("Message", {
  style: 'happyblue',
  className: 'superblue'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js"></script>

Upvotes: 1

Fenton
Fenton

Reputation: 251192

Step one, just include the script once... you are including the uncomprssed version, and the minified version...

<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<!--<script src="notify.js"></script> DITCH THIS LINE -->
<script src="notify.min.js"></script>

Step two, make sure your syntax is correct...

$(function(){
    $.notify("Your Break is Approved", {
        style: 'happyblue',
        className: 'superblue', // <-- just a comma, but really important
        title: "E-Contact Application"
    });
});

Putting it all together...

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>
<script>
    $.notify.addStyle('happyblue', {
     html: "<div>☺<span data-notify-text/>☺</div>",
     classes: {
        base: {
          "white-space": "nowrap",
          "background-color": "lightblue",
          "padding": "5px"
        },
        superblue: {
          "color": "white",
          "background-color": "blue"
        }
      }
    });


    $.notify("Your Break is Approved", {
        style: 'happyblue',
        className: 'superblue', // <-- just a comma, but really important
        title: "E-Contact Application"
    });
</script>

Upvotes: 4

Related Questions