notifyjs
Notify.js - A simple, versatile notification library
Notify.js notify.js - a simple, versatile notification library
I'm using http://notifyjs.com and I think it's working great.
However I have this issue when applying it to my case.
I want to display a notification using notify.js in the bottom right corner. And this notification should not disappear until users click on it (just to make sure they don't miss it)
When I run my web locally, everything is working fine. The notification is displayed in bottom right corner of the window, and it stays there regardless of scrolling.
$.notify('HelloWorld',
{
className: 'success',
autoHide: false,
clickToHide: true,
position: "bottom right"
}
);
However, when I deploy it to the UAT server in which our web application is only an iframe, the notification is displayed in the corner, but it's in the corner of the iframe, so it might go off the users' screen when they scroll, or they can't see it because it appears when they are not the bottom of iframe.
Please help to advise how I can position an iframe's div relatively to the window is possible. Thanks very much in advance.
==================================================
The html looks something like this:
<html>
<head>...</head>
<body>
<div id="container">
...
<div id="main-content">
<div id="iframe-container">
<iframe id="Main" name="Main" frameborder="0" scrolling="no">
<html>
<body>
...
<div class="notifyis-corner" style="right: 0px; bottom: 0px;">...</div>
</body>
</html>
</iframe>
</div>
</div>
</div>
</body>
</html>
I can see the css for notifyjs-corner as below:
.notifyjs-corner {
position: fixed;
margin: 5px;
z-index: 1050;
}
Source: (StackOverflow)
I am attempting to implement Notifications for my node.js app with Notify.js:
https://github.com/alexgibson/notify.js
When I do:
var Notify = require('notifyjs');
It instantly return this error when starting the app:
...\notify.js:18}(window, function (w, d) {
ReferenceError: window is not defined
Unsure of how to proceed.
Thanks in advance.
Source: (StackOverflow)
I have the following code on my document.ready
$.notify("Your class starts in 15min", "info", {
clickToHide: false,
autoHide: false,
globalPosition: 'top center'
});
but nothing happen, I only get the text and the info type, but autohide and globalposition it's not working.
What I'm doing wrong.
thanks for your helps
Source: (StackOverflow)
<script src="js/jquery-2.1.1.js"></script>
<script src="notify/js/notify.js"></script>
<script src="notify/js/notify-bootstrap.js"></script>
<form>
<div id="userInfoDiv" name="userInfoDiv" style="padding-top:100px;padding-left:100px;">
<span class="box pos-demo">Notifyjs position div</span>
</div>
</form>
<script type="text/javascript">
$(".pos-demo").notify(
"Welcome Guest",
{ position:"right" }
);
$.notify("This notofication is working ","success");
</script>
Note : The notification is not displayed.Where as $,notify("") without position is working fine.
Source: (StackOverflow)
I am using notifyjs for some notifications. I notice that .notify(...) returns an element, not an object I can use to manipulate the notification. How can I hide the notification from an external event, such as clicking a button?
Is it possible to somehow inject an element ID or class name into the notification, so I can select it later using jQuery? Right now all I see is:
<div class="notifyjs-wrapper">
<div class="notifyjs-arrow" style="..."></div>
<div class="notifyjs-container" style="...">
<div class="notifyjs-bootstrap-base notifyjs-bootstrap-info">
<span data-notify-text="">No Pick Tickets To Create</span>
</div>
</div>
</div>
There's nothing specific I can use to later identity the notification. Following one of the examples on the notifyjs page, I attempted:
$('#elem').notify({
title: $('<div id="foobar"></div>').text("the message")
}, {
...
});
But this results in a broken notification.
Source: (StackOverflow)
I would like to have my notifications from notifyJS on top of a specified element (e.g. footer div). The notifications show up, but however, they do not stack if there is more than one notification at the same time. Though if I position the notifications to the global browser window, they do stack.
See the jsfiddle:
http://jsfiddle.net/o59jrfh6/1/
As my footer is fixed to the bottom of my webapp, I could also use the gap attribute to modify the positioning (described here: http://notifyjs.com/), so that it looks like it stacks on top of the footer div. However, it does not work, the gap remains the same. I tried it like that:
$('.footer').notify("There was an error", { position: 'top center', className: 'error', gap: 10 });
If I cannot stack notifications on an element, how can I use the gap attribute proberly so it does at least look like its stacked on top of the footer div?
Source: (StackOverflow)
I would like to handle click events on the notification box by notifyjs, to link user to another page.
I understand that I could use jquery selector to select notifyjs class but that would break other notifications that are not meant to do the redirect.
I've look through notifyjs webpage and there's no click event documented.
How can I do so?
Thanks.
Source: (StackOverflow)