using the mouse wheel in Opera

**james438** · 07-12-2011, 03:13 PM

Sorry, I wasn't sure how to best title this thread. I am open to suggestions.

I have this script, which I have pruned down a great deal for simplicity sake. I am trying to get the line numbers on the left to scroll along with the text in the textarea. It works in ie8 and firefox 5, but is not perfect in Opera 11.5. It appears that I need to add an event listener. I am very much a novice with javascript though.

here is the script:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
<TITLE>
Editor 1.23</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
       #editContent{ 
           margin-left:40px;
           padding-left:3px;
           border:1px solid #666;
       } 
      .textAreaWithLines{ 
          display:block;
          margin:0;
          border:1px solid #666;
          border-right:none;
          background:#aaa;
       } 
textarea{
border:0px;margin:0px;padding:0px;
line-height:16px;
background-color:#FFFFFF;color:black;}
body{
color:#FFFFFF;
background-color:navy;
line-height:16px;
}
</style>
     <script type="text/javascript">
     function createTextAreaWithLines(id)
     {
       var el = document.createElement('TEXTAREA'); 
       var ta = document.getElementById(id);
       var string = ''; 
         for(var no=1;no<3000;no++){ 
           if(string.length>0)string += '\n'; 
           string += no; 
         } 
       el.className      = 'textAreaWithLines';
       el.style.height   = (ta.offsetHeight-3) + "px";
       el.style.width    = "34px";
       el.style.position = "absolute";
       el.style.overflow = 'hidden';
       el.style.textAlign = 'right';
       el.style.paddingRight = '0.2em';
       el.innerHTML      = string;  //Firefox renders \n linebreak
       el.innerText      = string; //IE6 renders \n line break
       el.style.zIndex   = 0;
       ta.style.zIndex   = 1;
       ta.style.position = "relative";
       ta.parentNode.insertBefore(el, ta.nextSibling);
       setLine();
       ta.focus(); 
   
       ta.onmousedown  = function() { setLine(); move=true; }
       ta.onmouseup    = function() { setLine(); move=false; }
       ta.onmouseover  = function() { setLine(); }
       ta.onmousemove  = function() { setLine(); }
       ta.onmousewheel = function() { setLine(); }
       ta.onblur       = function() { setLine(); }
       ta.onfocus      = function() { setLine(); }
       ta.onkeypress   = function() { setLine(); }
       ta.onkeydown    = function() { setLine(); }
       ta.onscroll     = function() { setLine(); }
            
      function setLine(){
        el.scrollTop   = ta.scrollTop; 
        el.style.top   = (ta.offsetTop) + "px";
         el.style.left  = (ta.offsetLeft - 37) + "px";
      }
     }
     </script></head>

<body>
<div style='width:100%;'><div style="width:72%;float:left;">
Contents of the web file:
<br><textarea name="data" style="width:98%;scrollbar-base-color:tan;height:722px;" wrap="off" id="editContent">
</textarea>
    <script type="text/javascript">createTextAreaWithLines('editContent');</script>
</div>
<div style="float:left;width:23%;padding-left:40px;">
<b>contents of folder: <span style='color:orange;'></span></b><br>

<div style='height:725px;overflow:auto;scrollbar-base-color:tan;float:left;width:100%;
background-color:blue;line-height:19px;border:0px;margin:0px;padding:0px;'></div>
</div></div></body></html>

If you add multiple lines until it scrolls and then use the mouse wheel to scroll up and down you will see that it is not perfect. Make sure you do not move your mouse or else the line numbers correct itself.

It seems that I need to apply an event listener as demonstrated in this page: http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel but I am not sure how to do that. Any help is certainly appreciated.

**jscheuer1** · 07-12-2011, 08:47 PM

You don't need any of that. It won't get you anything extra in Opera other than the event detail (amount the wheel was turned and in which direction), which is useless here as it doesn't directly correspond to anything you want done. You can get it without adding an event listener anyway. But I digress.

OK, you may need the first two:

Code:

       ta.onmousedown  = function() { setLine(); move=true; }
       ta.onmouseup    = function() { setLine(); move=false; }

But they could be just:

Code:

       ta.onmousedown  = function() { move=true; }
       ta.onmouseup    = function() { move=false; }

I don't know what that (move true/false) is for, didn't look into it. But if you thought it was important enough to include before, I guess it still is.

Get rid of the rest and add this after the function as shown:

Code:

      function setLine(){
        el.scrollTop   = ta.scrollTop; 
        el.style.top   = (ta.offsetTop) + "px";
         el.style.left  = (ta.offsetLeft - 37) + "px";
      }
      setInterval(setLine, 10);
     }
     </script>

That works in Opera 11.5 here, and should for any browser.

**james438** · 07-13-2011, 12:03 AM

I removed all of that useless code and added the one line you mentioned and it all works great now. I even got rid of the move=true. It works across all browsers just fine. Oddly enough it now works best in Opera now. There is a very small delay when using IE8 or firefox for the line numbers to keep up with the scrolling of the text.

