[Jquery][1.4.2][hover] different behavior in firefox and Opera

[Jquery][1.4.2][hover] different behavior in firefox and Opera

I'm using this code with jquery 1.4.2. 

The code works correctly in IE 6,7,8 and Chrome build #(who knows).....

But it doesn't work in Firefox 3.6.3 or Opera 10

The page validates 100% perfect to the dtd and there are no client errors.

The desired behavior is that the gallery will scroll to the right or left when I hover over the respective arrow divs, and when I take the mouse off the div the scrolling should stop. In Chrome and IE the behavior is perfect. In Firefox, there is no scrolling at all, it just stays still.

Can anyone help me out?

thanks,

  1. scrollStep=3

  3. timerLeft=""
  4. timerRight=""

  6. function toLeft(id){
  7.   document.getElementById(id).scrollLeft=0
  8. }

  10. function scrollDivLeft(id){
  11.   clearTimeout(timerRight) 
  12.   document.getElementById(id).scrollLeft+=scrollStep
  13.   timerRight=setTimeout("scrollDivLeft('"+id+"')",10)
  14. }

  16. function scrollDivRight(id){
  17.   clearTimeout(timerLeft)
  18.   document.getElementById(id).scrollLeft-=scrollStep
  19.   timerLeft=setTimeout("scrollDivRight('"+id+"')",10)
  20. }

  22. function toRight(id){
  23.   document.getElementById(id).scrollLeft=document.getElementById(id).scrollWidth
  24. }

  26. function stopMe(){
  27.   clearTimeout(timerRight) 
  28.   clearTimeout(timerLeft)
  29. }

  31. $(document).ready(function(){
  32.       $(function(){
  33. $('#left_scroll').hover(
  34. function(){
  35. scrollDivRight('gallery_container');
  36. },
  37. function(){
  38. stopMe();
  39. }
  40. );
  41. });
  42. $(function(){
  43. $('#right_scroll').hover(
  44. function(){
  45. scrollDivLeft('gallery_container');
  46. },
  47. function(){
  48. stopMe();
  49. }
  50. );
  51. });
  52. }
Here is the relevant HTML 

  
    
   
  1. <div id="img_selector" >
    2. 
   
  2. <div id="left_scroll" >&larr;</div>
    3. 
   
  3. <div id="gallery_container">
    4. 
   
  4. <div id="gallery_scroller" >
    5. 
   
  5. <div class="image_thumbs"><img style="icon_image" src="http://img227.imageshack.us/img227/950/dontworryoldchapwellgete.jpg" alt="image" id="icon_1233" /></div>
    6. 
   
  6. <div class="image_thumbs"><img style="icon_image" src="http://img101.imageshack.us/img101/1286/k717zp1x.jpg" alt="image" id="icon_1221" /></div>
    7. 
   
  7. <div class="image_thumbs"><img style="icon_image" src="http://img541.imageshack.us/img541/7857/459598801077970b71c1.jpg" alt="image" id="icon_1220" /></div>
    8. 
   
  8. <div class="image_thumbs"><img style="icon_image" src="http://img580.imageshack.us/img580/2694/cutefunnyanimals017rqqt.jpg" alt="image" id="icon_1174" /></div>
    9. 
   
  9. <div class="image_thumbs"><img style="icon_image" src="http://img526.imageshack.us/img526/3145/doofus.jpg" alt="image" id="icon_1173" /></div>
    10. 
   
  10. <div class="image_thumbs"><img style="icon_image" src="http://img263.imageshack.us/img263/6086/medicomtoyxsillythingbe.jpg" alt="image" id="icon_1169" /></div>
    11. 
   
  11. <div class="image_thumbs"><img style="icon_image" src="http://img441.imageshack.us/img441/2858/sillysign263x300.jpg" alt="image" id="icon_1168" /></div>
    12. 
   
  12. <div class="image_thumbs"><img style="icon_image" src="http://img714.imageshack.us/img714/6685/7120an20old20silly20fac.jpg" alt="image" id="icon_1167" /></div>
    13. 
   
  13. </div>
    14. 
   
  14. </div>
    15. 
   
  15. <div id="right_scroll" >&rarr;</div>
    16. 
   
  16. </div>
    17.