added correctly sized and moving scrollbar

svn path=/; revision=403

diff --git a/Personnel/miles/Web Page/heatMap.php b/Personnel/miles/Web Page/heatMap.php
index 3385fe0fe1c4328f027a3e338b8f8ae7b162e9d6..2683896d9d2095f9b252648e010bc9b5d9a71707 100644 (file)
--- a/Personnel/miles/Web Page/heatMap.php
+++ b/Personnel/miles/Web Page/heatMap.php
@@ -138,11 +138,15 @@ echo $originalSpecies[$i] . "\n";
 <input type="text" name="cluster" />
 </form>
 
-<div id="canvasDiv" style="overflow: auto; height: 515px; width: 1100px;" onscroll="drawMap();">
+<div id="canvasDiv" style="overflow: hidden; float: left; height: 500px; width: 1100px;">
 <canvas id="myCanvas" width="1500" height="1000" style="border:1px solid #c3c3c3;">
 Your browser does not support the canvas element.
 </canvas> </div>
 
+<div id="scrollDiv" style="overflow: auto; float: left; height: 515px; width: 25px;" onscroll="drawMap();">
+<canvas id="nothing" width="25" height="<?php echo 250 + sizeof($allClusterIDs)*25 ?>"> </canvas>
+</div>
+
 <form name="downloadImage" >
 <input type="button" value="Download as JPG" onClick="generateImage()"/>
 </form>
@@ -228,14 +232,11 @@ function drawClusters(startCluster) {
 }
 
 function drawMap(init) {
-  scrolledLeft = scrolledLeft + document.getElementById("canvasDiv").scrollLeft - leftScrollOffset;
-  scrolledTop = scrolledTop + document.getElementById("canvasDiv").scrollTop - topScrollOffset; // NOTE the 25 accounts for the scrollbar offset allowing for scrolling up/left
+  scrolledLeft = document.getElementById("scrollDiv").scrollLeft - leftScrollOffset;
+  scrolledTop = document.getElementById("scrollDiv").scrollTop - topScrollOffset +25; // NOTE the 25 accounts for the scrollbar offset allowing for scrolling up/left
   if(scrolledLeft > speciesCount*cellSize - maxCols*cellSize) {
     scrolledLeft = speciesCount*cellSize - maxCols*cellSize;
   }
-  if(scrolledTop > clusterCount*cellSize - maxRows*cellSize) {
-    scrolledTop = clusterCount*cellSize - maxRows*cellSize;
-  }
   if(scrolledLeft < 0) {
     scrolledLeft = 0;
   }
@@ -243,9 +244,6 @@ function drawMap(init) {
     scrolledTop = 0;
   }
 
-  document.getElementById("canvasDiv").scrollTop = topScrollOffset;
-  document.getElementById("canvasDiv").scrollLeft = leftScrollOffset;
-
   if((init || Math.floor(scrolledLeft/cellSize) != drawnCols || Math.floor(scrolledTop/cellSize) != drawnRows)) {
     drawnCols = Math.floor(scrolledLeft/cellSize);
     drawnRows = Math.floor(scrolledTop/cellSize);