Wuhtzu Posted March 20, 2007 Share Posted March 20, 2007 Hey I would like to make a textarea with some sort of line numbering, but I can't figure out how to do it... <textarea></textarea> My idea so far is to create a div besides the textarea and let the div contain the line numbers: css: html { height: 100%; margin: 0; padding: 0; } body { background-color: #F5F5F5; height: 100%; margin: 0; padding: 0; } #input-box { height: 300px; margin: 0 0 0 25px; padding: 5px; } #line-number-box { position: absolute; left: 0; top: 0; width: 20px; height: 300px; overflow: hidden; text-align: right; } textarea { width: 100%; height: 100%; border: 1px solid #d4d0c8; } html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="../style/input.css" /> </head> <body> <div id="line-number-box">1<br />2<br />3<br /> </div> <div id="input-box"> <textarea></textarea> </div> </body> </html> The result can be seen here: http://wuhtzu.dk/random/lntextarea/input.php This sort of works fine when it is fine tuned with lineheight, linespacing and font-size, but if the textarea gets "overflowed" so it shows a scrollbar it suddenly breakes everything. Try typing one char and hit enter a few times so the scrollbar appears... Another idea would be to create an image witch were something like 20px x 800px and contained a long list of numbers and then use it as a background image for the textarea, but only IE6 view this correctly - which in this case is to let the background scroll with the content in the textarea... So... can you guys think of another way to create a textarea with line numbering which follows the textarea even if it starts to scroll? Best regards Wuhtzu Link to comment Share on other sites More sharing options...
ToonMariner Posted March 21, 2007 Share Posted March 21, 2007 I can't really help you but suffice to say this is more than likely a javscript job - you want the line numbers to move up and down with the text in the text area so js would appear to be the solution (try a good js forum). Link to comment Share on other sites More sharing options...
Wuhtzu Posted March 21, 2007 Author Share Posted March 21, 2007 yeah, you are probably right - I'll repost in JS forum. Thanks... Link to comment Share on other sites More sharing options...
Recommended Posts