Showing posts with label Freeze Header. Show all posts
Showing posts with label Freeze Header. Show all posts

Friday, July 17, 2015

Freeze header in SharePoint List using JQuery?

Code:
Replace user list id
{B7EDD228-FDD2-46D2-A47E-E33D1D27E612}-{80AB3567-18AE-4ACE-A8E5-C86E5285E9C9}
<script type="text/javascript">

$(document).ready(function(){
var SummaryName ="Employee";
$("table").each(function(){
  var curTable = $(this).attr('id');

  if (curTable  == "{B7EDD228-FDD2-46D2-A47E-E33D1D27E612}-{80AB3567-18AE-4ACE-A8E5-C86E5285E9C9}"){

var $hdr = $("tr.ms-viewheadertr:first", $(this));
$(this).wrap("<div class='fh-tableWrapper' />");
$('.fh-tableWrapper').wrap("<div class='fh-outerWrapper' />");
$('.fh-outerWrapper').prepend("<div class='fh-bg' />");
$('th',$hdr).wrapInner("<div class='fh-thContentWrapper'/>");
$hdr.addClass("fh-thRow");
$(this).addClass('fh-table');

  }
});

});

</script>
<style type="text/css">

.fh-outerWrapper
{
    position:relative;
}

/* table wrapper*/
.fh-tableWrapper
{
    overflow:auto;
    height:300px;
}

/*the wrapper for 'th' content*/
.fh-thRow .fh-thContentWrapper{
    position:absolute;
    top:0;
}
.fh-bg
{
    position:absolute;
    top:0;
    height:30px;
    width:100%;
    background-color:#D5ECFF;

}

</style>