Why I could not be able to get the CSS & JQuery effects in this GridView?

Question

I am trying to use this nice article about (Freezing GridView header and columns while scrolling rest of the content) in my project but I failed. I followed all the steps mentioned in the post but still I did not get it and I don't know why.

I got the GridView with the data but without the CSS and JQuery effects. I got the symbol of error on the bottom left corner in the IE browser which says:

Char: 9

Error: '0.offsetHeight' is null or not an object

Code:0

Also, sometimes it gives me the following error:

Char: 11

Error: Object doesn't support this property or method

Code:0

And by the way, when I deleted the inline JavaScript that is existed below CSS style in the ASP.NET code, I did not get that error symbol My ASP.NET code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/jquery.fixedtable.js" type="text/javascript"></script>
        <%--This is for the GridView--%>
        <style type="text/css">

        .fixedColumn .fixedTable td
        {
            color: #FFFFFF;
            background-color: #5097d1;
            font-size: 14px;
            font-weight: normal;
        }

        .fixedHead td, .fixedFoot td
        {
            color: #FFFFFF;
            background-color: #5097d1;
            font-size: 14px;
            font-weight: normal;
            padding: 5px;
            border: 1px solid #187BAF;
        }
        .fixedTable td
        {
            font-size: 10pt;
            background-color: #FFFFFF;
            padding: 5px;
            text-align: left;
            border: 1px solid #CEE7FF;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {

            $(".tableDiv").each(function () {
                var Id = $(this).get(0).id;
                var maintbheight = 355;
                var maintbwidth = 760;

                $("#" + Id + " .FixedTables").fixedTable({
                    width: maintbwidth,
                    height: maintbheight,
                    fixedColumns: 4,
                    // header style
                    classHeader: "fixedHead",
                    // footer style       
                    classFooter: "fixedFoot",
                    // fixed column on the left       
                    classColumn: "fixedColumn",
                    // the width of fixed column on the left     
                    fixedColumnWidth: 100,
                    // table's parent div's id          
                    outerId: Id,
                    // tds' in content area default background color                    
                    Contentbackcolor: "#FFFFFF",
                    // tds' in content area background color while hover.    
                    Contenthovercolor: "#99CCFF",
                    // tds' in fixed column default background color  
                    fixedColumnbackcolor: "#5097d1",
                    // tds' in fixed column background color while hover.
                    fixedColumnhovercolor: "#99CCFF"
                });
            });
        });
    </script>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                                    ConnectionString="<%$ ConnectionStrings:testConnectionString %>" 
                                    SelectCommandType="StoredProcedure" SelectCommand="kbiReport"
                                    FilterExpression="[DivisionName] like '{0}%'">

                    <FilterParameters>
                        <asp:ControlParameter ControlID="ddlDivision" Name="DivisionName" 
                                                 PropertyName="SelectedValue" Type="String" />
                    </FilterParameters>

                    <SelectParameters>
                        <%--ControlParameter is linked to the HiddenField above to generate different GridView based on different values 
                            of GroupID--%>
                        <asp:ControlParameter ControlID="HiddenField1" Name="GroupID" PropertyName="Value" DefaultValue=3 />
                    </SelectParameters>
                </asp:SqlDataSource>
<%--
                <div style="width:700px; overflow:auto; overflow-y:hidden;">--%>
                <div id="divGrid" class="tableDiv">
                <asp:GridView ID="GridView1" runat="server" 
                                AllowSorting="True" 
                                CellPadding="3" 
                                DataSourceID="SqlDataSource1" 
                                ClientIDMode="Static" class="fixedTables" Width="600" AutoGenerateColumns="true"
                                AlternatingRowStyle-CssClass="alt" 
                                RowStyle-HorizontalAlign="Center" 
                                OnRowDataBound="GridView1_RowDataBound" OnPreRender="GridView1_PreRender" OnRowCreated="GridView1_RowCreated"
                                OnDataBound="GridView1_DataBound">
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                    <HeaderStyle Font-Bold = "true" ForeColor="Black"/> 
                    <Columns>
                    </Columns>
                </asp:GridView>

In the code-behind:

 protected void Page_Load(object sender, EventArgs e)
    {

        //Repeater1.DataBind();
        GridView1.DataBind();
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

    }

Answer 1

Finally, I could be able to solve the problem. Actually, the tutorial did not mention that we need to add to more javascript files which are: *sh_javascript.js* & *sh_main.js* as done in this demo