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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Freeze Row header and first column

    Hi all!
    I am trying to implement the "Freeze pane" feature in javascript as it is in excel.
    I am almost there but am not able to get one last thing.
    The row header freezing is achieved first column freezing is also achieved. However, the top left column cell (which is supposed to stay frozed during both horizontal and vertical scroll) is not frozen.

    Prompt help is highly appreciated!
    Please find the html file and the js file being used.

    Thanks a bunch!
    Ree
    Attached Files Attached Files

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Tried your solution in Firefox, Safari and Chrome. Does not work at all.

    Javascript error:
    TypeError: Result of expression 'document.getElementById(sSheet)' [null] is not an object. Line 38.

    Why don't you just use css and apply position:fixed to everything that should not scroll?

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am actually using javascript in a reporting tool called Cognos. I am not too familiar with CSS. This script runs fine in IE6 but gives the problem as below in IE8. Since the users are using IE8, I never tried it in any other browser.
    Any guidance as to what can I do to make it work?

    I tried changing the z-axis but no result.

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

    Unhappy

    Any help please?? I am struggling to get it done !!

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    I had a go at it: It's actually rather complex, since we want the "header columns" both left and top to only be "fixed" in one scroll direction, further more we want to snap the scroll to whole cells...

    And of course I want my solution to be performance-effective and cross-browser compatible.

    I came this far:
    1) We should NOT scroll the actual table. We should scroll a "dummy div" as large as the table and then manipulate the table or table position from this.
    2) Having the table inside a fixed div with overflow:hidden and then setting negative margins on the table might work, but for that we need separate "header" elements. They won't sync their width & height automatically since they are not part of the table. Also this seems to be sub-optimal performance in IE (I get flickering border lines...)
    3) So a better solution would be to collapse/hide rows or cols depending on scroll position. Collapsing rows is fast. Collapsing columns is slow (if you do it by hidding them cell by cell...)


  •  

    Posting Permissions

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