Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks
Reload this Page Freeze columns in a table

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-01-2009, 09:36 AM   PM User | #1
Rita Negi
New to the CF scene

 
Join Date: Sep 2009
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Rita Negi is an unknown quantity at this point
Question Freeze columns in a table
can i have the code to freeze the column of a table on a mouse click event
it's required urgently
kindly help
Rita Negi is offline   Reply With Quote
Old 09-01-2009, 12:58 PM   PM User | #2
Spudhead
Senior Coder

 
Spudhead's Avatar
 
Join Date: Jun 2002
Location: London, UK
Posts: 1,856
Thanks: 8
Thanked 110 Times in 109 Posts
Spudhead is on a distinguished road
"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.
Spudhead is offline   Reply With Quote
Old 09-01-2009, 01:28 PM   PM User | #3
ohgod
Regular Coder

 
ohgod's Avatar
 
Join Date: Jun 2008
Location: Ohio
Posts: 579
Thanks: 6
Thanked 69 Times in 69 Posts
ohgod is on a distinguished road
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.
ohgod is offline   Reply With Quote
Old 09-02-2009, 12:08 PM   PM User | #4
Rita Negi
New to the CF scene

 
Join Date: Sep 2009
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Rita Negi is an unknown quantity at this point
This is my code
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>
Rita Negi is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 11:10 AM.
Advertisement
Log in to turn off these ads.