sciactive / pnotify Goto Github PK

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:

• Close the notification - Easier method to dismiss a notification than searching for the tiny button.
• Stick/Unstick the notification - Easier method than searching for the button.
• Take user to resource mentioned in the notification (either another URL or a hashtag for something on the current page).
• Display more detailed content.
• Maximize the notification.
• Overlay the rest of the page with a blurring layer so that the notification is highlighted (i.e. like a jQuery modal dialog).
• Some combination of the above.

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>');
    }
});

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.

When we use e.g. custom stacks on iOS we see a totally different behavior and look and feel compared to desktop browsers.

Thanks.

Pretty simple: Add an option to enable the adjustment of the position-animation-speed.

I already did that in my copy of pnotify:

1. Extend $.pnotify.defaults with position_animate_speed: 500
2. Line 480: Replace
   pnotify.animate(animate, {duration: 500, queue: false});
   with
   pnotify.animate(animate, {duration: this.opts.position_animate_speed, queue: false});

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.

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.

Notices don't position correctly in Firefox 3.6.

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.

Benchmarking

                <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>

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/

Add function to change the default settings.

Note:
This would help change the texts of internationalization

For instance when a notification appears set the hours like:

• 12:52
• 12h52 25s
• 15 seconds ago (when you hover this; it's display the original hour like 12:25:20)

What do you thinks about that ?

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

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.

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.

Add internationalization support language in 'history-container'.

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.

f651534

Thanks & Regards
100hz

I haven't dug into the source yet. But there should be a documented option to not display the Redisplay menu at the top.

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?

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.

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.

That would be great - thanks.

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 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();
}

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.

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.

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?

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!

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 =(

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

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.

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

It's possible to align the notification in the center (top) of the page ?
thanks

Allow styling with Twitter's Boostrap. (http://twitter.github.com/bootstrap/)

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');});

The tooltip example's functionality should be integrated into pnotify.

Title explains the meaning of this pseudo-issue

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 ?

couldn't find file 'pnotify'
(in /home/neilmarion/ROR/projects/ppm/app/assets/javascripts/application.js:20)

Hello,

If you have a very long message (p.e., an url) that doesn't contain a space, the text goes outside the box.

Is it possible to create some kind of a layer that cuts the extra text? It would be better looking than current approach.

Thanks

Good evening, I can put a button in the notification, to call a function? thank you

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,

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.

Add support for "Zurb Foundation 3".
Web: http://foundation.zurb.com/
GItHub: https://github.com/zurb/foundation

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?

http://cdnjs.com/ add to free cdn repository

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.

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>

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.