autoscrolling a table using a mouseover event on the table cells

Hi all,

I'm hoping to find someone really well versed in event handling for this one.

Here's the scenario:

I am creating a weekly schedule table with a row for each 15 minutes, and a column for each day.  Obviously this is a fairly large table, so I've got it in a div with overflow turned on, so it can be scrolled. The table has some functionality where clicking on a cell either turns the cell 'on' or 'off' - by adding a class to the cell which changes it's background color. Also, if you click, hold your mouse down and drag, it 'paints' the cells by turning them on as well. All of this is working fairly well.
The client would like to add functionality where if you are painting the cells and you drag towards the bottom of the visible area, the table will auto-scroll itself so you can continue painting. We are currently handling this with a mouseover event on the table, so anytime you mouseover a table cell it calls our scrolling function.  The scrolling function checks the mouse position, if the mouse is in the proper position it either scrolls the table up or down accordingly.

The issue we have is that in IE, once the table scrolls the first time, if the mouse is not moved, the scrolling function does not get called again. In FF, it does. It seems like in FF moving the layer underneath the mouse still manages to call the mouseover function but in IE it does not.

I've tried a few things to get around this, but without much luck. We are using jQuery, so I've tried calling the scrolling function using their .scroll() event but that's not working well either. It seems I need to call the scrolling function from an event because we need to pass the event to the function to check the mouse coordinates.

Here's the basic function we are using:

      setUpScrolling: function(e) {
                  bMovingUp = (e.pageY < weeklySchedule.iPrevY);
                  bMovingDown = (e.pageY > weeklySchedule.iPrevY);
                  pageY = e.pageY;
                  if (pageY >= 348 && !bMovingUp) {
                        weeklySchedule.iScrollTimer = setTimeout( function() {weeklySchedule.scrollDown(e)}, weeklySchedule.iScrollInterval);
                  } else if (pageY <= 196 && !bMovingDown) {
                        weeklySchedule.iScrollTimer = setTimeout(function() {weeklySchedule.scrollUp(e)}, weeklySchedule.iScrollInterval);
                  }
                  weeklySchedule.iPrevY = pageY;
      },


I can post other snippets of code if needed but that's the one doing the magic.  It's being attached through jQuery's .mouseover() event.

I wish I could post an example of the page but it's internal and under NDA, sorry.

Any thoughts???


Thanks!Start Free Trial