SHOW LINE NUMBER OF TEXT AREA

WHEN WE ENTER , SHOW LINE NUMBER IN TEXT AREA

HTML PAGE:-

<textarea class="line-numbers" cols="3" readonly="readonly" rows="5"></textarea>
<%= text_area_tag :query_editor, '' :name => "query_editor", :class => "add_query_editor" %>


<script type="text/javascript">
   $(".add_query_editor").keyup(function(event) {
     $(this).prev().height($(this).height());
     $(this).prev()[0].scrollTop = this.scrollTop;
   });

   $(".add_query_editor").keyup(function(event) {
     var elm = $(this);
     var lines = elm.val().split("\n");
     var numbers = "";
     for(var i=0; i<lines.length; i++)
     numbers += (i+1) + "\n";
     elm.prev().val(numbers);
     elm.prev()[0].scrollTop = this.scrollTop;
  });

</script>

<style type="text/css">
   .line-numbers {
      background-color: aqua
      text-align: right;
      position:relative;
      border: none;
      overflow: hidden;
      float: left;
      width: 3% !important;
      margin: 16px 0px 10px;
      min-height: 120px;
      font-size: 14px !important;
      padding-top: 10px !important;
   }
   .add_query_editor {
      margin-top: 15px !important;
      min-height: 120px;
      font-size: 14px !important;
      padding-left: 10px !important;
      padding-top: 10px !important;
      width: 93% !important;
      float: left;
   }
</style>


WE CAN FOLLOW :-

http://jsfiddle.net/qZqX8/

Popular posts from this blog

CARRIERWAVE - UPLOAD ANY MEDIA (AUDIO , VIDEO AND IMAGE ) FILE IN RAILS

SELECT COUNTRY WITH STATE AND IT'S CITIES RAILS

CREATE API FOR USER SIGN UP, LOGIN AND CREATE PUBLISHER WITH CURRENT USER

RAILS: UPLOADING PHOTOS VIA AMAZON S3 AND PAPERCLIP (UPLOADING FILES TO S3 IN RUBY WITH PAPERCLIP)

UNINITIALIZED CONSTANT PAPERCLIP::STORAGE::S3::AWS

DEPLOYING PROJECT USING CAPISTRANO (CAPISTRANO IN RAILS)

GENERATE PDF FILE IN RAILS

HOW TO CALL RAILS API FROM SIMPLE HTML PAGE.