Search code examples
javascriptjquerycssnotifyjs

Notify JS not working correctly on fixed elements?

Problem: If I initiate notify JS on a fixed element the notification will behave as if the element was placed using absolute positioning.

Code Reference:

HTML:

<div class="box"></div>

CSS:

.box {
    width: 10vw;
    height: 10vh;
    position: fixed;
    top: 2vh;
    border: solid 2px;
}

Javascript:

$(".box").notify("Click me!",{position:"bottom center",className:"success"});

JS Fiddle: https://jsfiddle.net/kwzL4999/

Replication Instructions: Scroll down a bit and click on the element to see the above problem in action.

Solution

  • An alternative is use a div with class for example "notify" inside your div with class "Box"

    HTML

    <div class="box">
  <div class="notify"></div>
</div>

    Javascript

    $(".notify").on("click",function(){
$(this).notify("Click me!",{position:"bottom center",className:"success"});
});

    Example Jsfiddle: Jsfiddle