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 https://forums.phpfreaks.com/topic/43548-make-a-width-line-numbering/ 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 https://forums.phpfreaks.com/topic/43548-make-a-width-line-numbering/#findComment-211883 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 https://forums.phpfreaks.com/topic/43548-make-a-width-line-numbering/#findComment-211917 Share on other sites More sharing options...
Recommended Posts