Wuhtzu Posted March 21, 2007 Share Posted March 21, 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> Each line needs to be numbered and if the content extends the size of the textarea and a scrollbar appears the numbering needs to move with the scrolling.. So... does any one know of JS script or way to do this? Best regards Wuhtzu -------------------------------------------- An html/css idea with do not work, but it might help anyway 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... --------------------------------------- Quote Link to comment Share on other sites More sharing options...
mainewoods Posted March 21, 2007 Share Posted March 21, 2007 The DOM specification for the textarea object does not seem to show any accessable properties that would allow you to know whether the box is scrolled or even if a scrollbar is present: http://www.w3schools.com/htmldom/dom_obj_textarea.asp --I ran into a similiar problem before where I tried to have js determine if the bottom scroll bar of the browser was present or not present but I could not find any js way to do it. The link above is from the best HTML DOM reference I know of on the web, if anyone knows of a better DOM reference on the web, please show the link here. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.