Results 1 to 10 of 10

Thread: using the mouse wheel in Opera

  1. #1
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,731
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default using the mouse wheel in Opera

    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.
    Last edited by james438; 07-13-2011 at 12:04 AM.
    To choose the lesser of two evils is still to choose evil. My personal site

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    james438 (07-12-2011)

  4. #3
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,731
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    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.
    Last edited by james438; 07-13-2011 at 12:27 AM. Reason: slight clarification.
    To choose the lesser of two evils is still to choose evil. My personal site

  5. #4
    Join Date
    Aug 2011
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default textarea with line numbers has a problem with Google Chrome

    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.

  6. #5
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,731
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    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.
    Last edited by james438; 09-01-2011 at 09:10 AM.
    To choose the lesser of two evils is still to choose evil. My personal site

  7. #6
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,731
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    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.
    To choose the lesser of two evils is still to choose evil. My personal site

  8. The Following User Says Thank You to james438 For This Useful Post:

    tuffy (09-01-2011)

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following 2 Users Say Thank You to jscheuer1 For This Useful Post:

    james438 (09-01-2011),tuffy (09-01-2011)

  11. #8
    Join Date
    Aug 2011
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Thank you very much

    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.

  12. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    With the code I have from james438 it's not doing that in IE 9. Please post your complete code or a link to the page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  13. #10
    Join Date
    Aug 2011
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default IE 9 Line up problem resolved

    This problem is resolved while I was changing the code to be able to post it. Thank you very much.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •