Placing notifications on a site with notify.js
I am trying to show global notifications using bootstrap and notify.js ( http://notifyjs.com/ ) / jQuery. I have no problem getting notifications to work using the following code:
$.notify('successfully logged in','succes');
However, I want the notification to appear in the top right corner below the loading navbar, or in other words, I want the top notification to appear 50px below the top level of the page.
Using "margin-top":"50px"
in the base class seems to work, but the second notice also appears 50px below.
Any help is appreciated
source to share
I played around a bit with the example at http://notifyjs.com . All global notifications are added to the container <div>
with the class .notifyjs-corner
. Looking through the source code, it seems that there is no way to override the default CSS style for this class. The container gets its positioning by adding inline styling to the html element. One way to override this would be, for example:
.notifyjs-corner {
top: 70px !important;
}
Another, I think, the preferred solution would be to not use global notifications, but create your own positioning element. For example, create an element like <div class="notifications">
, place it with your own css and add notifications to it using$('.notifications').notify('successfully logged in', 'success');
source to share