jquery.peekABar: Notification Bar Plugin
This jQuery plugin for a notification bar has a lot of customization options. It all starts with a line of HTML as bar text and then the options flow from there.
Here’s a quick look at everything you can do with jquery.peekABar:
- Auto hide and show
- Delay hide
- Change padding and color specifications
- Add different types of animation for how the bar shows on the screen
- Add custom CSS
- Change the opacity of the tool
- Change notification bar positioning on the screen
- Close and open with a click
You also have control over event and instance methods with this plugin.
Even once installed, the code is easy to follow for making your custom changes. It’s a tool that can be used for almost any website type with a fairly small degree of difficulty. You get a lot of bang with this little plugin.
- Spotlight
Scrolling Progress: Indicate the Scroll Progress of Content
The Scrolling Progress plugin indicates scroll progress of a content section, as you would expect from the name.
The plugin is designed using a two-part structure with a content area and progress bars. The animation changes based on your progression through a webpage.
It works because each section of the content has a unique identifier, which helps calculate the percentage. Each bar then has a link to smooth scroll to that section.
Progress bars are set with a fixed positioned as you scroll down the page. The progress bars in this plugin have a background color and a span element with its width animated to simulate the progress bar.
There are not a lot of preset options here, but you can alter the CSS as you see fit.
There’s a bit of code to process when using this plugin but once you get it installed, the result is quite nifty and has potential for use for a number of different types of websites. (All of the code is included in the demo so you can take a look to see if this is something you feel comfortable with before installation.)
jBox: Manage the Popup Windows
This nifty little plugin helps manage your popup windows, including tool tips, notices and more. jBox is packed with powerful options and a few surprises for anyone that might want to use an online notification.
There are eight tool tip options — from basic tool tips to no-close options to color and style choices to click and scroll features.
There are four modal window tools — basic, draggable, ajax and submit. Plus, four notice tools with positioning at the top or bottom of the screen and visual options such as color.
The final style for jBox includes to image gallery formats.
This plugin is ready to go and easy to use right from the install. It’s optimized for retina screens, will work in any environment including IE 8+ and is lightweight, at only 19kb.
The only thing left to do is get started with jBox and all the customizations you can make for notification and popup windows for your website design.
- Vanilla
TitleNotifier: Create Notifications in the Webpage Title
TitleNotifier is a lightweight (less than 3kb), dependency-free Javascript library to dynamically show the number of unread notifications in your webpage title.
It’s a super-cool little tool that adds that special something to your website framework. You can actually see the page title change as notifications are added or read.
This plugin is fairly simple so it does not come with a lot of options, but you can set a maximum number of notifications to display. (While you can have more than 100, the maximum number that will show in the title bar is 99+, much like many app icon notifications.)
It only takes one line of code to add the plugin to your website and a couple of modifications to set the number of notifications, add notifications, subtract notifications, reset notifications or call the current number of active notifications.
You have to see this plugin in action to get a good feel for how useful it might be for your website design. It has a large number of practical applications for many different site types.
TourTip: Interactive Visual Guide
TourTip is an interactive visual guide to elements on web pages.
Instead of cluttering your interface with static help message, or explanatory text, add a page guide and let users learn about new features and functions.
TourTip is a simple library for creating guided tours through your application. It’s better suited to complex, single-page applications than websites. Our main requirement was the ability to control the interface for each step. For example, a step might need count seconds before moving to the next step, or wait for the user to complete a task. TourTip gives you the ability to manage these parameters all at once or for each step separately.
TourTip gives you everything you need to call out new features. It is extremely flexible and lets you take control of how people interact with your tour. It is designed to be cross-browser compatible with modern browsers and even uses some fancy CSS to avoid images.
You can also add external content as well as images to the guides to make them more comprehensive.
The plugin is pretty powerful and has a lot of options which gives you the power to build a very cool tour. Use TourTip for websites, products, applications, landing pages or something else.
Goal Progress
Animated progress bar to show how close you are to reaching your goal.
- Spotlight
Ladda
Buttons with built-in loading indicators, bridging the gap between action and feedback.
