Login    Forum    Search    FAQ   Blog

Board index » Client-Side Development » Javascript




 Page 1 of 1 [ 3 posts ] 



Author Message
 Post subject: show linenumbers in texarea
 Post Posted: Thu Feb 26, 2009 10:17 pm 
Offline

Joined: Sat Feb 21, 2009 2:40 pm
Posts: 39
Is it possible to add numbers to the text area? It shall be on the left side with blue or red background. Thanks.


Top 
 Post subject: Re: show linenumbers in texarea
 Post Posted: Thu Feb 26, 2009 10:20 pm 
Offline
Site Admin

Joined: Thu Jan 08, 2009 10:26 pm
Posts: 20
Adding numbers to text area might be difficult to manage , the cursor position for enter and handling the arrow keys. May be some sort of label beside the text area which scrolls along with the text area should be easier to implement.

_________________
Want to Make $$$$ with your Computer? No Risk! Simply press shift-4 four times in a row or

Go to http://www.55deals.com to save money on deals.


Top 
 Post subject: Re: show linenumbers in texarea
 Post Posted: Thu Feb 26, 2009 10:56 pm 
Offline

Joined: Sat Feb 21, 2009 12:42 pm
Posts: 12
here is code that i downloaded a few months back, i actually do not remember from where

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>TextArea Line Numbers Demo</title>
    <style>
      html {font:normal 76% verdana, arial, san serif;}
      body {padding:2em;}
      h2 {font-size:1.8em; padding:0.5em; background:#44aaff;}
      textarea {font-size:100%;}
      #editContent{
          margin-left:30px;
          padding-left:3px;
          width:600px;
          height:200px;
          border:1px solid #666;
      }
     .textAreaWithLines{
         display:block;
         margin:0;
         border:1px solid #666;
         border-right:none;
         background:#aaa;
      }
    </style>
    <script type="text/javascript">
       var move = false;
      function createTextAreaWithLines(id)
      {
        var el = document.createElement('TEXTAREA');
        var ta = document.getElementById(id);
       
        var string = '';
        for(var no=1;no<300;no++){
          if(string.length>0)string += '\n';
          string += no;
        }
       
        el.className      = 'textAreaWithLines';
        el.style.height   = (ta.offsetHeight-3) + "px";
        el.style.width    = "25px";
        el.style.position = "absolute";
        el.style.overflow = 'hidden';
        el.style.textAlign = 'right';
        el.style.paddingRight = '0.2em';
        el.innerHTML      = string;  //Firefox renders \n linebreak
        el.innerText      = string; //IE6 renders \n line break
        el.style.zIndex   = 0;
        ta.style.zIndex   = 1;
        ta.style.position = "relative";
        ta.parentNode.insertBefore(el, ta.nextSibling);
        setLine();
        ta.focus();
       
        ta.onkeydown    = function() { setLine(); }
        ta.onmousedown  = function() { setLine(); move=true; }
        ta.onmouseup    = function() { setLine(); move=false; }
        ta.onmousemove  = function() { if(move){setLine();} }
             
        function setLine(){
          el.scrollTop   = ta.scrollTop;
          el.style.top   = (ta.offsetTop) + "px";
          el.style.left  = (ta.offsetLeft - 27) + "px";
        }
      }
    </script>
</head>
<body>
  <h2>TextArea Line Numbers Demo</h2>
  <form name=form1 id=form1 action='' method=post>
    <textarea name="editContent" id="editContent">
       aaaaaaaaa aaaaa aaaaaaa
        BBBBBBB
        cccc
        DDDDDDD
        eeeeee
        FFFFFFF
        ggggggg
        HH HHHHHH  hhHHHH hhhhh HHHH
        IIII iiiiiiii iii iiiii IIIIIIIIIII
        JJJJJJ jjjjjjj JJJJJJJJJJJ jjjjjjjjjjj
      aaaaaa www w qqqqqqqqqq aaa
      ad
      fdfg
      d
      fgsdfgsdfgsdf
      gsdfgsdfgds
      gsdfgsdfgsdfg
      sdfgsdfgsdf
      gsdfgsdfgsdf
      gsdfgsdfgsd
      sdgfsdgsd
      gsdfg
      sdfg
      sdfgsdf
      gsdf
      gsd
      fg
      sdgfsdfgsd
      gsdfg
  </textarea>
   <script type="text/javascript">createTextAreaWithLines('editContent');</script>
  </form>
</body>
</html>

_________________
Sleep to dream, wake to acheive.


Top 
Display posts from previous:  Sort by  
 
 Page 1 of 1 [ 3 posts ] 




Board index » Client-Side Development » Javascript


Who is online

Users browsing this forum: No registered users and 1 guest

 
 

 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron