Non-selectable line numbers?

@ShakedownJul 03.2008

I’ve written a JavaScript…script…that will take a document and display it with corresponding line numbers. The content is not in a table, so if you highlight the content, you get the line numbers as well.

Is there a way to make the line numbers non-selectable without having to change/rewrite a lot of my code? Any ideas?

Thanks

to post a comment

JavaScript

@TheBearMayJul 03.2008 — #If you output it as an ordered list it will automatically number the lines and the numbers will not select...

[code=html]
 <ol>
 <li>Line 1 text</li>
 <li>Line 2 text</li>
 </ol>
 [/code]

@ShakedownauthorJul 03.2008 — #If you output it as an ordered list it will automatically number the lines and the numbers will not select...

[code=html]
 <ol>
 <li>Line 1 text</li>
 <li>Line 2 text</li>
 </ol>
 [/code]

[/QUOTE]

Hmm...why didn't I realize that. Can I create this list using DOM? Can I color the numbers?

@TheBearMayJul 03.2008 — #Here is a quick way to do what I was talking about:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;script type="text/javascript"&gt;
 function getFile(fileName){
 oxmlhttp = null;
 try{
 oxmlhttp = new XMLHttpRequest();
 oxmlhttp.overrideMimeType("text/xml");
 }
 catch(e){
 try{
 oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch(e){
 return null;
 }
 }
 if(!oxmlhttp) return null;
 try{
 oxmlhttp.open("GET",fileName,false);
 oxmlhttp.send(null);
 }
 catch(e){
 return null;
 }
 return oxmlhttp.responseText;
 }
 window.onload = function() {
 var fContent = getFile("Somefile.txt");
 var tOut = "&lt;li&gt;&amp;nbsp;&lt;span&gt;" + fContent.replace(/n/g, "&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&amp;nbsp;&lt;span&gt;");
 tOut = tOut.substr(0,tOut.length-16);
 document.getElementById("oPut").innerHTML=tOut;
 }
 &lt;/script&gt;
 &lt;style type="text/css"&gt;
 li {
 color:#ff0000;
 }
 span {
 color:#000000;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;ol id="oPut"&gt;
 
 &lt;/ol&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

By adding the <span> elements into the <li> you're able to use css to change colors, etc of the numbers.

Non-selectable line numbers?

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Non-selectable line numbers?

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