 |
|
|
Hi,
I have made a couple of changes to make this excelent piece of code support Firefox and Chrome.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Fixed Headers</title>
<style type="text/css">
body, td, p {font-family: Verdana;font-size: 10pt;}
h1{font-family: Verdana;font-size: 14pt;}
table{border-collapse: collapse;}
td, th{border-top: solid 1px #666666;border-bottom: solid 1px #666666;white-space: nowrap;padding-left: 10px;padding-right: 10px;text-align: left;}
th{background-color: #666666;color: #ffffff;}
#outerDiv{position: relative;}
#innerDiv{overflow: auto;}
#innerDiv td{white-space: nowrap;}
</style>
<script type="text/javascript">
var divContent = null;
var divTbl = null;
var divHeaderRow = null;
var divHeaderColumn = null;
var divHeaderRowColumn = null;
var headerRowFirstColumn = null;
var x;
var y;
var horizontal = false;
var vertical = false;
// Code inspiration "from http://stackoverflow.com/questions/920478/javascript-traversing-the-html-dom-using-childnodes-causes-errors-in-non-ie-bro"
function child(elem, index) {
// if index is not supplied, default is 1
// you might be more comfortable making this 0-based
// in which case change i initial assignment value to 0 too
index = index || 1;
// get first child element node of elem
elem = (elem.firstChild && elem.firstChild.nodeType != 1) ?
next(elem.firstChild) :
elem.firstChild;
// use the index to move to nth-child element node
for(var i=1; i < index;i++) {
(function() {
return elem = next(elem);
})();
}
return elem;
}
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
// end inspiration
// Copy table to top and to left
function CreateScrollHeader(content, scrollHorizontal, scrollVertical)
{
horizontal = scrollHorizontal;
vertical = scrollVertical;
if (content != null)
{
divContent = content;
divTbl=child(divContent);
var headerRow = child(child(divTbl));
x = divTbl.offsetWidth;
y = divTbl.offsetHeight;
divHeaderRow = divContent.cloneNode(true);
if (horizontal)
{
divHeaderRow.style.height = headerRow.offsetHeight + "px";
divHeaderRow.style.overflow = "hidden";
divContent.parentNode.insertBefore(divHeaderRow, divContent);
divTbl.style.position = "absolute";
divTbl.style.top = "-" + headerRow.offsetHeight + "px";
y = y - headerRow.offsetHeight;
}
divHeaderRowColumn = divHeaderRow.cloneNode(true);
headerRowFirstColumn = child(headerRow);
divHeaderColumn = divContent.cloneNode(true);
divContent.style.position = "relative";
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderColumn, divContent);
divContent.style.left = headerRowFirstColumn.offsetWidth + "px";
divTbl.style.position = "absolute";
divTbl.style.left = "-" + headerRowFirstColumn.offsetWidth + "px";
}
else
{
divContent.style.left = 0 + "px";
}
if (vertical)
{
divHeaderColumn.style.width = headerRowFirstColumn.offsetWidth + "px";
divHeaderColumn.style.overflow = "hidden";
divHeaderColumn.style.zIndex = "99";
divHeaderColumn.style.position = "absolute";
divHeaderColumn.style.left = "0" + "px";
addScrollSynchronization(divHeaderColumn, divContent, "vertical");
x = x - headerRowFirstColumn.offsetWidth;
}
if (horizontal)
{
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
}
divHeaderRowColumn.style.position = "absolute";
divHeaderRowColumn.style.left = "0" + "px";
divHeaderRowColumn.style.top = "0" + "px";
divHeaderRowColumn.style.width = headerRowFirstColumn.offsetWidth + "px";
divHeaderRowColumn.overflow = "hidden";
divHeaderRowColumn.style.zIndex = "100";
divHeaderRowColumn.style.backgroundColor = "#ffffff";
}
if (horizontal)
{ addScrollSynchronization(divHeaderRow, divContent, "horizontal");
}
if (horizontal || vertical)
{
window.onresize = ResizeScrollArea;
ResizeScrollArea();
}
}
}
// Resize scroll area to window size.
function ResizeScrollArea()
{ var height = document.documentElement.clientHeight - 120;
if (!vertical)
{
height -= divHeaderRow.offsetHeight;
}
var width = document.documentElement.clientWidth - 50;
if (!horizontal)
{
width -= divHeaderColumn.offsetWidth;
}
var headerRowsWidth = 0;
divTbl.style.width = x + "px";
divTbl.style.height = y + "px";
if (divHeaderRowColumn != null)
{
headerRowsWidth = divHeaderRowColumn.offsetWidth;
}
// width
if (divTbl.offsetWidth > width)
{
divContent.style.width = Math.max(width - headerRowsWidth, 0) + "px";
divContent.style.overflowX = "scroll";
divContent.style.overflowY = "auto";
}
else
{
divContent.style.width = x + "px";
divContent.style.overflowX = "auto";
divContent.style.overflowY = "auto";
}
if (divHeaderRow != null)
{
divHeaderRow.style.width = divContent.offsetWidth + headerRowsWidth + "px";
}
// height
if (divTbl.offsetHeight > height)
{
divContent.style.height = Math.max(height, 80) + "px";
divContent.style.overflowY = "scroll";
}
else
{
divContent.style.height = y + "px";
divContent.style.overflowY = "hidden";
}
if (divHeaderColumn != null)
{
divHeaderColumn.style.height = divContent.offsetHeight + "px";
}
// check scrollbars
if (divContent.style.overflowY == "scroll")
{
divContent.style.width = divContent.offsetWidth + 17 + "px";
}
if (divContent.style.overflowX == "scroll")
{
divContent.style.height = divContent.offsetHeight + 17 + "px";
}
// divContent.parentElement.style.width = divContent.offsetWidth + headerRowsWidth;
divContent.parentNode.style.width = divContent.offsetWidth + headerRowsWidth + "px";
}
// ********************************************************************************
// Synchronize div elements when scrolling
// from http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
// ********************************************************************************
// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = event.srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = event.srcElement.scrollTop;
};
}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);
fromElement._syncScroll = getOnScrollFunction(fromElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
if(window.addEventListener)
{ toElement.addEventListener("onscroll", fromElement._syncScroll, false);
}
else
toElement.attachEvent("onscroll", fromElement._syncScroll);
}
// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null)
{ if(window.addEventListener)
{ toElement.addEventListener("onscroll", fromElement._syncScroll, false);
}
else
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
}
fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}
</script>
</head>
<body>
<h1>Fixed Headers</h1>
<div id="outerDiv">
<div id="innerDiv">
<table>
<tr id="HeaderRow">
<th>Table</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
</tr>
<tr>
<th>Row 1</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 2</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 3</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 4</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 5</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 6</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 7</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 8</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 9</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 10</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 11</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 12</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 13</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 14</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 15</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 16</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 17</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 18</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 19</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<th>Row 20</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script language="javascript">
CreateScrollHeader(document.getElementById("innerDiv"), true, true);
</script>
Kind Regards
Arne Møller
|
| Sign In·View Thread·PermaLink | 5.00/5 (1 vote) |
|
|
|
|
|
|
Hi
I've made a version of the script that supports freezing multiple columns.
The HTML should look like this:
<pre>
<div id="outerDiv">
<div id="innerDiv">
<table>
<thead>
<tr>
<th>Table</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row 1</th>
<th>Value 1</th>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
...
</pre>
All cells wrapped in 'th' will be fixed.
The script (Based on Kenneths version):
<pre>
var divContent = null;
var divHeaderRow = null;
var divHeaderColumn = null;
var divHeaderRowColumn = null;
var fixedColumnWidth;
var x;
var y;
var horizontal = false;
var vertical = false;
// Copy table to top and to left
function CreateScrollHeader(content, scrollHorizontal, scrollVertical)
{
horizontal = scrollHorizontal;
vertical = scrollVertical;
divContent = content;
if(BrowserDetect.browser == "Konqueror") {
window.onload = CreateScrollHeaderActual;
} else {
CreateScrollHeaderActual();
}
}
function CreateScrollHeaderActual() {
if (divContent != null)
{
var widthCosmeticAdd = 0;
var heightCosmeticAdd = 0;
// browser specific cosmetic tweaks
if (BrowserDetect.browser == "Explorer") {
widthCosmeticAdd = 2;
heightCosmeticAdd = 2;
} else if(BrowserDetect.browser == "Opera" || BrowserDetect.browser == "Konqueror" || BrowserDetect.browser == "Safari") {
widthCosmeticAdd = 1;
heightCosmeticAdd = 1;
}
var originalTable = findFirstElementByType(divContent, 'table');
var headerRow = findFirstElementByType(originalTable, 'thead');
//Find the no of fixed colums
var firstRow = findFirstElementByType(findFirstElementByType(originalTable, 'tbody'),'tr');
var noOfFixedCols = firstRow.getElementsByTagName('th').length;
//Calculate the total width of the fixed columns
var headerRowTR = findFirstElementByType(headerRow,'tr');
fixedColumnWidth = 0;
for( i = 0 ; i < noOfFixedCols ; i++ ) {
fixedColumnWidth = fixedColumnWidth + headerRow.getElementsByTagName('th')[i].offsetWidth;
}
x = originalTable.offsetWidth;
y = originalTable.offsetHeight;
//Clone the entire table - including innerDiv
divHeaderRow = divContent.cloneNode(true);
//Should the header row remain fixed?
if (horizontal)
{
//Set the height of the innerDiv div
divHeaderRow.style.height = (headerRow.offsetHeight + heightCosmeticAdd) + 'px';
//Make sure no scrollbars are visible in the new header row
divHeaderRow.style.overflow = "hidden";
//Insert the copy of innerDiv before the existing innerDiv
divContent.parentNode.insertBefore(divHeaderRow, divContent);
//Set position type to absolute - in order to subtract the 'new' header row
originalTable.style.position = "absolute";
//Make sure the header row is not visible on the original table
originalTable.style.top = "-" + (headerRow.offsetHeight + heightCosmeticAdd) + 'px';
y = y - headerRow.offsetHeight;
}
//Clone the div just created abowe
divHeaderRowColumn = divHeaderRow.cloneNode(true);
//Clone the original innerDiv
divHeaderColumn = divContent.cloneNode(true);
divContent.style.position = "relative";
if (vertical)
{
//Insert the fixed column before orginal table
divContent.parentNode.insertBefore(divHeaderColumn, divContent);
//Push the the orginal innerDiv right
divContent.style.left = fixedColumnWidth + 'px';
originalTable.style.position = "absolute";
//Make sure the first column isn't visiable in the orginal table
originalTable.style.left = "-" + fixedColumnWidth + 'px';
}
else
{
divContent.style.left = "0px";
}
if (vertical)
{
//Set the width of the fixed column
divHeaderColumn.style.width = (fixedColumnWidth + widthCosmeticAdd) + 'px';
//Make sure scrollbars are hidden
divHeaderColumn.style.overflow = "hidden";
//Set the zIndex to make sure this layer is above the orginal table
divHeaderColumn.style.zIndex = "99";
divHeaderColumn.style.position = "absolute";
divHeaderColumn.style.left = "0px";
//Move the column down - so that it starts below the header row
divHeaderColumn.style.top = (headerRow.offsetHeight + heightCosmeticAdd) + "px";
//Make sure the that when the user scoll down through the content - then the fixed column also scolls
addScrollSynchronization(divHeaderColumn, divContent, "vertical");
x = x - fixedColumnWidth;
}
if (horizontal)
{
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
}
divHeaderRowColumn.style.position = "absolute";
divHeaderRowColumn.style.left = "0px";
divHeaderRowColumn.style.top = "0px";
divHeaderRowColumn.style.width = (fixedColumnWidth + widthCosmeticAdd) + 'px';
divHeaderRowColumn.overflow = "hidden";
divHeaderRowColumn.style.zIndex = "100";
divHeaderRowColumn.style.backgroundColor = "#ffffff";
}
if (horizontal)
{
addScrollSynchronization(divHeaderRow, divContent, "horizontal");
}
if (horizontal || vertical)
{
window.onresize = ResizeScrollArea;
ResizeScrollArea();
}
}
}
function findFirstElementByType(startNode, search) {
if (! startNode.hasChildNodes()) return null;
var children = startNode.childNodes;
var i;
for (i = 0; i < children.length; i ++) {
if (children[i].nodeName.toUpperCase() == search.toUpperCase()) {
return children[i];
}
}
}
function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}
// Resize scroll area to window size.
function ResizeScrollArea()
{
var height = getInnerHeight() - findPosY(divHeaderRow) - 75;
if (!vertical)
{
height -= divHeaderRow.offsetHeight;
}
var width = getInnerWidth() - 50;
if (!horizontal)
{
width -= divHeaderColumn.offsetWidth;
}
var headerRowsWidth = 0;
if (divHeaderRowColumn != null)
{
headerRowsWidth = divHeaderRowColumn.offsetWidth;
}
// width
if (findFirstElementByType(divContent, 'table').offsetWidth > width)
{
divContent.style.width = Math.max(width - headerRowsWidth, 0) + 'px';
divContent.style.overflowX = "scroll";
divContent.style.overflowY = "auto";
}
else
{
divContent.style.width = x + 'px';
divContent.style.overflowX = "auto";
divContent.style.overflowY = "auto";
}
if (divHeaderRow != null)
{
divHeaderRow.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';
}
// height
if (findFirstElementByType(divContent, 'table').offsetHeight > height)
{
divContent.style.height = Math.max(height, 80) + 'px';
divContent.style.overflowY = "scroll";
}
else
{
divContent.style.height = y + 'px';
divContent.style.overflowY = "hidden";
}
if (divHeaderColumn != null)
{
divHeaderColumn.style.height = divContent.offsetHeight + 'px';
}
// check scrollbars
if (divContent.style.overflowY == "scroll")
{
divContent.style.width = (divContent.offsetWidth + 17) + 'px';
}
if (divContent.style.overflowX == "scroll")
{
divContent.style.height = (divContent.offsetHeight + 17) + 'px';
}
divContent.parentNode.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';
}
// next two functions from quirksmode.org
function getInnerHeight() {
var y;
if (self.innerHeight) // all except Explorer
{
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
y = document.body.clientHeight;
}
return y;
}
function getInnerWidth() {
var x;
if (self.innerWidth) // all except Explorer
{
x = self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth)
// Explorer 6 Strict Mode
{
x = document.documentElement.clientWidth;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
}
return x;
}
// ********************************************************************************
// Synchronize div elements when scrolling
// from http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
// ********************************************************************************
// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement, srcElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = srcElement.scrollTop;
};
}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);
fromElement._syncScroll = getOnScrollFunction(fromElement, toElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
if (toElement.addEventListener) {
toElement.addEventListener("scroll", fromElement._syncScroll, false);
} else {
toElement.attachEvent("onscroll", fromElement._syncScroll);
}
}
// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null) {
if (fromElement._syncTo.removeEventListener) {
fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll, false);
} else {
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
}
}
fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}
// browser detection routines from quirksmode.org
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
</pre>
Hope this is useful - it solved my problem 
|
| Sign In·View Thread·PermaLink | 5.00/5 (4 votes) |
|
|
|
|
|
|
|
|
|
|
|
|
I tried adding Kenneth's fix and it only partially works. I can scroll right to left, but not up and down. I wrapped the top row in a "thead" tag, and the rest of the rows in a "tbody" tag.
|
| Sign In·View Thread·PermaLink | 1.00/5 (1 vote) |
|
|
|
|
|
|
Scratch that, it works just fine. I just need to shrink the screen down to get the vertical scrollbar. Fantastic job, this is just what I was looking for.
|
| Sign In·View Thread·PermaLink | 1.00/5 (1 vote) |
|
|
|
|
|
|
Ok, I tried on IE and it's not working.
I mean. I want the table to have a fixed size (something like 500px) and the scroll to work.
But the table always show up big, the width and height on the css doesn't work when the javascript command 'CreateScrollHeader' is on (true).
What's wrong? I'm using IE7.
Tks
|
| Sign In·View Thread·PermaLink | 2.00/5 (1 vote) |
|
|
|
|
|
|
Thanks Karin for the above solution, it works great. However, i am facing a problem that events are not firing for the controls placed in fixed column headers. The page postback is happening but the event is not firing. The events for controls in non-fixed columns are firing. What could be the problem? Any help is appreciable...
modified on Tuesday, September 30, 2008 7:22 PM
|
| Sign In·View Thread·PermaLink | 1.50/5 (2 votes) |
|
|
|
|
|
|
Thanks Karin for a great solution. In my scollable table I have checkboxes and when you click on them I have a function that checks the status of the checkbox, i.e. checked or not. The problem that I am experiencing is that, even when a checkbox is checked, it returns false. All my checkboxes have a unique id. I'm not sure how to solve this, I will appreciate any ideas.
Thanks, Asha.
|
| Sign In·View Thread·PermaLink | 2.00/5 (1 vote) |
|
|
|
|
|
|
Because the javascipt duplicates the contents of the table to the top and left, multiple instances of your form elements will be created. This might result in different results when collecting the form elements when submitted.
Gilmore
|
| Sign In·View Thread·PermaLink | 2.00/5 (1 vote) |
|
|
|
|
|
|
Great piece of work here thanks! Does anyone have any ideas on altering this code so that you could freeze multiple left hand side columns? Haven't figured out how to do that using this solution yet.
Thanks!
|
| Sign In·View Thread·PermaLink | 2.60/5 (4 votes) |
|
|
|
|
|
|
First off I must say "WOW". This is some great code. But have you figured out yet how to modify this to freeze more than 1 column? It would be awesome to have the first 3-4 left columns to freeze as well. I've just spent about 3 weeks banging my head against the CSS wall trying to this and I'm just amazed at the speed. Thanks.
|
| Sign In·View Thread·PermaLink | 1.50/5 (2 votes) |
|
|
|
|
|
|
Here's the solution I used-
Nest a table in each of the first (fixed) cells with the columns you want.
You will need to use fixed width for these columns as the tables don't have any relation.
You'll also want to override the top / bottom border styles on these new columns so you don't get a double border.
|
| Sign In·View Thread·PermaLink | 1.00/5 (2 votes) |
|
|
|
|
|
|
This is what I want to do but I'm not sure how to implement what you suggest. I have 3 'title cells' to freeze on each row (the ones with class="reportRowHeader"). Here is the HTML section that is working now to freeze 1 cell on each row. Can you give me an example in this section to freeze the 3 columns? If you could give an example of how to do that with a dynamic number of columns (ie. all reportRowHeader columns) that completely solve my problem. Thanks.
<div id = "outerDiv">
<div id = "innerDiv">
<table class = "reportTable" cellspacing = "0">
<tr>
<td class = "reportCorner"> </td>
<td class = "reportCorner"> </td>
<td class = "reportCorner"> </td>
<td class = "reportColumnHeader">Albania</td>
<td class = "reportColumnHeader">Argentina</td>
<td class = "reportColumnHeader">Australia</td>
<td class = "reportColumnHeader">Denmark</td>
<td class = "reportColumnHeader">Finland</td>
<td class = "reportColumnHeader">Iceland</td>
<td class = "reportColumnHeader">Norway</td>
<td class = "reportColumnHeader">Sweden</td>
<td class = "reportColumnHeader">Number</td>
<td class = "reportColumnHeader">Percentage (of the whole sample)</td>
</tr>
<tr>
<td class = "reportRowHeader">Q.4 Legal Framework - What is the legal basis for the following?</td>
<td class = "reportRowHeader"> </td>
<td class = "reportRowHeader"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
</tr>
<tr>
<td class = "reportRowHeader"> </td>
<td class = "reportRowHeader">4.a The form and structure of the annual budget and related legislation</td>
<td class = "reportRowHeader"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
</tr>
<tr>
<td class = "reportRowHeader"> </td>
<td class = "reportRowHeader"> </td>
<td class = "reportRowHeader">Constitution</td>
<td class = "reportDataCell">1</td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell">1</td>
<td class = "reportDataCell">1</td>
<td class = "reportDataCell">1</td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell"> </td>
<td class = "reportDataCell">4</td>
<td class = "reportDataCell">50.0%</td>
</tr>
</table>
</div>
</div>
|
| Sign In·View Thread·PermaLink | 1.50/5 (2 votes) |
|
|
|
|
|
|
This solution is excellent! I have been trying to do this for some time. I was wondering about wrapping the text in the table cells, however. Before implementing your solution, my table looked very nice but was far less usable due to the non-fixed headers. Now my table works great but it contains some incredibly wide cells because the text is not wrapping.
I admit I am not a javascript expert by any means. Is there a relatively easy way to fix this and still maintain the fixed headers?
Thanks so much.
Andy
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hello all,
After some work, I have managed to get this script working in all of the major browsers, including IE, Firefox, Opera (buggy though), Konqueror, and Safari.
The only major difference from the original script is the table header MUST be enclosed in a <thead>, and the body must be in a <tbody> tag to work right.
var divContent = null;
var divHeaderRow = null;
var divHeaderColumn = null;
var divHeaderRowColumn = null;
var headerRowFirstColumn = null;
var x;
var y;
var horizontal = false;
var vertical = false;
// Copy table to top and to left
function CreateScrollHeader(content, scrollHorizontal, scrollVertical)
{
horizontal = scrollHorizontal;
vertical = scrollVertical;
divContent = content;
if(BrowserDetect.browser == "Konqueror") {
window.onload = CreateScrollHeaderActual;
} else {
CreateScrollHeaderActual();
}
}
function CreateScrollHeaderActual() {
if (divContent != null)
{
var widthCosmeticAdd = 0;
var heightCosmeticAdd = 0;
// browser specific cosmetic tweaks
if (BrowserDetect.browser == "Explorer") {
widthCosmeticAdd = 2;
heightCosmeticAdd = 2;
} else if(BrowserDetect.browser == "Opera" || BrowserDetect.browser == "Konqueror" || BrowserDetect.browser == "Safari") {
widthCosmeticAdd = 1;
heightCosmeticAdd = 1;
}
var originalTable = findFirstElementByType(divContent, 'table');
var headerRow = findFirstElementByType(originalTable, 'thead');
x = originalTable.offsetWidth;
y = originalTable.offsetHeight;
divHeaderRow = divContent.cloneNode(true);
if (horizontal)
{
divHeaderRow.style.height = (headerRow.offsetHeight + heightCosmeticAdd) + 'px';
divHeaderRow.style.overflow = "hidden";
divContent.parentNode.insertBefore(divHeaderRow, divContent);
originalTable.style.position = "absolute";
originalTable.style.top = "-" + (headerRow.offsetHeight + heightCosmeticAdd) + 'px';
y = y - headerRow.offsetHeight;
}
divHeaderRowColumn = divHeaderRow.cloneNode(true);
headerRowFirstColumn = findFirstElementByType(findFirstElementByType(headerRow,'tr'), 'th');
divHeaderColumn = divContent.cloneNode(true);
divContent.style.position = "relative";
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderColumn, divContent);
divContent.style.left = headerRowFirstColumn.offsetWidth + 'px';
originalTable.style.position = "absolute";
originalTable.style.left = "-" + headerRowFirstColumn.offsetWidth + 'px';
}
else
{
divContent.style.left = "0px";
}
if (vertical)
{
divHeaderColumn.style.width = (headerRowFirstColumn.offsetWidth + widthCosmeticAdd) + 'px';
divHeaderColumn.style.overflow = "hidden";
divHeaderColumn.style.zIndex = "99";
divHeaderColumn.style.position = "absolute";
divHeaderColumn.style.left = "0px";
divHeaderColumn.style.top = (headerRow.offsetHeight + heightCosmeticAdd) + "px";
addScrollSynchronization(divHeaderColumn, divContent, "vertical");
x = x - headerRowFirstColumn.offsetWidth;
}
if (horizontal)
{
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
}
divHeaderRowColumn.style.position = "absolute";
divHeaderRowColumn.style.left = "0px";
divHeaderRowColumn.style.top = "0px";
divHeaderRowColumn.style.width = (headerRowFirstColumn.offsetWidth + widthCosmeticAdd) + 'px';
divHeaderRowColumn.overflow = "hidden";
divHeaderRowColumn.style.zIndex = "100";
divHeaderRowColumn.style.backgroundColor = "#ffffff";
}
if (horizontal)
{
addScrollSynchronization(divHeaderRow, divContent, "horizontal");
}
if (horizontal || vertical)
{
window.onresize = ResizeScrollArea;
ResizeScrollArea();
}
}
}
function findFirstElementByType(startNode, search) {
if (! startNode.hasChildNodes()) return null;
var children = startNode.childNodes;
var i;
for (i = 0; i < children.length; i ++) {
if (children[i].nodeName.toUpperCase() == search.toUpperCase()) {
return children[i];
}
}
}
// Resize scroll area to window size.
function ResizeScrollArea()
{
var height = getInnerHeight() - findPosY(divHeaderRow) - 75;
if (!vertical)
{
height -= divHeaderRow.offsetHeight;
}
var width = getInnerWidth() - 50;
if (!horizontal)
{
width -= divHeaderColumn.offsetWidth;
}
var headerRowsWidth = 0;
// divContent.childNodes[0].style.width = x + 'px';
// divContent.childNodes[0].style.height = y + 'px';
if (divHeaderRowColumn != null)
{
headerRowsWidth = divHeaderRowColumn.offsetWidth;
}
// width
if (findFirstElementByType(divContent, 'table').offsetWidth > width)
{
divContent.style.width = Math.max(width - headerRowsWidth, 0) + 'px';
divContent.style.overflowX = "scroll";
divContent.style.overflowY = "auto";
}
else
{
divContent.style.width = x + 'px';
divContent.style.overflowX = "auto";
divContent.style.overflowY = "auto";
}
if (divHeaderRow != null)
{
divHeaderRow.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';
}
// height
if (findFirstElementByType(divContent, 'table').offsetHeight > height)
{
divContent.style.height = Math.max(height, 80) + 'px';
divContent.style.overflowY = "scroll";
}
else
{
divContent.style.height = y + 'px';
divContent.style.overflowY = "hidden";
}
if (divHeaderColumn != null)
{
divHeaderColumn.style.height = divContent.offsetHeight + 'px';
}
// check scrollbars
if (divContent.style.overflowY == "scroll")
{
divContent.style.width = (divContent.offsetWidth + 17) + 'px';
}
if (divContent.style.overflowX == "scroll")
{
divContent.style.height = (divContent.offsetHeight + 17) + 'px';
}
divContent.parentNode.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';
}
// next two functions from quirksmode.org
function getInnerHeight() {
var y;
if (self.innerHeight) // all except Explorer
{
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
y = document.body.clientHeight;
}
return y;
}
function getInnerWidth() {
var x;
if (self.innerWidth) // all except Explorer
{
x = self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth)
// Explorer 6 Strict Mode
{
x = document.documentElement.clientWidth;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
}
return x;
}
// ********************************************************************************
// Synchronize div elements when scrolling
// from http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
// ********************************************************************************
// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement, srcElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = srcElement.scrollTop;
};
}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);
fromElement._syncScroll = getOnScrollFunction(fromElement, toElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
if (toElement.addEventListener) {
toElement.addEventListener("scroll", fromElement._syncScroll, false);
} else {
toElement.attachEvent("onscroll", fromElement._syncScroll);
}
}
// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null) {
if (fromElement._syncTo.removeEventListener) {
fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll, false);
} else {
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
}
}
fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}
// browser detection routines from quirksmode.org
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
I hope this helps somebody, and thank you Karin for a great idea.
kdb
-- modified at 22:53 Tuesday 10th October, 2006
|
| Sign In·View Thread·PermaLink | 1.86/5 (4 votes) |
|
|
|
|
|
|
Hello all, thank you Karin for a wonderful script. I like this one much better than the one posted on your blog because it degrades gracefully if the javascript doesn't work or is disabled.
That said, I have modified your script to work in both firefox and IE. The modified code follows.
var divContent = null;
var divHeaderRow = null;
var divHeaderColumn = null;
var divHeaderRowColumn = null;
var headerRowFirstColumn = null;
var x;
var y;
var horizontal = false;
var vertical = false;
var childElement = 0;
function CreateScrollHeader(content, scrollHorizontal, scrollVertical)
{
horizontal = scrollHorizontal;
vertical = scrollVertical;
if (content != null)
{
divContent = content;
if (divContent.childNodes[childElement].tagName == null)
{
childElement = 1;
}
var headerRow = divContent.childNodes[childElement].childNodes[childElement];
x = divContent.childNodes[childElement].offsetWidth;
y = divContent.childNodes[childElement].offsetHeight;
divHeaderRow = divContent.cloneNode(true);
if (horizontal)
{
divHeaderRow.style.height = headerRow.offsetHeight + 'px';
divHeaderRow.style.overflow = "hidden";
divContent.parentNode.insertBefore(divHeaderRow, divContent);
divContent.childNodes[childElement].style.position = "absolute";
divContent.childNodes[childElement].style.top = "-" + headerRow.offsetHeight + 'px';
y = y - headerRow.offsetHeight;
}
divHeaderRowColumn = divHeaderRow.cloneNode(true);
headerRowFirstColumn = headerRow.childNodes[childElement].childNodes[childElement];
divHeaderColumn = divContent.cloneNode(true);
divContent.style.position = "relative";
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderColumn, divContent);
divContent.style.left = headerRowFirstColumn.offsetWidth + 'px';
divContent.childNodes[childElement].style.position = "absolute";
divContent.childNodes[childElement].style.left = "-" + headerRowFirstColumn.offsetWidth + 'px';
}
else
{
divContent.style.left = "0px";
}
if (vertical)
{
divHeaderColumn.style.width = headerRowFirstColumn.offsetWidth + 'px';
divHeaderColumn.style.overflow = "hidden";
divHeaderColumn.style.zIndex = "99";
divHeaderColumn.style.position = "absolute";
divHeaderColumn.style.left = "0px";
addScrollSynchronization(divHeaderColumn, divContent, "vertical");
x = x - headerRowFirstColumn.offsetWidth;
}
if (horizontal)
{
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
}
divHeaderRowColumn.style.position = "absolute";
divHeaderRowColumn.style.left = "0px";
divHeaderRowColumn.style.top = "0px";
divHeaderRowColumn.style.width = headerRowFirstColumn.offsetWidth + 'px';
divHeaderRowColumn.overflow = "hidden";
divHeaderRowColumn.style.zIndex = "100";
divHeaderRowColumn.style.backgroundColor = "#ffffff";
}
if (horizontal)
{
addScrollSynchronization(divHeaderRow, divContent, "horizontal");
}
if (horizontal || vertical)
{
window.onresize = ResizeScrollArea;
ResizeScrollArea();
}
}
}
function ResizeScrollArea()
{
var height = document.documentElement.clientHeight - 120;
if (!vertical)
{
height -= divHeaderRow.offsetHeight;
}
var width = document.documentElement.clientWidth - 50;
if (!horizontal)
{
width -= divHeaderColumn.offsetWidth;
}
var headerRowsWidth = 0;
divContent.childNodes[childElement].style.width = x + 'px';
divContent.childNodes[childElement].style.height = y + 'px';
if (divHeaderRowColumn != null)
{
headerRowsWidth = divHeaderRowColumn.offsetWidth;
}
if (divContent.childNodes[childElement].offsetWidth > width)
{
divContent.style.width = Math.max(width - headerRowsWidth, 0) + 'px';
divContent.style.overflowX = "scroll";
divContent.style.overflowY = "auto";
}
else
{
divContent.style.width = x + 'px';
divContent.style.overflowX = "auto";
divContent.style.overflowY = "auto";
}
if (divHeaderRow != null)
{
divHeaderRow.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';
}
if (divContent.childNodes[childElement].offsetHeight > height)
{
divContent.style.height = Math.max(height, 80) + 'px';
divContent.style.overflowY = "scroll";
}
else
{
divContent.style.height = y + 'px';
divContent.style.overflowY = "hidden";
}
if (divHeaderColumn != null)
{
divHeaderColumn.style.height = divContent.offsetHeight + 'px';
}
if (divContent.style.overflowY == "scroll")
{
divContent.style.width = (divContent.offsetWidth + 17) + 'px';
}
if (divContent.style.overflowX == "scroll")
{
divContent.style.height = (divContent.offsetHeight + 17) + 'px';
}
divContent.parentNode.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';
}
function getOnScrollFunction(oElement, srcElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = srcElement.scrollTop;
};
}
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);
fromElement._syncScroll = getOnScrollFunction(fromElement, toElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
if (toElement.addEventListener) {
toElement.addEventListener("scroll", fromElement._syncScroll, false);
} else {
toElement.attachEvent("onscroll", fromElement._syncScroll);
}
}
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null) {
if (fromElement._syncTo.removeEventListener) {
fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll, false);
} else {
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
}
}
fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}
This new code expects you to have a thead tag surrounding your top table headers, this allows you to split up more of the table than just the very top row. If you don't want this, you will have to modify lines 27 and 45 to be:
var headerRow = divContent.childNodes[childElement].childNodes[childElement].childNodes[0];
headerRowFirstColumn = headerRow.childNodes[childElement];
Enjoy.
kdb
|
| Sign In·View Thread·PermaLink | 3.25/5 (4 votes) |
|
|
|
|
|
|
|
|
|
Hi,
Your article is very good. Thanks god I found yours.
But until now, I had problem with this when using Ctrl-F to find some text on the grid.
The grid strangely behaves, just try it yourself. I'm guess this issue occurs because you duplicate the content table into 2->4, and then when IE try to find a specific text, it find on the original one either on the others copied ones.
Does anyone have the same problem as me?
Hope to receive help from all of you.
Thanks
|
| Sign In·View Thread·PermaLink | 1.83/5 (3 votes) |
|
|
|
|
|
|
I need that when each line of the table will be clicked, a new line that this occults either shown, but am not obtaining therefore I occur error of Javascript, what I could make?
below, fragment my code:
<script>
function view(){
subitem.style.display= }
</script>
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Why do you copy the entire tables? Why not make a solution where only the header row gets copied for the header and the frozen columns get copied for the left div? And all this could be packaged real nice into a server control.
Jason Gilley
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Jason,
Sounds to me like you have the makings of a CodeProject article. Go for it, dude! Show us how to do what you said.
Dwight
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
I copy the entire table because then I do not have to care about the width of the columns. Otherwise the content in the header row might be smaller than the content in the body (or the other way round), then I would have to synchronize them. As it is not possible to set the width of a TD I would have to insert a DIV into each TD and set the width of the DIV.
I did something similar in my cross browser solution (http://www.cubido.at/Blog/tabid/176/EntryID/94/Default.aspx[^]) but for large tables synchronizing the columns takes more time than copying the entire table (only in Internet Explorer).
Visit my blog at http://www.cubido.at/karin
|
| Sign In·View Thread·PermaLink | 5.00/5 (1 vote) |
|
|
|
|
|
|
I see what your talking about with the maximum column width, but you can set the size of a td also by using a 1 pixel transparent gif that you set a width to instead of a div, and the browser cant size this down on you.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
I decided not to use images because:
1) it would destroy my layout, 1px height is small but it is still visible, so it would be necessary to change the style (padding, margin, ...) for TD's with images to make them look like normal TD's
2) in the first column of the first row 2 images would be necessary to adjust width and height in one cell, 1 image for width and height is not possible because the space is required for the content of the cell, this would cause some more problems with layout
Visit my blog at http://www.cubido.at/karin
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
General 
News 
Question 
Answer 
Joke 
Rant 
Admin 