After looking at it further I notice that adding the following removed the slight delay in IE8 and Firefox 5

Code:

       ta.onscroll     = function() { setLine();} //for IE 8
       ta.onmousewheel = function() { setLine();} //for Firefox 5

The script for line numbers is not mine. I found it on another old forum thread here. I modified it a bit to work a little better in Opera and to go up to 3000 lines as opposed to a mere 300.

It is a pretty handy script when integrated with a site specific ftp. Yes, I have added lots of security.

**tuffy** · 08-31-2011, 08:08 PM

Hello, I use this text area with line numbers in a web page where you write PHP code. It works fine with Firefox and Opera with your valuable contributions. But I have a problem with Google Chrome. Line numbers are grouped by 3 digits. In the first line I have "123", in the second line I have "456" whereas it should be "1" in the first line and "2" in the second line. With Firefox and Opera it is OK. I will be plased if you can help me. Thank you very much.

**james438** · 09-01-2011, 08:51 AM

Interesting, I hadn't noticed that before. It seems to wrap the numbers without recognizing newlines. I tried a few different things with my very limited understanding of javascript, but so far no luck.

**james438** · 09-01-2011, 09:36 AM

replacing
string += '\n'
with
string += '\t'

It will now work in Chrome and Opera, but not in ie8 or Firefox

.

I really think this is a Chrome bug since using \n\n\n\n takes forever for the page to load in Chrome.

**jscheuer1** · 09-01-2011, 09:59 AM

Chrome doesn't react well to the innerText property:

Code:

  <script type="text/javascript">
    function createTextAreaWithLines(id)
    {
      var el = document.createElement('TEXTAREA'); 
      var ta = document.getElementById(id);
      var string = ''; 
        for(var no=1;no<999;no++){ // 300 to 999
          if(string.length>0)string += '\n'; 
          string += no; 
        } 
      el.className      = 'textAreaWithLines';
      el.style.height   = (ta.offsetHeight-3) + "px";
      el.style.width    = "30px";
	  //el.style.width    = "29px"; // tried for chrome
	  
      el.style.position = "absolute";
      el.style.overflow = 'hidden';
      el.style.textAlign = 'center';
      el.style.paddingRight = '0.2em';
	  
	  //el.style.paddingRight = '0.9em'; // tried for chrome
	  
      el.innerHTML      = string;  //Firefox renders \n linebreak
      el.innerText      = string; //IE6 renders \n line break
      el.style.zIndex   = 0;
      ta.style.zIndex   = 1;
      ta.style.position = "relative";
      ta.parentNode.insertBefore(el, ta.nextSibling);
      setLine();
      ta.focus();  . . .

But since that's only for IE, we can use an IE conditional script comment for it:

Code:

  <script type="text/javascript">
    function createTextAreaWithLines(id)
    {
      var el = document.createElement('TEXTAREA'); 
      var ta = document.getElementById(id);
      var string = ''; 
        for(var no=1;no<999;no++){ // 300 to 999
          if(string.length>0)string += '\n'; 
          string += no; 
        } 
      el.className      = 'textAreaWithLines';
      el.style.height   = (ta.offsetHeight-3) + "px";
      el.style.width    = "30px";
	  //el.style.width    = "29px"; // tried for chrome
	  
      el.style.position = "absolute";
      el.style.overflow = 'hidden';
      el.style.textAlign = 'center';
      el.style.paddingRight = '0.2em';
	  
	  //el.style.paddingRight = '0.9em'; // tried for chrome
	  
      el.innerHTML      = string;  //Firefox renders \n linebreak
	/*@cc_on @*/
	/*@if(@_jscript_version >= 5)
	      el.innerText = string; //IE6 renders \n line break
	@end @*/
      el.style.zIndex   = 0;
      ta.style.zIndex   = 1;
      ta.style.position = "relative";
      ta.parentNode.insertBefore(el, ta.nextSibling);
      setLine();
      ta.focus(); . . .

By the way, since it doesn't change, all this stuff:

Code:

      el.style.width    = "30px";
      el.style.position = "absolute";
      el.style.overflow = 'hidden';
      el.style.textAlign = 'center';
      el.style.paddingRight = '0.2em';

Should be moved to the stylesheet:

Code:

<style type="text/css">
       #editContent{ 
           margin-left:40px;
           padding-left:3px;
           border:1px solid #666;
       } 
      .textAreaWithLines{ 
          display:block;
          margin:0;
          border:1px solid #666;
          border-right:none;
          background:#aaa;
          position: absolute;
          overflow: hidden;
          text-align: center;
          width: 30px;
          padding-right: 0.2em;
       } 
textarea{
border:0px;margin:0px;padding:0px;
line-height:16px;
background-color:#FFFFFF;color:black;}
body{
color:#FFFFFF;
background-color:navy;
line-height:16px;
}
</style>

**tuffy** · 09-01-2011, 11:31 AM

I would like to thank you very much. IE conditional script comment works great.
In IE9, the text you write in the textarea is not in precise line with the numbers in the numbering text area. Attached is the screen shot of the problem. I do not know if anything can be done.