locked
SharePoint 2013 List Header Row Freeze RRS feed

  • Question

  • Hello, I've a long list in my site. When I scroll down then the headers are not appearing. That's why every time users should scroll-up and down. As I researched I've found a script which freezes the header row even you scroll-down. 

    However, I am a very beginner in SharePoint developing. The script which I apply is below. When I apply then it doesn't make any sense. I've just changed the table id and inserted into a content editor. Can you tell me that what I'm doing wrong?

    Thanks in advance.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    
    <style type="text/css">
    <!--
    .DataGridFixedHeader { ; top: expression(this.offsetParent.scrollTop);}
    -->
    </style>
    
    <script type="text/javascript">
    $(function(){
    var $table = $("TABLE[ID^='{4C9CFF20-B467-4E10-820C-0A132442CF98}']:first", "#MSO_ContentTable");
    
    <!--WRAP TABLE IN SCROLL PANE-->
    $table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: 420px'></DIV>");
    <!--FROZEN HEADER ROW-->
    $("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
    });
    </script>


    KAdir


    • Edited by Omnipotent06 Wednesday, September 4, 2013 9:07 AM
    Wednesday, September 4, 2013 8:31 AM

Answers

  • You could also try the Script from my blog where the header row keeps sticking at the top when it scrolls out of view (pictures and code in the post): 

    http://spoodoo.com/sticky-headers-in-sharepoint-2013/

    Best Regards


    • Proposed as answer by Krishnan P Tuesday, October 28, 2014 5:50 PM
    • Marked as answer by Dennis Guo Wednesday, October 29, 2014 1:02 AM
    • Edited by Daniel Stölzner Tuesday, June 21, 2016 11:40 AM
    Tuesday, January 7, 2014 4:20 PM
  • Hi,

    According to your description, I understand that you want to fix table header row in SharePoint 2013.

    The attribute  " top:expression (this.offsetParent.scrollTop)"  may cause compatibility issue.

    The code below for your reference:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //WikiPageList is a list name TTNListScroll("WikiPageList"); }); </script> <script type="text/javascript"> function TTNListScroll(listName) { var SummaryName = listName; var TTNmyTable; var TTNListDiv = document.createElement('div'); var TTNHeadingDiv = document.createElement('div'); var tables = document.getElementsByTagName("TABLE"); for (var i = 0; i < tables.length; i++) { if (tables[i].summary == SummaryName) { TTNmyTable = tables[i]; break; } } TTNHeadingDiv.appendChild(TTNmyTable.cloneNode(true)); TTNHeadingDiv.id = "TTNheading"; TTNListDiv.appendChild(TTNmyTable.cloneNode(true)); TTNListDiv.id = "TTNlist"; TTNListDiv.width = "100%"; // udpate the page var TTNnode = TTNmyTable.parentNode; TTNnode.replaceChild(TTNHeadingDiv, TTNmyTable); TTNnode.appendChild(TTNListDiv); // hide the heading row of the main list TTNListDiv.childNodes[0].rows[0].style.visibility = 'hidden'; // make the DIV for the heading the same width as the main list TTNHeadingDiv.childNodes[0].style.width = TTNListDiv.childNodes[0].offsetWidth; } </script> <style type="text/css"> #TTNheading { HEIGHT: 28px;

    } #TTNlist { OVERFLOW-X: auto; OVERFLOW-Y: scroll !important; HEIGHT: 200px } </style>

    The code reference:

    http://techtrainingnotes.blogspot.in/2013/03/freezing-title-row-of-sharepoint-2010.html

    I have done the test, it works fine for me.

    More information:

    Freeze Header Row and First Columns in a List

    http://social.technet.microsoft.com/Forums/sharepoint/en-US/bab16d46-f145-4bd3-a1da-9db461fc6a8d/freeze-header-row-and-first-columns-in-a-list

    Best Regards

    Dennis Guo
    TechNet Community Support




    • Marked as answer by Miles Li - MSFT Wednesday, September 11, 2013 8:55 AM
    • Edited by Dennis Guo Friday, May 30, 2014 7:53 AM
    Thursday, September 5, 2013 1:20 PM

