sciactive / pnotify Goto Github PK
View Code? Open in Web Editor NEWBeautiful JavaScript notifications with Web Notifications support.
Home Page: https://sciactive.com/pnotify/
License: Apache License 2.0
Beautiful JavaScript notifications with Web Notifications support.
Home Page: https://sciactive.com/pnotify/
License: Apache License 2.0
That would be great - thanks.
I haven't dug into the source yet. But there should be a documented option to not display the Redisplay menu at the top.
Notices don't position correctly in Firefox 3.6.
Good evening, I can put a button in the notification, to call a function? thank you
You have the rest, so why not just add the success styling. To get this to work i obviously did the custom class, but shipping it with the product would be nice. I also added opacity to the close icon.
Thanks for the great product!
/* Close icon has opacity unless hover*/
.ui-pnotify.custom .ui-pnotify-closer {
position: absolute;
right: 14px;
top: 8px;
opacity: 0.2;
}
.ui-pnotify.custom .ui-pnotify-closer:hover {
opacity: 0.5;
}
It's possible to align the notification in the center (top) of the page ?
thanks
I would like to integrate this with ajax chat. But I am not very familiar with java script can someone point in the right direction please.
Hi thx for nice and cool stuff. :)
is there any way to apply scroll option ? because I am using more than one notice per page and one notice contents are too big to fit.
couldn't find file 'pnotify'
(in /home/neilmarion/ROR/projects/ppm/app/assets/javascripts/application.js:20)
Can you please introduce a feature to display last n number of different notices, where n may b 1,2,3...20 as mentioned by user.
It would be nice to be able to specify a click handling callback for each notification (or a global one I suppose). The handler would be called any time the notification is clicked unless the user is clicking the sticker or close buttons.
This functionality could be used to perform the following actions:
Of course I'm not asking that those actions be built-in. Those are just a few ideas I came up with that would be possible with a click handler and would really be nice to be able to do.
Examples:
$.pnotify({
title: 'New message',
text: 'You have a new message from Joe',
click: function(){
window.location.href = "http://mysite.com/messages/messageFromJoeId";
}
});
$.pnotify({
title: 'New message',
text: 'You have a new message from Joe',
click: function(){
$(this).append('<div class="messageContents">Hey man, how\'s it going?</div>');
}
});
http://cdnjs.com/ add to free cdn repository
Add support for "Zurb Foundation 3".
Web: http://foundation.zurb.com/
GItHub: https://github.com/zurb/foundation
<button class="btn source" onclick="for (i=0; i!=10; i++) {$.pnotify({
addclass: 'stack-bottomright',
stack: {'dir1': 'up', 'dir2': 'left', 'firstpos1': 25, 'firstpos2': 25},
title: 'Regular Notice',
text: 'Check me out! I\'m a notice.'
});}">10 Notices</button>
If you notice in the examples page under "Really Different Stacks" the first time a bottom bar is rendered, it shows a bit to the right then it shifts to the center. You can see the behavior here: http://screencast.com/t/GuVsCadN4d
I close the notice in a onclick handler with:
notice.pnotify({pnotify_remove: true});
notice.pnotify_remove();
If I call alert or confirm in the onclick handler, the notice is never closed in IE10.
Any idea?
Here is a minimum code:
var tm = new Date().toString(),
nt = jQuery.pnotify({hide:false, history: false, title:'Alert',text:tm, type:'info'}).click(function(e){ e.preventDefault(); nt.pnotify({pnotify_remove:true}); nt.pnotify_remove(); alert('Act on warning');});
I use pnotify, Optimization is very important in my project, but i don't know use pnotify customize. i think it's very good to create a thing like bootstrap customization. for example i don't use from pnotify history, but i don't know witch parts of css and javascript must be remove or i use two simple type of notification but i don't now how i can remove extra notification type.
When using the Full Calendar ( http://arshaw.com/fullcalendar/ ) plugin and having a properly working and rendered calendar and then including the pines.js in your html markup, the calendar won't render anymore without showing any errors whatsoever in the console.
Hi, we are running jquery 1.4.2 in production (upgrading as I write this) and i was looking at using pnotify but for some reason there was no note!
Further investigation showed that 1.4.[0,1,3,4] all work with my simple test; but 1.4.2 doesn't.
I tested with chrome-v19 and firefox-v13 on osx-v10.6.8.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://pinesframework.org/pnotify/jquery.pnotify.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="http://pinesframework.org/pnotify/jquery.pnotify.default.css" />
</head>
<body>
<h2>This is Foo - the home of a sticky note.</h2>
<script>
$(function(){ $.pnotify({ pnotify_title: 'Sticky Notice', pnotify_text: 'I\'m a sticky notice.', pnotify_hide: false }); });
</script>
</body>
</html>
When we use e.g. custom stacks on iOS we see a totally different behavior and look and feel compared to desktop browsers.
Thanks.
I want to make something like this:
$.pnotify({
text: 'Message text:',
type: 'error',
css: {width: '100px', height: '50px'}
});
Is it possible to apply css styles by using approach above?
Pretty simple: Add an option to enable the adjustment of the position-animation-speed.
I already did that in my copy of pnotify:
pnotify.animate(animate, {duration: 500, queue: false});
pnotify.animate(animate, {duration: this.opts.position_animate_speed, queue: false});
This is not an issue really but I'd appreciate if this was left open to give someone the chance to suggest how pnotify might be used with rails messages.
Anyone out there using pnotify with rails flash that can suggest how to make it work?
Allow styling with Twitter's Boostrap. (http://twitter.github.com/bootstrap/)
An interesting option would be able to add notifications to the history without having to display them, so could keep the history if the page was reloaded.
Note: I am not good at English, I got some help from Google Translate. I am Brazilian
Similar to jGrowl plugin it would be nice to show a "close all" option below the notifications. The script was provided in the sample page for how to close all but having a built-in button appear would be nice.
It would be quite useful, if you could determin, wether a notice is visible or not at a certain state.
Problem is, when running
myNotice.pnotify_display();
when it is visible already, the animation is triggered again, which makes it look awefull.
Solution could look like this:
if(!myNotice.pnotify_isVisible()) {
myNotice.pnotify_display();
}
The javascript and css for topleft, bottomleft, bottomright, topbar, and bottombar should be part of the standard install files. It took me a while to figure out i needed to steal code from the source of the demo page in order to make them work.
Either add a confirmation function, or if there is anyway to handle the JS confirm function like the JS alert handling. In using pnotify as the standard for user user feedback platform on an app, it leaves out this crucial part of web form and UI behavior. We can handle it using native jquery UI or just JS, but having an integrated, consistent UX framework would be preferable.
Add internationalization support language in 'history-container'.
Add function to change the default settings.
Note:
This would help change the texts of internationalization
we are using both jquery ui and bootstrap for our project.
will it be possible to use pnotify with jquery-ui-bootstrap : http://addyosmani.github.io/jquery-ui-bootstrap/
On demos page
http://pinesframework.org/pnotify/
In "Advanced Demos" section => "Really Different Stacks" => "Bottom bar style. (Like New Microsoft Notification Bars.) Moves up, then right. Pushes to stack bottom."
Clicking any of Notice, Info, Success, Error buttons for first time notify appears not in the bottom middle, but to the right of the screen and quickly moves to the middle(expected position). Next time it appears in the middle as expected.
Title explains the meaning of this pseudo-issue
In trying to implement a bottom right/left stack it appears that the height is getting set to the full height of the page and not the height of the text. http://jsfiddle.net/drewr/YLmnW/
seems it can not be worked fine.
Master has had no activity in a year. I don't see any open issues getting responded to. ...Pnotify isn't under active development any more, is it =(
For instance when a notification appears set the hours like:
What do you thinks about that ?
Is there anyway to limit the number of notifications show at a time? I can't seem to figure out a way to do it, or if there is way, I am not able to find it.
Thank you!
I don't know what I am doing wrong, but I have a problem with ruban (the little thingy with "redisplay" buttons).
If I create a notif after the page is loaded, it works fine (appears collapsed, expand on mouseover).
However if the notif is created within
$(function() { /* create notif */ });
The ruban says expanded whatever I do.
Any idea?
TIA
greg
The tooltip example's functionality should be integrated into pnotify.
It always bounds to the window/document the sources included in, thus, there is no ability to fire the notices in the iframes.
I'd like to see the default option, where I can pass the window I want.
When pnotify.pnotify_remove() is called, it does not remove the pnotify object from jwindow.data('pnotify'), meaning that if $.pnotify_remove_all is called every 30 seconds, the pnotify.after_close / pnotify.before_close methods will be called for any notifications that have been displayed, even if they've been closed.
I have a pnotify notification informing the user that the page is loading (there's some AJAX stuff going on in the background). I remove the notification when everything is done using the pnotify_remove()
function.
However, I've noticed that if I'm hovering over the notification with my mouse, the notification will never get removed by pnotify_remove()
. I don't have any close buttons on this notification, so now the notification is stuck on the page and there is no way to remove it.
Shouldn't the pnotify_remove()
function remove the notification no matter what the user is doing?
Could we have a way to specify which notice we want to close (perhaps via id or data-)? This is kind of an enhancement to our ability to close all current notices.
For instance: if I created a sticky notice because I noticed something wasn't loaded/working properly but then also run a check a few seconds later and find that it has been loaded I'd like to be able to close my earlier notice without having to close every single one.
In isolated and completely locked down environments I can see where simply calling the function to close all notices would suffice, but in complex apps other notices (or multiple sticky failure notices) might need to stay.
In your examples, in the section of "Really Different Stacks", having stack: stack_bar_bottom has a bug: when you fire like 4-5 notes, delaying between them like 2 seconds, the first one just fades out, but second and further, they slide down to the position of the just hidden note. I expect that second note also slides down to the first position. Currently all notes slide to the second position only, not to the first one.
I don't know if I'm clear enough, hope you get it.
Hi,
This would be great to be able to close the notification by clicking anywhere in the notification element (".ui-pnotify").
This feature is easy to add, and is especially useful for mobile devices with limited "click" area accuracy.
Pending this, is there a function to programmatically close the notification? This way, we would be able to add a global "click" hook on ".ui-pnotify" in order to close the notif.
Thank you for your interest in this suggestion,
Could not find a simple way to move the history div bottom right as I have my notification there.
Any way to add this feature ?
Hi,
just tried to integrate pnotify via bower (bower install sciactive/pnotify --save
) into a project. Thereby the latest tag is fetched, which does not contain the stack styles. This is a little bit confusing, and won't work properly.
Thanks & Regards
100hz
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.