17 ms·
Alertify.js
- digitalpacman 14y agoThis is pretty bad ass.
- dan_b 14y agoReally nice smooth animation. It would be nice if the alerts appeared in the centre of the screen though... I find that jerking my eyes up to the top of the screen and then back down to what I was looking at quite intrusive.
- JoshTriplett 14y agoIdeally you could specify an HTML element to place the notification near, and then pass whatever element the user activated to trigger the notification. Or you could specify target coordinates, and compute the desired location yourself. Both of those ought to use optional parameters, though; defaulting to center seems reasonable.
- lowboy 14y agoIf you look on the demo page (http://fabien-d.github.com/alertify.js/ http://fabien-d.github.com/alertify.js/), all of the alerts get injected into #alertifylogs.alertify-logs which is positioned by css and therefore should be easy to overwrite: .alertify-logs { position: fixed; z-index: 5000; bottom: 10px; right: 10px; width: 300px; }
- nubela 14y agoNo examples?
- richardlblair 14y agohttp://fabien-d.github.com/alertify.js/ http://fabien-d.github.com/alertify.js/ Edit: I had a good time click on the buttons and filling the page with notifications. The animation is solid, and it's super clean.
- googletron 14y agoThey are linked there on the repository.
- JimmaDaRustla 14y ago"No examples on a github repo page?" Classic. Good one.
- bedspax 14y agohttp://fabien-d.github.com/alertify.js/ http://fabien-d.github.com/alertify.js/
- deleted 14y ago[deleted]
- danso 14y agoPretty slick, animation-wise. If I could make one design-layman suggestion...the thick, black border belies the unobtrusiveness of the plugin. Maybe a lighter, thinner border would be a better fit for the use-case of this plugin?
- JoshTriplett 14y agoMaking the border any less obtrusive might make the notification blend into the page too much.
- SonicSoul 14y agolooks like it's using class="alertify alertify-show alertify-prompt" you should be able to override any of these to your liking
- danso 14y agoYeah, I meant for demo, first-impression purposes. I know it's just a easily-changed visual tic once a developer decides to implement it...but might as well entice as many people as people as possible.
- ChrisNorstrom 14y agoYou can go into the css and for the .alertify {} selector Remove the border{...} values and change box shadow to: box-shadow {box-shadow: 0 0px 60px 30px #666;}
- alpb 14y agoStacking up of multiple alerts being triggered is not handled properly. I think it should show latest posted alert on the top. Overall, good job!
- nantes 14y agoUnless it's been updated since you posted, it is. The newest alerts appear at the top of the stack for me.
- corwinstephen 14y agoI was literally talking to someone yesterday about how I couldn't believe a plugin like this didn't exist yet. Long overdue. Well done!
- jarcoal 14y agoLooks great on my iPhone. Thanks for the nice lib!
- lancefisher 14y agoHere's the examples link: http://fabien-d.github.com/alertify.js/ http://fabien-d.github.com/alertify.js/ I love that someone already made a pull request to update the readme with it.
- abredow 14y agoThis looks beautiful. But I'm curious, do users no longer expect/like their platform's native dialogs for these things?
- indiecore 14y agoThe native alert is very hard to customize and extremely bare boned.
- richardlblair 14y agoNot to mention that the second I see a native alert my heart rate increases 10 fold.
- bjhoops1 14y agoOnly thing worse are those "Are you sure you want to leave this page?" modals. Those cause me to go into fits of ctrl+w- smashing rage!!!
- electic 14y agoHALP! Does anyone know of a jQuery plugin that has notifications like they do on OSX. For example, when you raise the volume or mute you see that rounded transparent square? Is there something like that for the web?
- flyosity 14y agoIt's a DIV with a border-radius and a semi-transparent black background. It's just CSS, why use a jQuery plugin? Why not just quickly build it yourself?
- electic 14y agoBecause it is an alert. I need it to fade in and then disappear. I mean I guess I could build it but was wondering if there is a complete library out there to handle the alerting and all the options a modern notification library has.
- lowboy 14y agoI found this project that would fit the bill: http://fabien-d.github.com/alertify.js/ http://fabien-d.github.com/alertify.js/ See "Customizable Log Messages".
- blauwbilgorgel 14y agoI think http://stanlemon.net/pages/jgrowl http://stanlemon.net/pages/jgrowl is very close. jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works. It is pretty old by now (4 years), but a benefit of that is that it supports older browsers too. And this plug-in is also close. Build on top of jQuery UI, so small footprint, but you'd need that library. http://www.erichynds.com/examples/jquery-notify/ http://www.erichynds.com/examples/jquery-notify/ This is a growl/ubuntu-like notification system built on top of jQuery UI.
- n1ghtfury 14y agoi like it, thanks for making!
- leoplct 14y agoVery useful! Thanks! ;)
- gbadman 14y agoGreat stuff, I think this will take over from jQuery.noty for me.
- SonicSoul 14y agogreat stuff! i wish prompt dialog auto focused on the textbox. currently i have to click it first to type in. (on windows chrome)
- mikegirouard 14y agoAgreed. Looks like someone reported an issue already: https://github.com/fabien-d/alertify.js/issues/3 https://github.com/fabien-d/alertify.js/issues/3
- JoeCortopassi 14y agoVery cool library! The one thing all of these type of things lack (e.g. this, dojo.dialog()) is that they are non-blocking to the execution thread, unlike alert()/confirm()/prompt(). I know it's not their fault, javascript doesn't allow this natively, but i feel like that would be immensely useful for general user input, form validation and the like. Yes, I am aware that it can be done currently through workarounds, I'm just saying that allowing certain native objects to be blocking upon further user input, would be immensely useful and save code readability EDIT: Care to explain why I'm getting downvoted? Said nothing offensive, and I'm clearly on-topic.
- nailer 14y agoAre you saying it would be good for them to block? Why? When they execute, they run a callback with the input provided. Inside that callback, do whatever you need to do that requires some input.
- JoeCortopassi 14y agoConfirm and prompt are typically used to indicate a decision by the user. Natively, these functions stop javascript execution to wait for the users input, so that it knows what to do, but do not allow for customization. Non-native libraries do not have this ability to prompt the user for input, then wait for their response, before continuing the execution of that script. Callbacks are one way to circumvent this issue, but introduce new issues with scope and readability. All I'm trying to say is that allowing custom defined objects to have the ability to block execution can be very handy in certain instances. I by no means was criticizing the alertify.js library
- sophacles 14y agoSometimes it's just easier to have linear code with some blocking than to create an entire state machine. Yes there are libraries that get close to this. No, it's still not the same.
- nailer 14y agoYou can have linear code without blocking - it's exceptionally common in the node world. async.waterfall([ function getInput(){...}, function checkInput(){...}, function submitInput(){...}, ], function finally(){}) Each of the functions takes a callback, and returns err (if any) and output. If a callback returns err, it jumps to finally where you say what failed. This is odd when you first get started with async, but it's really easy to visualize. Think of a production line, with a number of different workers doing different stuff. If one of them gets a dud part, it throws it away.
- nailer 14y agoSince nobody seems to have noticed yet: bonus points for using native methods and not using JQuery.
- pacomerh 14y agoIndeed, I like the fact that it doesn't have dependencies. And is using html5 tags which is useful too.
- eddiegroves 14y agoDegrades perfectly down to IE7, great example on how to do this - the design and functionality become less and less polished yet it still does the core tasks accurately.
- voltagex_ 14y agoVery slick. The only thing I'd add would be Chrome desktop notifications (optional) for plain alerts.
- bjhoops1 14y agoVery nice! I've used jGrowl for this in the past, but this seems much improved, more feature-rich and with sensible default styles. Alertify FTW!
- welder 14y agoGreat work, but one suggestion: Make the alert notification go away when ESC is pressed, like the Confirmation and Prompt notifications.
- FuzzyDunlop 14y agoI'd also suggest that clicking anywhere on the body should dismiss it, and behave like cancelling.
- instakill 14y agoSubmit a pull request then.
- Reedx 14y agoGreat work! I've been using apprise (http://thrivingkings.com/read/Apprise-The-attractive-alert-alternative-for-jQuery http://thrivingkings.com/read/Apprise-The-attractive-alert-a...), which is pretty good, but going to switch to this. I really like how Alertify has the growl-like log alerts along with it.
- hayksaakian 14y agoworks surprisingly great on mobile ----- on a galaxy nexus (cm10) (animations are bit laggy, but thats fine)
- sgtnotorious 14y agoLooks awesome! Smooth transitions!
- umutm 14y agoI like that it doesn't require any JS frameworks and still being lightweight.
- Kroem3r 14y agoVery nice. Thanks for sharing. I think that I'd like to see the ability to <tab> off the dialog onto the underlying document restricted. The concept of 'semi-modal' is pervasive but undefined :)
- tlrobinson 14y agoIt's rather annoying it's modal but leaves most of the page visible and unresponsive to clicks. Maybe dim the background slightly?
- duncans 14y agoOne concern is the ordering of buttons. Windows users will be used to OK/Cancel whereas on OS X, etc Cancel/OK is the norm. I wonder if this is something this library should handle?
- X-Istence 14y agoIn the "prompt dialog" the buttons don't get highlighted when I tab over to them ... so instead my browsers buttons get highlighted, and I end up hitting back instead of Ok or Cancel...
- nXqd 14y agoVery nice work, I will look deep into it today :D
- everlearner 14y agoCool library, i'll deep into it today :)
- fox91 14y agoI love it but I actually don't understand why you decided to put two completely separated features in a single library: the alert/confirm/prompt dialogs and the log/success/error messages. I think that if you'd split this two things into two different libraries it would be better (e.g.: if i want only dialogs i'd prefer to include just them)
- honbu 14y agoSweet, thanks for Sharing. Another lib to add to the list. Not sure how it compares to noty, which has many options.