Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    "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.

  • #3
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •