"inputLengthLabel plugin"
Bootstrap 3.1.0 Snippet by eclipxe13

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form role="form">
<fieldset>
<div class="form-group">
<label for="exampleInputEmail1">Previous input</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Comment</label>
<textarea class="form-control" id="comment" maxlength="200" rows="5"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Next input</label>
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.inputlengthlabel-container {
position: relative;
}
.inputlengthlabel-container .inputlengthlabel-label {
position: absolute;
bottom: 0;
left: 0;
padding: 0.5em 1em;
border-radius: 0.25em;
font-weight: bold;
font-size: 80%;
color: #fff;
}
.inputlengthlabel-container .inputlengthlabel-info {
background-color: #5bc0de;
}
.inputlengthlabel-container .inputlengthlabel-warn {
background-color: #f0Ad4e;
}
.inputlengthlabel-container .inputlengthlabel-danger {
background-color: #d9534f;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// delayed execution
$(function() {
$('#comment').inputLengthLabel();
});
// module inputLengthLabel
// Carlos C Soto <eclipxe13@gmail.com>
(function ($) {
"use strict";
// module definition
$.fn.inputLengthLabel = function (options) {
// setup options
if (options === undefined || 'Object' !== typeof options) {
options = $.fn.inputLengthLabel.defaults;
}
if (this.attr('maxlength')) {
options.maxlength = this.attr('maxlength');
}
if (this.attr('data-lengthlabel-threshold')) {
options.threshold = this.attr('data-lengthlabel-threshold');
}
options = $.extend({}, $.fn.inputLengthLabel.defaults, options);
options.classcontainer = options.classprefix + 'container';
options.classlabel = options.classprefix + 'label';
options.classinfo = options.classprefix + 'info';
options.classwarn = options.classprefix + 'warn';
options.classdanger = options.classprefix + 'danger';
// create container
var container, element, fnkeypress;
container = $(document.createElement('div')).addClass(options.classcontainer).insertBefore(this);
element = $(document.createElement('span')).addClass(options.classlabel).appendTo(container);
this.appendTo(container);
// define trigger function
fnkeypress = function () {
var ml, tp, ts, cl;
ml = this.attr('maxlength');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rotating CSS Card
jQuery Searchable Plugin

Questions / Comments: