Paul K Paul K - 2 months ago 19
HTML Question

show a label next to each line in textarea

What I want to do is to put labels next to each line in a textarea, I have to loop the labels each 5 lines.

Im trying to user jQuery numberedTextarea Plugin and instead of showing line numbers I want to show the labels.
I'm trying to play with this function and insert a switch inside it.

function renderLineNumbers(element, settings) {
element = $(element);

var linesDiv = element.parent().find('.numberedtextarea-line-numbers');
var count = element.val().split("\n").length;
var paddingBottom = parseFloat(element.css('padding-bottom'));

linesDiv.find('.numberedtextarea-number').remove();

for(i = 1; i<=count; i++; x++) {
var line = $('<div class="numberedtextarea-number numberedtextarea-number-' + i + '">' + i + '</div>').appendTo(linesDiv);

if(i === count) {
line.css('margin-bottom', paddingBottom + 'px');
}
}
}


Any idea?

PS Sorry for my poor english

Answer

1.Tweak the renderLineNumbers - function:

 function renderLineNumbers(element, settings) {
    element = $(element);

    var linesDiv = element.parent().find('.numberedtextarea-line-numbers');
    var count = element.val().split("\n").length;
    var paddingBottom = parseFloat(element.css('padding-bottom'));
    var j = 0;

    linesDiv.find('.numberedtextarea-number').remove();

    for (i = 1; i <= count; i++) {
      if (settings.labels && j == settings.labels.length) {
        j = 0;
      }
      var lineLabel = settings.labels ? settings.labels[j] : i;
      var line = $('<div class="numberedtextarea-number numberedtextarea-number-' + i + '">' + lineLabel + '</div>').appendTo(linesDiv);
      j++;

      if (i === count) {
        line.css('margin-bottom', paddingBottom + 'px');
      }
    }
  }

2.Define an array with your lables, set this as an additional option when initializing the plugin

var labels = ['line1', 'line2', 'line3', 'line4'];
$('textarea').numberedtextarea({labels: labels});

Example