Jiris

Have you ever noticed that some apps set a different style to text excess in a form-like element? E.g: like Twitter, when the well-known 140 are exceeded, the background of the over-140 text is red. This inmature plugin intends to provide that functionality. Check out online working demo

Screenshot

Quick start

Libraries required:

• jQuery ~> 1.9.*

Code

.ok {

}

.excess {
    background-color: #f9f2f4;
    color: #c7254e;
}

var config = {
   'segments': [
       {'len': 140, 'className': 'ok', 'tag': 'span'},
       {'len': 200, 'className': 'excess', 'tag': 'em'}
   ]
};

    $('#sample').jiris(config);

Additional/Default configuration

$.fn.jiris.debugMode = false;
$.fn.jiris.defaultEditableClass = "editable-area";
$.fn.jiris.namespace = "jiris";
$.fn.jiris.defaults = {
    'maxlength': 0,
    'min-width': '100%',
    'min-height': "100px",
    'height': "auto",
    'resize': "both",
    'segments': [
        {'len': 11,  'className': $.fn.jiris.namespace + ' jiris-default-1', 'tag': 'span'},
        {'len': 13,  'className': $.fn.jiris.namespace + ' jiris-default-2', 'tag': 'span'},
        {'len': 17,  'className': $.fn.jiris.namespace + ' jiris-default-3', 'tag': 'span'}
    ]
};

TODO

• Implement onSegmentChanged method. Event fired whenever the number of styled elements changes.
• Evolve len property to something like {'from': 20, 'len': 7} to allow styling based in ranges.

Contributing

... Have you got here? Be my guest.