Wednesday, 25 September 2013

Fix the Filter on top while scrolling the page


Hello All,
Some times we need to fix the filter on the top of the screen at the time we scroll the page. for that simply we need to change the css of that div in which we placed the filter. I have also fixed the header of the gridview.
For this code as follow

<script type="text/javascript">
        jQuery(function ($) {
           
            $(window).scroll(fixDiv);
            fixDiv();
        });
        function fixDiv() {
            var $cache = $('#getFixed');
            var $grid = $('#gvImage .FrozenHeader');
            if ($(window).scrollTop() > 80) {
                $cache.css({ 'position': 'fixed', 'top': '0px', 'padding-top': '10px', 'width': '1122px', 'margin': '0px 0px 0px 0px', 'border-bottom': '20px solid gray', 'border-top': '10px solid gray' });
                $grid.css({ 'position': 'fixed', 'top': '60px', 'left': '8px', 'width': '620px', 'padding-top': '0px', 'margin-top': '0px' });
            }
            else {
                $cache.css({ 'position': 'relative', 'width': '100%', 'top': '10px', 'padding-top': '10px' });
                $grid.css({ 'position': 'relative' });
            }
        }
</script>


and code for my filter and gridview is

<div id="getFixed" style="background-color: Yellow; height: 30px; top: 10px;">
            Filter :        
            <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button id="btnSearch" runat="server" Text="Search" />
</div>


<asp:GridView ID="gvImage" runat="server" AutoGenerateColumns="false" ClientIDMode="Static" BackColor="White">
                            <HeaderStyle CssClass="FrozenHeader" />
                            <Columns>
                                <asp:TemplateField HeaderText="Sr No." HeaderStyle-HorizontalAlign="Center">                                   
                                    <HeaderStyle Width="100" />
                                    <ItemStyle HorizontalAlign="Center" Width="100" />
                                    <ItemTemplate>
                                        <asp:Label ID="lblID" CssClass="lblID" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <Columns>
</asp:GridView>
 

No comments:

Post a Comment