...
PDA

Freeze columns in a table

Rita Negi
09-01-2009, 09:36 AM
can i have the code to freeze the column of a table on a mouse click event
it's required urgently
kindly help
Spudhead
09-01-2009, 12:58 PM
"freeze"?

If you show us what you've got so far, and explain in more detail what it is you need to happen, then we might be able to help you.
ohgod
09-01-2009, 01:28 PM
shoot, you could even go so far as to tell us what framework you're using.


i want a bacon and egg sandwich, and it also is required urgently.
Rita Negi
09-02-2009, 12:08 PM
i want thw first header fixed and the first column fixed

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Freeze Panes -testi</title>
<style type="text/css">
body { margin: 0; height: 100% }
.b { border-collapse: collapse }
.b td { border: 1px solid #f80; vertical-align: top }
p { margin: 1px; padding: 0; font-size: 9px; font-family: Arial }
p.c { text-align: center; font-size: 12px }
p span { font-size: 12px; white-space:nowrap; color: #888 }
/* TopLeft fixed corner */
td.bg101 { background-color: #ffc }
/* Top fixed rows */
td.bg000 { background-color: #f8c }
td.bg001 { background-color: #f4c }
/* Left fixed rows */
td.bg110 { background-color: #fcc }
td.bg111 { background-color: #fcf }
/* The scrollable content area */
td.bg010 { background-color: #fff }
td.bg011 { background-color: #ff4 }
</style>
<script type="text/javascript"><!--
var ieBug = ((document.all) && (!window.opera)); // IE doesn't really handle fixed elements well :)
var fpElement = false;
function fpCW() { return document.documentElement ? document.documentElement.clientWidth : document.clientWidth; }
function fpCH() { return document.documentElement ? document.documentElement.clientHeight : document.clientHeight; }
function fpTopLeft(elementNode, iTop, iLeft) {
elementNode.style.top = (iTop)+"px";
elementNode.style.left = (iLeft)+"px";
}
function fpDefaults(elementNode) {
elementNode.style.position = ieBug ? "absolute" : "fixed";
fpTopLeft(elementNode,0,0);
return elementNode;
}
function fpClone(elementNode, cloneZindex) {
var clone = fpDefaults(elementNode.cloneNode(true));
clone.style.background = "#fff";
clone.style.overflow = "hidden";
clone.style.border = "none";
clone.style.zIndex = cloneZindex;
return clone;
}
function fpInitFreezePanes(fpTableElementId, fpTableContainerDivElementId, fpPivotCellId, fpDisableBodyScrollbars) {
if (fpElement !== false) {
alert("Page already contains an element with fixed panes.");
} else {
var fpTableElement = document.getElementById(fpTableElementId);
var fpTableContainerDivElement = document.getElementById(fpTableContainerDivElementId);
var fpPivotCell = document.getElementById(fpPivotCellId);
if ((!fpTableElement) || (!fpTableContainerDivElement) || (!fpPivotCell)) {
alert("Unable to find table, container or pivoting cell?");
} else {
fpElement = fpTableContainerDivElement;
if (fpDisableBodyScrollbars) {
var x = document.getElementsByTagName("body")[0];
x.style.overflow = "hidden";
x = document.getElementsByTagName("html")[0];
x.style.overflow = "hidden";
}
fpTableContainerDivElement = fpDefaults(fpTableContainerDivElement);
fpTableContainerDivElement.style.width = (fpCW()-2)+"px";
fpTableContainerDivElement.style.height = (fpCH()-2)+"px";
fpTableContainerDivElement.fpPT = fpPivotCell.offsetTop;
fpTableContainerDivElement.fpPL = fpPivotCell.offsetLeft;

var copy1 = fpClone(fpTableContainerDivElement, 4);
copy1.style.width = (fpTableContainerDivElement.fpPL)+"px";
copy1.style.height = (fpTableContainerDivElement.fpPT)+"px";
var copy2 = fpClone(fpTableContainerDivElement, 3);
copy2.style.width = (fpTableElement.offsetWidth)+"px";
copy2.style.height = (fpTableContainerDivElement.fpPT)+"px";
var copy3 = fpClone(fpTableContainerDivElement, 2);
copy3.style.width = (fpTableContainerDivElement.fpPL)+"px";
copy3.style.height = (fpTableElement.offsetHeight)+"px";

fpTableContainerDivElement.style.zIndex = 1;
fpTableContainerDivElement.appendChild(copy1);
fpTableContainerDivElement.copy1 = copy1;
fpTableContainerDivElement.appendChild(copy2);
fpTableContainerDivElement.copy2 = copy2;
fpTableContainerDivElement.appendChild(copy3);
fpTableContainerDivElement.copy3 = copy3;
fpTableContainerDivElement.repositioning = false;
fpTableContainerDivElement.oldST = -1;
fpTableContainerDivElement.oldSL = -1;
fpTableContainerDivElement.style.overflow = "scroll";

/* JUST SOME STYLING HERE */
copy1.style.borderRight = "1px dashed #000";
copy1.style.borderCollapse = "collapse";
copy2.style.borderBottom = "1px dashed #000";
copy2.style.borderCollapse = "collapse";
copy3.style.borderRight = "1px dashed #000";
copy3.style.borderCollapse = "collapse";
/* JUST SOME STYLING HERE */

// if (ieBug) {
if (fpTableContainerDivElement.style.setExpression) {
function fpIeBugFix(elementNode, containerNodeId, arrayOfExpressionsToSet) {
for (var i in arrayOfExpressionsToSet) {
if (arrayOfExpressionsToSet[i][2]) {
elementNode.style.setExpression(arrayOfExpressionsToSet[i][0], arrayOfExpressionsToSet[i][1]+"document.getElementById('"+containerNodeId+"')."+arrayOfExpressionsToSet[i][2]+"+'px'");
} else {
elementNode.style.setExpression(arrayOfExpressionsToSet[i][0], arrayOfExpressionsToSet[i][1]);
}
}
}
fpIeBugFix(fpTableContainerDivElement.copy3, fpTableContainerDivElementId, [["top","","scrollTop"],["left","","scrollLeft"],["marginTop","-","scrollTop"]]);
fpIeBugFix(fpTableContainerDivElement.copy2, fpTableContainerDivElementId, [["top","","scrollTop"],["left","","scrollLeft"],["marginLeft","-","scrollLeft"]]);
fpIeBugFix(fpTableContainerDivElement.copy1, fpTableContainerDivElementId, [["top","","scrollTop"],["left","","scrollLeft"]]);
fpIeBugFix(fpTableContainerDivElement, fpTableContainerDivElementId, [["width","fpCW()+'px'"],["height","fpCH()+'px'"]]);
document.recalc(true);
} else {
fpElement.onmousemove = fpElement.onscroll = function() {
if (!this.repositioning) {
this.repositioning = true;
var st = this.scrollTop;
var sl = this.scrollLeft;
if ((this.oldST != st) || (this.oldSL != sl)) {
this.oldST = st;
this.oldSL = sl;
// this.copy3.previousDisplay = this.copy3.style.display;
// this.copy3.style.display = "none";
this.copy3.style.marginTop = "-"+(st)+"px";
// this.copy3.style.display = this.copy3.previousDisplay;
// this.copy2.previousDisplay = this.copy2.style.display;
// this.copy2.style.display = "none";
this.copy2.style.marginLeft = "-"+(sl)+"px";
// this.copy2.style.display = this.copy2.previousDisplay;
}
fpElement.repositioning = false;
}
};
window.onresize = function() {
fpElement.style.width = fpCW()+"px";
fpElement.style.height = fpCH()+"px";
}
}
}
}
}
// --></script>
</head>
<body onLoad="fpInitFreezePanes('fp','fpdiv','pivot', true);">
<div id="fpdiv" class="freeze_panes">
<table id="fp" class="b">
<tr>
<td rowspan="2" class="bg101"><p class="c"><span>Account Name</span></p></td>
<td class="bg001"><p class="c">First Name</p></td>
<td class="bg001"><p class="c">Last Name</p></td>
<td class="bg001"><p class="c">Contact ID</p></td>
<td class="bg001"><p class="c">Assistant Name</p></td>
<td class="bg001"><p class="c">Assistant Phone</p></td>
<td class="bg001"><p class="c">Created By</p></td>
<td class="bg001"><p class="c">Created Date</p></td>
<td class="bg001"><p class="c">Credit Score</p></td>
<td class="bg001"><p class="c">Current Investment</p></td>
<td class="bg001"><p class="c">Date Of Birth</p></td>
<td class="bg001"><p class="c">Degree</p></td>
<td class="bg001"><p class="c">Department</p></td>
<td class="bg001"><p class="c">Description</p></td>
<td class="bg001"><p class="c">Email</p></td>
<td class="bg001"><p class="c">External ID</p></td>
<td class="bg001"><p class="c">Gender</p></td>
<td class="bg001"><p class="c">Marital Status</p></td>
<td class="bg001"><p class="c">Manager Name</p></td>
<td class="bg001"><p class="c">Modified</p></td>
<td class="bg001"><p class="c">Homephone</p></td>
</tr>
<tr>
<td class="bg000"><p class="c">R=2,C=2</p></td>
<td class="bg000"><p class="c">R=2,C=3</p></td>
<td class="bg000"><p class="c">R=2,C=4</p></td>
<td class="bg000"><p class="c">R=2,C=5</p></td>
<td class="bg000"><p class="c">R=2,C=6</p></td>
<td class="bg000"><p class="c">R=2,C=7</p></td>
<td class="bg000"><p class="c">R=2,C=8</p></td>
<td class="bg000"><p class="c">R=2,C=9</p></td>
<td class="bg000"><p class="c">R=2,C=10</p></td>
<td class="bg000"><p class="c">R=2,C=11</p></td>
<td class="bg000"><p class="c">R=2,C=12</p></td>
<td class="bg000"><p class="c">R=2,C=13</p></td>
<td class="bg000"><p class="c">R=2,C=14</p></td>
<td class="bg000"><p class="c">R=2,C=15</p></td>
<td class="bg000"><p class="c">R=2,C=16</p></td>
<td class="bg000"><p class="c">R=2,C=17</p></td>
<td class="bg000"><p class="c">R=2,C=18</p></td>
<td class="bg000"><p class="c">R=2,C=19</p></td>
<td class="bg000"><p class="c">R=2,C=20</p></td>
<td class="bg000"><p class="c">R=2,C=21</p></td>

</tr>
<tr>
<td class="bg111"><p class="c">R=3,C=1</p></td>
<td id="pivot" class="bg011"><p class="c">R=3,C=2</p></td>
<td class="bg011"><p class="c">R=3,C=3</p></td>
<td class="bg011"><p class="c">R=3,C=4</p></td>
<td class="bg011"><p class="c">R=3,C=5</p></td>
<td class="bg011"><p class="c">R=3,C=6</p></td>
<td class="bg011"><p class="c">R=3,C=7</p></td>
<td class="bg011"><p class="c">R=3,C=8</p></td>
<td class="bg011"><p class="c">R=3,C=9</p></td>
<td class="bg011"><p class="c">R=3,C=10</p></td>
<td class="bg011"><p class="c">R=3,C=11</p></td>
<td class="bg011"><p class="c">R=3,C=12</p></td>
<td class="bg011"><p class="c">R=3,C=13</p></td>
<td class="bg011"><p class="c">R=3,C=14</p></td>
<td class="bg011"><p class="c">R=3,C=15</p></td>
<td class="bg011"><p class="c">R=3,C=16</p></td>
<td class="bg011"><p class="c">R=3,C=17</p></td>
<td class="bg011"><p class="c">R=3,C=18</p></td>
<td class="bg011"><p class="c">R=3,C=19</p></td>
<td class="bg011"><p class="c">R=3,C=20</p></td>
<td class="bg011"><p class="c">R=3,C=21</p></td>

</tr>
<tr>
<td class="bg110"><p class="c">R=4,C=1</p></td>
<td class="bg010"><p class="c">R=4,C=2</p></td>
<td class="bg010"><p class="c">R=4,C=3</p></td>
<td class="bg010"><p class="c">R=4,C=4</p></td>
<td class="bg010"><p class="c">R=4,C=5</p></td>
<td class="bg010"><p class="c">R=4,C=6</p></td>
<td class="bg010"><p class="c">R=4,C=7</p></td>
<td class="bg010"><p class="c">R=4,C=8</p></td>
<td class="bg010"><p class="c">R=4,C=9</p></td>
<td class="bg010"><p class="c">R=4,C=10</p></td>
<td colspan="2" class="bg010"><p class="c">R=4,C=11</p></td>
<td class="bg010"><p class="c">R=4,C=13</p></td>
<td class="bg010"><p class="c">R=4,C=14</p></td>
<td class="bg010"><p class="c">R=4,C=15</p></td>
<td class="bg010"><p class="c">R=4,C=16</p></td>
<td class="bg010"><p class="c">R=4,C=17</p></td>
<td class="bg010"><p class="c">R=4,C=18</p></td>
<td class="bg010"><p class="c">R=4,C=19</p></td>
<td class="bg010"><p class="c">R=4,C=20</p></td>
<td class="bg010"><p class="c">R=4,C=21</p></td>
</tr>
<tr>
<td class="bg111"><p class="c">R=5,C=1</p></td>
<td class="bg011"><p class="c">R=5,C=2</p></td>
<td class="bg011"><p class="c">R=5,C=3</p></td>
<td class="bg011"><p class="c">R=5,C=4</p></td>
<td class="bg011"><p class="c">R=5<br>C=5</p></td>
<td class="bg011"><p class="c">R=5,C=6</p></td>
<td class="bg011"><p class="c">R=5,C=7</p></td>
<td class="bg011"><p class="c">R=5,C=8</p></td>
<td class="bg011"><p class="c">R=5,C=9</p></td>
<td class="bg011"><p class="c">R=5,C=10</p></td>
<td class="bg011"><p class="c">R=5,C=11</p></td>
<td class="bg011"><p class="c">R=5,C=12</p></td>
<td class="bg011"><p class="c">R=5,C=13</p></td>
<td class="bg011"><p class="c">R=5,C=14</p></td>
<td class="bg011"><p class="c">R=5,C=15</p></td>
<td class="bg011"><p class="c">R=5,C=16</p></td>
<td class="bg011"><p class="c">R=5,C=17</p></td>
<td class="bg011"><p class="c">R=5,C=18</p></td>
<td class="bg011"><p class="c">R=5,C=19</p></td>
<td class="bg011"><p class="c">R=5,C=20</p></td>
<td colspan="2" class="bg011"><p class="c">R=5,C=21</p></td>
</tr>
<tr>
<td class="bg110"><p class="c">R=6,C=1</p></td>
<td class="bg010"><p class="c">R=6,C=2</p></td>
<td class="bg010"><p class="c">R=6,C=3</p></td>
<td class="bg010"><p class="c">R=6,C=4</p></td>
<td class="bg010"><p class="c">R=6,C=5</p></td>
<td class="bg010"><p class="c">R=6,C=6</p></td>
<td class="bg010"><p class="c">R=6,C=7</p></td>
<td class="bg010"><p class="c">R=6,C=8</p></td>
<td class="bg010"><p class="c">R=6,C=9</p></td>
<td class="bg010"><p class="c">R=6,C=10</p></td>
<td class="bg010"><p class="c">R=6,C=11</p></td>
<td class="bg010"><p class="c">R=6,C=12</p></td>
<td class="bg010"><p class="c">R=6,C=13</p></td>
<td class="bg010"><p class="c">R=6,C=14</p></td>
<td class="bg010"><p class="c">R=6,C=15</p></td>
<td class="bg010"><p class="c">R=6,C=16</p></td>
<td class="bg010"><p class="c">R=6,C=17</p></td>
<td class="bg010"><p class="c">R=6,C=18</p></td>
<td class="bg010"><p class="c">R=6,C=19</p></td>
<td class="bg010"><p class="c">R=6,C=20</p></td>
<td colspan="2" class="bg010"><p class="c">R=6,C=21</p></td>
</tr>
<tr>
<td class="bg111"><p class="c">R=7,C=1</p></td>
<td class="bg011"><p class="c">R=7,C=2</p></td>
<td class="bg011"><p class="c">R=7,C=3</p></td>
<td class="bg011"><p class="c">R=7,C=4</p></td>
<td class="bg011"><p class="c">R=7,C=5</p></td>
<td class="bg011"><p class="c">R=7,C=6</p></td>
<td class="bg011"><p class="c">R=7,C=7</p></td>
<td colspan="2" class="bg011"><p class="c">R=7,C=8</p></td>
<td class="bg011"><p class="c">R=7,C=10</p></td>
<td class="bg011"><p class="c">R=7,C=11</p></td>
<td class="bg011"><p class="c">R=7,C=12</p></td>
<td class="bg011"><p class="c">R=7,C=13</p></td>
<td class="bg011"><p class="c">R=7,C=14</p></td>
<td class="bg011"><p class="c">R=7,C=15</p></td>
<td class="bg011"><p class="c">R=7,C=16</p></td>
<td class="bg011"><p class="c">R=7,C=17</p></td>
<td class="bg011"><p class="c">R=7,C=18</p></td>
<td class="bg011"><p class="c">R=7,C=19</p></td>
<td class="bg011"><p class="c">R=7,C=20</p></td>
<td class="bg011"><p class="c">R=7,C=21</p></td>
</tr>
</table>
</div>
</body>
</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum