New jQuery Plugin: Linenumbers

I’ve made a new jQuery plugin. It will take any old textarea and give it proper line numbers (as in a line number every actual line, just just when it wraps to the next line). You can check it out in action here: http://fatfolderdesign.com/ex/jQueryLinenNmbersPlugin/example.html

How it works

Without going into to much boring detail it works be taking the content from one text area and breaking it up at every line break. It then converts whatever that line is into a spaces and trims a bit of the front, replacing it with the appropriate line number. It then adds this new, space laden content and places it into another, disabled, textarea. Finally the two text areas are overlapped so that you only see the numbers from the additional one. It also sync the scrolling so when you scroll the text the lines numbers move right along with it. and updated as you type.

This is a completely client side solution, and it’s only a tad over 1k (most of which is front crating the second text area). Great for use in situations where the content my change quickly and dynamically and where a full blown editor sin’t going to improve anything.

Where to get it.

You can get the jQuery linenumbers plugin on github or directly download the plugin here. Feel free to fork it or submit bugs there. You can also submit bugs. If you have any questions I’ll try and answer them. This is the initial release so there are improvements that could be made and probably bugs that should be fixed.

Leave a Reply

Your email address will not be published. Required fields are marked *