Jump to content

Make a <textarea> width line numbering


Wuhtzu

Recommended Posts

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

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.