------
I suppose I would call myself a SharePoint Designer at my company, but perhaps I’m just a glorified power user that has more access than others. Speaking of power, I’ve recently learned of a powerful way to, once again, use JavaScript in a content editor web part (CEWP) to modify how a SharePoint list is displayed.
The issue: Users want to be able to “lock” the column headings that are displayed in a list. A user attempting to view contents in a long list may be required to scroll down the list, which effectively “hides” the column headings -- this can make the data confusing.
A solution: Add the JavaScript pasted below into the source of a CEWP. Make sure to enter the list’s GUID into the code (replace the GUID in the example).
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
type="text/javascript"></script>
<style type="text/css">
<!--
.DataGridFixedHeader { position: relative; top: expression(this.offsetParent.scrollTop);}
-->
</style>
<!--
.DataGridFixedHeader { position: relative; top: expression(this.offsetParent.scrollTop);}
-->
</style>
<script type="text/javascript">
$(function(){
var $table = $("TABLE[ID^='{4C9CFF20-B467-4E10-820C-0A132442CF98}']:first", "#MSO_ContentTable");
$(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: 575px'></DIV>");
<!--FROZEN HEADER ROW-->
$("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
});
</script>
$table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: 575px'></DIV>");
<!--FROZEN HEADER ROW-->
$("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
});
</script>
Note: The GUID that must be replaced in this table is 4C9CFF20-B467-4E10-820C-0A132442CF98. I have included a link to some documentation on how to easily identify a list’s GUID - http://sanketinfo.blogspot.com/2009/05/how-to-find-guid-of-sharepoint-list.html
