 |
|
|
Can somebody tell me how to fix multiple column.
i've tried something but second column is getting repeated twice.
|
|
|
|
|
|
|
I download your script and it's contains error in JS
|
|
|
|
|
|
|
I need code for first column has to be fixed and the horizontal scrool has to start from second column
Ref
Fixed headers in large HTML tables[^]
In your fixed header link third image code I need please provide me
|
|
|
|
|
|
|
Thanks for this neat solution first! It's so good to find this one.
I implemente it in my code, and it solves my problem with gridding. The only problem so far is the JS call -"CreateScrollHeader" at the end of htm page only gets executed if I call "window reload" from code, not executed for "refresh" button in browser. As the result, the header and left column are fixed only when I click "refresh" button in code, not from "refresh" in browser. I thought it was due to my browser setting, but after enabling almost all settings of brower, it still behaves the same.
Any idea how to force "refresh" of broswer to load the whole page without skipping the last "CreateScrollHeader" call? I use IE7.
I used to use "Z-INDEX+scroll table calculation" solution. But because my displayed table is very long, wide, and containing input areas such as checkbox and number on each row, I encountered performance issue with this solution. It took a long time(half minute) to check on/off a checkbox and type any character in number input area. So I gave up this one.
Your solution is fairly fast for my big table. The only bit slowness is while I resize the whole window. But I won't expect gridding by JAVA is as good as excel until more and better libraries are developed for this purpose.
|
|
|
|
|
|
|
Found the reason: "iframe" is the reason for this. It should be fine as long as getting rid of iframe and frame.
|
|
|
|
|
|
|
"search" will mess up the first row(header row).
If the table includes checkbox as a column, "table copy" used here will make "uncheck checkbox" not working, as someone mentioned in reply below.
|
|
|
|
|
|
|
Great script, but I'm searching a way to set height and width of the table.
Any way I've tryed, it didn't work.
Any suggestion? 
|
|
|
|
|
|
|
I've found a way: simply give "display:block" at the table and it will take the right dimensions.
Thanks anyway 
|
|
|
|
|
|
|
I have been working on Scrollable tables from past 2 years. I have implemented fix header table using CSS and JavaScript.
Scrollable Table in IE
Scrollable in All
Please let me know if you have any suggestions for me 
Regards,
Shahib
|
|
|
|
|
|
|
nice creation...what i need might be solved
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
Hi.
This mostly works - except the first column and top row don't scroll when the table is scrolled.
modified on Friday, July 9, 2010 11:40 AM
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
Very Good Job!
Thx
|
|
|
|
|
|
|
It works very well!
Thank you very much! To you and Kenneth too.
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
It is not working in case of Mozzila firefox, Can anyone help,
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
I did tried lots of script and JQuery library, but if it's a big table with lots of rows few of this scripts make it slow, few script does not works in some browser. At last I found the best way to create the scrollable table with fixed row or column. I am using it in my huge ERP application, it is really fast and works great on Mozilla Firefox, IE, Opera and Google chrome. To see the detail please visit to
http://ektaraval.blogspot.com/2011/05/creating-scrollable-table-with-fixed.html
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
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!
|
|
|
|
|
|
|
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.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Rant 
Admin