Notify JS with element Selector Doesn't works 100%

Question

I'm using Notify JS from here :

http://notifyjs.com/

And this is my HTML :

  <div>
    <p><span class="elem-demo">aaaa</span></p>
    <script>
      $(".elem-demo").notify(
        "Hello Box",
        {
          autoHide:false
        }
      );
    </script>
  </div>

It doesn't work correctly. I can see the arrow, but not the message.

I've check using my browser "inspect element", the class notifyjs-container has "display:none" and when i try change it into "display:inline" via my own css, the message does appear, but without its animation.

Anybody can help ?

Here I attach the image of the small arrow i said earlier :

Answer 1

You need to put the notify setup inside the doc ready, ie:

$(function() { 
    $(".elem-demo").notify("Hello");
});

What is happening is that the .notify() script is running before the page has fully rendered, so the .elem-demo does not yet exist when $(".elem-demo") tries to find it, so the .notify() has nothing to attach itself to.

$(function() { ...

is shorthand for

$(document).ready(function() { ...

which is jquery's way of saying - don't run this script until the page elements have completely finished loading.

It's generally a good idea to put all your scripts into a ready function like this (multiple $(function() { ... can be called, they don't need to be all in the same one).

More info on the jquery learning page: https://learn.jquery.com/using-jquery-core/document-ready/