All replies

  • Hi,

    According to your description, I understand that you want to fix table header row in SharePoint 2013.

    The attribute  " top:expression (this.offsetParent.scrollTop)"  may cause compatibility issue.

    The code below for your reference:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //WikiPageList is a list name TTNListScroll("WikiPageList"); }); </script> <script type="text/javascript"> function TTNListScroll(listName) { var SummaryName = listName; var TTNmyTable; var TTNListDiv = document.createElement('div'); var TTNHeadingDiv = document.createElement('div'); var tables = document.getElementsByTagName("TABLE"); for (var i = 0; i < tables.length; i++) { if (tables[i].summary == SummaryName) { TTNmyTable = tables[i]; break; } } TTNHeadingDiv.appendChild(TTNmyTable.cloneNode(true)); TTNHeadingDiv.id = "TTNheading"; TTNListDiv.appendChild(TTNmyTable.cloneNode(true)); TTNListDiv.id = "TTNlist"; TTNListDiv.width = "100%"; // udpate the page var TTNnode = TTNmyTable.parentNode; TTNnode.replaceChild(TTNHeadingDiv, TTNmyTable); TTNnode.appendChild(TTNListDiv); // hide the heading row of the main list TTNListDiv.childNodes[0].rows[0].style.visibility = 'hidden'; // make the DIV for the heading the same width as the main list TTNHeadingDiv.childNodes[0].style.width = TTNListDiv.childNodes[0].offsetWidth; } </script> <style type="text/css"> #TTNheading { HEIGHT: 28px;

    } #TTNlist { OVERFLOW-X: auto; OVERFLOW-Y: scroll !important; HEIGHT: 200px } </style>

    The code reference:

    http://techtrainingnotes.blogspot.in/2013/03/freezing-title-row-of-sharepoint-2010.html

    I have done the test, it works fine for me.

    More information:

    Freeze Header Row and First Columns in a List

    http://social.technet.microsoft.com/Forums/sharepoint/en-US/bab16d46-f145-4bd3-a1da-9db461fc6a8d/freeze-header-row-and-first-columns-in-a-list

    Best Regards

    Dennis Guo
    TechNet Community Support




    • Marked as answer by Miles Li - MSFT Wednesday, September 11, 2013 8:55 AM
    • Edited by Dennis Guo Friday, May 30, 2014 7:53 AM
    Thursday, September 5, 2013 1:20 PM
  • I've just copied and pasted it into the content editor as picture below. However, it didn't make any sense. Do I have to change any part of the code? 


    2)



    • Edited by Omnipotent06 Thursday, September 5, 2013 3:18 PM
    Thursday, September 5, 2013 3:17 PM
  • Hi,

    The "WikiPageList" is my test List name,please change it.

    Best Regards


    Dennis Guo
    TechNet Community Support

    Friday, September 6, 2013 12:39 AM
  • Hi Dennis,

    Thank you for this solution.  I'm trying to adapt this for use with SharePoint 2010.  It works, but it appears to be superimposing the list on top of itself.  Any idea why, or how to fix this?

    Thanks!


    • Edited by Josh Loomis Wednesday, October 30, 2013 11:28 PM elaboration
    Wednesday, October 30, 2013 11:23 PM
  • You could also try the Script from my blog where the header row keeps sticking at the top when it scrolls out of view (pictures and code in the post): 

    http://spoodoo.com/sticky-headers-in-sharepoint-2013/

    Best Regards


    • Proposed as answer by Krishnan P Tuesday, October 28, 2014 5:50 PM
    • Marked as answer by Dennis Guo Wednesday, October 29, 2014 1:02 AM
    • Edited by Daniel Stölzner Tuesday, June 21, 2016 11:40 AM
    Tuesday, January 7, 2014 4:20 PM
  • Thanks Daniel. It is exactly what I wanted. I started my research this morning on how to freeze headers and stumbled upon your reply here. I was able to get your script working within 30 minutes. I will have to try your List Attachments script as well. Thanks again!
    Tuesday, October 28, 2014 5:57 PM
  • What about if we are using a view with grouping? can it work? We tried the script but it is breaking the code when using grouping and it displays errors when mixing rows, see below,

    Tuesday, October 13, 2015 9:48 PM
  • Thank you sooooo much!!!

    You are awesome sir.

    Thursday, October 13, 2016 3:22 PM
  • We created a solution for fixing all list/document library headers on a site. You only need to upload and activate the solution, then activate the feature on the site.

    Watch on YouTube here: https://youtu.be/BinwvBBv2RU

    download here: http://p3fixedheader.codeplex.com/

    Sunday, February 26, 2017 1:23 PM
  • Hi,

    when I use this code. I'm getting the error at 

    expression(this.offsetParent.scrollTop)


    sandhya v

    Thursday, October 12, 2017 2:22 PM
  • Monday, August 20, 2018 1:08 PM