From 0f3ba3233773642bf31d8e7e2de96ab23e3fd4f8 Mon Sep 17 00:00:00 2001 From: drakonoved Date: Sun, 17 Sep 2017 05:59:40 +0300 Subject: [PATCH] Bug fixing with small updates --- .gitattributes | 2 ++ .gitignore | 2 ++ example.html => index.html | 31 +++++++++++++++---------------- jquery-linenumbers.js | 12 ++++++++---- jquery-linenumbers.min.js | 4 ++-- readme.md | 16 +++++++++++++++- 6 files changed, 44 insertions(+), 23 deletions(-) create mode 100644 .gitattributes create mode 100644 .gitignore rename example.html => index.html (83%) diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..791fb7e --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +* linguist-vendored +*.js linguist-vendored=false \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..29b636a --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +*.iml \ No newline at end of file diff --git a/example.html b/index.html similarity index 83% rename from example.html rename to index.html index 2558e73..1a138a3 100644 --- a/example.html +++ b/index.html @@ -20,19 +20,19 @@ } h1{ font: bold 2em/1em "Optima", serif; - margin:0px; - padding:0px; + margin:0; + padding:0; text-align: center; padding-bottom: 25px; - text-shadow: 0px -1px 1px white, 0px 1px 0px #999; + text-shadow: 0 -1px 1px white, 0 1px 0 #999; } p{ padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; - margin: 0px; - text-shadow: 0px -1px 1px white, 0px 1px 0px #999; + margin: 0; + text-shadow: 0 -1px 1px white, 0 1px 0 #999; } b{ font-weight: 500; @@ -67,16 +67,16 @@ text-decoration: underline; } h2{ - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; padding-top: 30px; } h3{ font-size: .6em; text-align: center; font-weight: 200; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } @@ -97,23 +97,22 @@

jQuery linenumbers plugin

But havent you ever wanted to have a textarea with fancy line numbers? Problem? Solved.

By simply doing this...

- $('document').ready(function(){ -     $('#line_numbers').linenumbers({col_width:'75px'}); -}) + <script src="jquery-linenumbers.min.js"></script>

neat huh. Line numbers make it easy to track the size of a text area, and look right at home if your dealing with code. It wraps lines intelligently, just because the textarea wraps doesn't mean it's actually a new line. How wonderful it recognizes that.

-

Setup is a snap, at it's simplest form all you have to do is call the linenumbers function like this...

- .linenumbers()

If you want to get fancy there are some additional options you can pass...

  1. col_width: Default: 25px The width of the numbers column. Default should be big enough for 4 columns on a text area with no styles applied. This will need to be modified for the number of digits you choose, and the textarea styles.
  2. start: Default: 1 The number at which line numbering starts.
  3. digits: Default 4 The number of digits the line numbers should max out at. This si used for calculating leading space, and does not include the colon.
+

For example:

+ $('textarea').linenumbers({'20px', 1, 1});

You'll need to give your text area a set width, or the two line numbers won't line up right with the text, this has been tested as a px value, but percents should be ok in any format as long as the col_width is the same. Other than that it should work just fine. Internet Explorer has not been fully tested (due to the lack of a machine that can run it) but should work.

-

Download

-

version 1.0.0 — May 27, 2012 — 4.80kb

+

Download

+

version 1.0.2 — Sep 17, 2017 — 4.80kb

Version History

diff --git a/jquery-linenumbers.js b/jquery-linenumbers.js index 5de8c3b..4c43117 100644 --- a/jquery-linenumbers.js +++ b/jquery-linenumbers.js @@ -6,12 +6,15 @@ start: 1, digits: 4. },in_opts); + // Remove existing div and the textarea from previous run + $("[data-name='linenumbers']").remove(); + // Function run return this.each(function(){ // Get some numbers sorted out for the CSS changes var new_textarea_width = (parseInt($(this).css('width'))-parseInt(opt.col_width))+'px'; // Create the div and the new textarea and style it - $(this).before('
'); - $(this).after('
'); + $(this).before('
'); + $(this).after('
'); // Edit the existing textarea's styles $(this).css({'font-family':'monospace','width':new_textarea_width,'float':'right'}); // Define a simple variable for the line-numbers box @@ -44,7 +47,7 @@ $(lnbox).val(line_number_output); // Change scroll position as they type, makes sure they stay in sync $(lnbox).scrollTop($(this).scrollTop()); - }) + }); // Lock scrolling together, for mouse-wheel scrolling $(this).scroll(function(){ $(lnbox).scrollTop($(this).scrollTop()); @@ -53,4 +56,5 @@ $(this).trigger('keyup'); }); }; -})(jQuery); \ No newline at end of file +})(jQuery); +$('textarea').linenumbers(); \ No newline at end of file diff --git a/jquery-linenumbers.min.js b/jquery-linenumbers.min.js index 389eb3d..1392199 100644 --- a/jquery-linenumbers.min.js +++ b/jquery-linenumbers.min.js @@ -1,2 +1,2 @@ -/* jquery linenumbers v1.0.0 - 05/27/2012 */ -(function($){$.fn.linenumbers=function(in_opts){var opt=$.extend({col_width:'25px',start:1,digits:4.},in_opts);return this.each(function(){var new_textarea_width=(parseInt($(this).css('width'))-parseInt(opt.col_width))+'px';$(this).before('
');$(this).after('
');$(this).css({'font-family':'monospace','width':new_textarea_width,'float':'right'});var lnbox=$(this).parent().find('textarea[disabled="disabled"]');$(this).bind('blur focus change keyup keydown',function(){var lines="\n"+$(this).val();lines=lines.match(/[^\n]*\n[^\n]*/gi);var line_number_output='';var max_spacers='';var spacers='';for(i=0;i'); $(this).after('
'); $(this).css({'font-family':'monospace','width':new_textarea_width,'float':'right'}); var lnbox = $(this).parent().find('textarea[disabled="disabled"]'); $(this).bind('blur focus change keyup keydown',function(){ var lines = "\n"+$(this).val(); lines = lines.match(/[^\n]*\n[^\n]*/gi); var line_number_output=''; var max_spacers = ''; var spacers = ''; for(i=0;i + + +``` Simple call the linenumbers function an a text area element like so: $('textarea').linenumbers(); Options can be passed via a object. @@ -15,10 +22,17 @@ Plugin Options 2. start (Default: 1) The starting line number 3. digits (Default: 4) The number of digits the line numbers should max out at, this is used for lead space calculating and does _not_ include the colon. +To change default options run + +```javascript + $('textarea').linenumbers({'20px', 1, 1}); +``` + License ------- This plugin has been realsed under the GNU General Public License v3.0. Version History --------------- ++ 1.0.2 • Sep 17th 2017 - _Bug fixing._ + 1.0.0 • May 27th 2012 - _Initial release._ \ No newline at end of file