How to change the display of this jQuery plugin?

Question

This textcounter and limiter works great, but I'd like to be able to change the display of the "characters remaining" to before the textarea, not after. The developer doesn't respond to emails, so I'm wondering: how do I change this to display the characters remaining to before the textarea, not after? Thanks...

The html:

<p>Message (less than 1000 characters):</p> (would like the remaining character count to display here)

<script type="text/javascript"> jQuery(function($){ $("textarea.text").dodosTextCounter(1000, {counterDisplayElement: "span",counterDisplayClass: "textCounterDisplay"}); });</script>

<textarea class="text" name="comment" id="comment" rows="10" cols="60"></textarea>
(Character count is now displayed here)

The jQuery:

jQuery.fn.dodosTextCounter = function(max, options) {
    // if the counter display doesn't exist, the script will attempt to create it
    options = $.extend({
     counterDisplayElement: "span",     // tag for the counter display
     counterDisplayClass: "dodosTextCounterDisplay", // class for the counter display
     addLineBreak: true        // whether to add <br /> after the input element before the counter display
    }, options);

    $(this).each(function(i) {
     updateCounter(this, max, options, i);
     $(this).keyup(function() {
      updateCounter(this, max, options, i);
      return this;
     });
    });
    return this;
};

function updateCounter(input, max, options, index) {
    var currentLength = 0;
    var val = $(input).val();
    if(val) {
     currentLength = val.length;
    }
    if(currentLength > max) {
     $(input).val(val.substring(0, max));
    } else {
     var charLeft = max - currentLength;
     var counterDisplay = options.counterDisplayElement + "." + options.counterDisplayClass + ":eq("+index+")";
     var createNew = $(counterDisplay).length == 0;
     if(createNew) {
      var element = document.createElement(options.counterDisplayElement);
      if(options.counterDisplayElement == 'input') {
       $(element).val(charLeft.toString());
      } else {
       $(element).html(charLeft.toString());
      }
      $(element).addClass(options.counterDisplayClass).insertAfter($(input));
      if(options.addLineBreak) {
       $(input).after("<br />");
      }
     } else {
      if(options.counterDisplayElement == 'input') {
       $(counterDisplay).val(charLeft.toString());
      } else {
       $(counterDisplay).html(charLeft.toString());
      }
     }

    }
}

Answer 1

the line that is determining where the count is displayed is:

$(element).addClass(options.counterDisplayClass).insertAfter($(input));

You could change it to:

$(element).addClass(options.counterDisplayClass).insertBefore($(input));

---

If you absolutely needed it before the script, I think you would need to add another param to the function so you could control where the element gets inserted.