background preloader

Tooltips & Notification

Facebook Twitter

Smoke.js. A framework-agnostic styled alert system for javascript. Lightweight, flexible, css3 animation, blah blah blah easy to use something clever needs to go here. Best of all, it's really easy to use. WOW! Look at these examples: You can implement these the same way you'd use the js alert()...just put "smoke. " in front of it. The confirm() replacement, however, needs to be used just a little differently: smoke.confirm('You are about to destroy everything. Prompt(), similarly: smoke.prompt('what\'s my name? ' And if you want the smoke.alert() to behave exactly like a native alert(), you can have subsequent actions happen in a callback like so: smoke.alert('look at that alert, man Want to do custom button labels? Need a default value for a prompt?

Maybe you want to specify different styles for a specific alert. Additionally, it's super easy to change the look of your dialogs. If you happen to make a theme you'd want to share with everyone, go ahead and add a pull request on github . Noty - a jquery notification plugin. An Advanced jQuery Tooltip Plugin – qTip2. Tooltips are tiny user interface elements which are very useful in displaying information "on request" without breaking the attention/focus.

An Advanced jQuery Tooltip Plugin – qTip2

WRD had previously featured qTip and it now has a new version, qTip2, with lots of improvements and new, exciting features. The plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag 'n' dropped and animated items) or mouse. Tooltips can be styled completely, there is an optional Themeroller support and they can even be displayed as modal windows.

It has built-in Ajax integration and can load any remote data. qTip2's website has lots of creative demos including 3rd part service and various popular plugin integrations. jQuery BlockUI Plugin (v2) The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1].

jQuery BlockUI Plugin (v2)

When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction. Usage is very simple; to block user activity for the page: $.blockUI(); Blocking with a custom message: Blocking with custom style: To unblock the page: $.unblockUI(); If you want to use the default settings and have the UI blocked for all ajax requests, it's as easy as this: $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); This page demonstrates how to block selected elements on the page rather than the entire page. Test link - click me! Lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo Test link - click me! Sticky - An unbelievably simple notification system for jQuery. July 19, 2011 Let's face it, your users need sweet little notifications to keep them all warm and fuzzy inside.

Sticky - An unbelievably simple notification system for jQuery

Sticky allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders. Demo Let's start with some basic messages. . $.sticky('<b>Can you see me? Returned: As you can see above, a bit of JSON will be returned with some potentially pertinent information. Software engineer. $('#ThrivingKings').sticky(); We can also use Sticky to display data we've grabbed via AJAX. Fetch the news Download Sticky is just a little guy. Download fullDownload minifiedGitHub Implementing Getting sticky up and running is extremely easy.

Don't forget the close.png image file! Now, you're ready to get busy sending Sticky notes! <script> $(document).ready(function() { $.sticky('The page has loaded! ') Or attach it to the object your choice.