background preloader

Notification & Help

Facebook Twitter

jQuery PowerTip. PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips.

jQuery PowerTip

It is being actively developed and maintained, and provides a very fluid user experience. Download v1.2.0Zip file with examples, CSS, and script. Here are some basic examples of PowerTip in actions. You can also fiddle with PowerTip on the official JSFiddle demo. Placement examples Mouse follow example The PowerTip for this box will follow the mouse. Mouse on to popup example The PowerTip for this box will appear on the right and you will be able to interact with its content.

Unique Features Checks for hover intent Testing for hover intent makes it so that tooltips don’t open the moment your mouse happens to cross an element with a tooltip. Features Requirements. Basics of using the tooltip. Here we have four img tags and their title attribute working as the tooltip.

Basics of using the tooltip

This kind of simple syntax will also show the browser's standard tooltips even though JavaScript is not enabled. This whole setup can be enabled with one JavaScript one-liner. standalone demo HTML coding You need two things: the elements that show the tooltips when the cursor is placed on top of them, these elements are called triggers. 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. jQuery.twinkle - Animation au click. jQuery UI Notification Widget by Eric Hynds. Website Tour with jQuery. This is a demo of how to create a website tour or walkthrough with jQuery.

Website Tour with jQuery

If you start the tour, you will see tooltips in each step, explaining a certain part of the website. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. PopBox. Fancybox - Fancy jQuery lightbox alternative.

Noty - a jquery notification plugin. Chardin.js. Facebox 1.3. What is it? Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves. Why another lightbox? Because we wanted, nay, needed a Facebook-style lightbox on FamSpam. Load Dependencies Make sure jQuery is loaded before Facebox. Attach It onLoad While calling facebox() on any anchor tag will do the trick, it's easier to give your Faceboxy links a rel="facebox" and hit them all onLoad. jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() }) Extra Classes You can give the facebox container an extra class (to fine-tune the display of reusable remote pages) with the facebox[.class] rel syntax. Maybe your Terms and Conditions can be loaded standalone or via Facebox. View an an example which makes the remote.html page bigger and bolder using css.

The Code. jConfirmAction Demo. Tooltip : grumble.js. Originally written for Huddle.com, grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning.

Tooltip : grumble.js

PageSlide: slides a webpage over to reveal an additional interaction pane. Advertisement a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin Download PageSlide Now If you've ever used the mobile version of Facebook, or Path,then you've probably seen something akin to PageSlide in action.

PageSlide: slides a webpage over to reveal an additional interaction pane

Clicking on a button or link slides the page over to reveal a hidden pane,one that usually contains secondary navigation, a form, or additional information. There are several ways to use PageSlide, some of which are shown below.Additionally, there is a responsive demo which shows how PageSlide can be used as a mobile solution. Slide to the right, and load content from a secondary page Slide to the left, and display hidden content from this page in a modal pane Modal This slide uses "modal" option set to "true". Where can I get it? If you are interested in learning more about PageSlide, it's recommended that you view the project on GitHub. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built.