• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 842
  • Last Modified:

Onscroll event for textbox not working in Firefox

I have 2 multiline textboxes right next to each other.   What I am trying to accomplish is if you scroll one of them, it automatically scrolls the others so that the rows match up

I created a basic javascript function to do this based on the onScroll event and that worked great in IE.   However, when I tested in Firefox the onScroll event never fires off.   Does anyone have any ideas how I can get this to work in Firefox?
0
amb1313
Asked:
amb1313
  • 2
  • 2
1 Solution
 
JohnSixkillerCommented:
Hi, try this.
Tested in  IE7,FF3. For both SELECTs and TEXTAREAs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
	<head>	
		<script type='text/javascript'>
			function sync(){
				document.getElementById("sel2").scrollTop = document.getElementById("sel1").scrollTop;
			}
		</script>
	</head>
	<body>
		<select multiple='yes' id='sel1' style='height:100px' onscroll='sync()'>
			...
		</select>
 
		<select multiple='yes' id='sel2' style='height:100px'>
			...
		</select>
	</body>
</html>

Open in new window

0
 
amb1313Author Commented:
I am working with multiline textboxes that the end user can type (or copy/paste) information into.   When I look at the page's source, it is using the "textarea" tag to accomplish this.   The onScroll event works for "textarea" in IE but I can't get it to work in Firefox.
0
 
JohnSixkillerCommented:
Maybe its problem of older versions of FF. I have tested this in FF3 with textarea and it worked.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
        <head>  
                <script type='text/javascript'>
                        function sync(){
                                document.getElementById("sel2").scrollTop = document.getElementById("sel1").scrollTop;
                        }
                </script>
        </head>
        <body>
                <textarea id='sel1' style='height:100px' onscroll='sync()'>
                        ...
                </textarea>
 
                <textarea id='sel2' style='height:100px'>
                        ...
                </textarea>
        </body>
</html>

Open in new window

0
 
amb1313Author Commented:
I think you are correct.   I got the latest version and it seems to be working in Firefox now.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now