From f0db1ee2461af881c530c48f9977293f49028ca7 Mon Sep 17 00:00:00 2001
From: miles <miles@localhost>
Date: Wed, 17 Oct 2012 23:33:20 +0000
Subject: [PATCH] added correctly sized and moving scrollbar

svn path=/; revision=403
---
 Personnel/miles/Web Page/heatMap.php | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/Personnel/miles/Web Page/heatMap.php b/Personnel/miles/Web Page/heatMap.php
index 3385fe0..2683896 100644
--- 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);
-- 
2.34.1