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

See more:

C#

ASP.NET

CSS

jQuery

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<br />
> <br />
> Error: '0.offsetHeight' is null or not an object<br />
> <br />
> Code: 0

Also, sometimes it gives me the following error:

> Char: 11<br />
> <br />
> Error: Object doesn't support this property or method<br />
> <br />
> 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;

   }