[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1079
  • Last Modified:

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!
0
bruno
Asked:
bruno
  • 2
1 Solution
 
ZvonkoSystems architectCommented:
Does this approach help you anyhow:



<html>
<head>
<title>Zvonko &#42;</title>
<style>
#myTab td {
  height: 30px;
  width: 120px;
}
#myTab td.marked {
  background-color: cornflowerblue;
}
</style>
<script>
window.onload = function(){
  var theTab = document.getElementById("myTab");
  theTab.onmousedown = startMark;
  theTab.onmouseover = createMark;
  theTab.onmouseout = moveMark;
  theTab.onmouseup = stopMark;
}
var doMark;
function startMark(){
  doMark = true;
}
function stopMark(){
  doMark = false;
}
var oldY = 0;
var scrollDir = +1;
function createMark(e){
  if(!doMark) return false;
  if(!e) e = window.event;
  scrollDir = (e.y > oldY)?+1:-1;
  oldY = e.y;
  var srcElem = (e.target)?e.target:e.srcElement;
  while(srcElem && srcElem.nodeName!="TD"){
    srcElem = srcElem.parentNode;
  }
  if(srcElem){
    srcElem.className = "marked";
  }
}
function moveMark(e){
  if(!doMark) return false;
  if(!e) e = window.event;
  var srcElem = (e.target)?e.target:e.srcElement;
  while(srcElem && srcElem.nodeName!="TD"){
    srcElem = srcElem.parentNode;
  }
  if(srcElem){
    window.scrollBy(0,scrollDir * srcElem.scrollHeight);
  }
}
</script>
</head>
<body onSelectStart="return false">
<table id="myTab">
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
</table>
</body>
</html>



0
 
brunoAuthor Commented:
theres some interesting stuff there Zvonko - I need to look at that a bit closer.

First issue I have w/ that is that it's scrolling the entire window, and my table is in a div w/ overflow. so I need to adjust the scrollTop rather than using the scrollBy method.

I will look at this a bit further today though to see if I can figure out how to adapt it.
0
 
ZvonkoSystems architectCommented:
No no, not change the method(), change the scrolled element from windod.scrollBy() to:
theDiv.scrollBy(0,scrollDir * srcElem.scrollHeight);


0
 
Computer101Commented:
Forced accept.

Computer101
EE Admin
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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