Capbar.js

Type something below

Want more?

Download

Dependencies :

jquery

1. Markup

Add capbar to your page

<link rel="stylesheet" href="capbar.css">
<script src="capbar.js"></script>
			

2. Javascript

Running this code will start capbar. Run this after the DOM is loaded, possibly after the ready event.

var capbar = new Capbar();
capbar.start();
			

To unbind all event listners and cleanly stop capbar, use the stop() method

capbar.stop();
			

3. Linking input tags

Add data-target="capbar" and data-maxchars=(max characters) to your input field. See the code below.

<input type="text" data-target="capbar" data-maxchars="8">
			

4. Css

The default css should be adequate. However, you can customize the bar by modifying the .bar class

Parameters

var capbar = new Capbar({
	element  : '.bar'    // Default : Checks if .bar class is present. If not then it will create and append an element in body.
	selector : '.capbar' // Default : uses data-target="capbar'.
	top      : true      // Default : false, set it to true to display capbar at the top of the screen.
});
			

Credits & license

Created by shash7. Licensed under MIT license

Patches welcome.