Pages

Search Code Shode

Wednesday, September 19, 2012

Fix HTML Table Header While Scrolling Page Using jQuery


I have heard this question various times:
Is there a cross-browser CSS/JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and do not scroll with the table body like the "freeze panes" effect in Microsoft Excel.
This blog post display how can we use a little bit of jQuery tweaking to fix position for the header of asp:Repeater  (or any table header). It will keep the header to float and be always on top.
Lets have a quick example for How to Fix HTML Table Header while scrolling page.

ASPX:

<table id="tblEmployee" border="0" cellpadding="5" cellspacing="1" class="tblborder"
        width="100%">
        <thead>
            <tr class="header" style="font-weight: bold;">
                <td align="center" colspan="7” >
                    Employee List
                </td>
            </tr>
            <tr class="header" style="font-weight: bold;">
                <td align="center" width="3%">
                    S.No.
                </td>
                <td align="center">
                    Employee Code
                </td>
                <td align="center">
                   Employee Name
                </td>
                <td align="center">
                    Department
                </td>
                <td align="center">
                    Designation
                </td>
                <td align="center">
                    Manager
                </td>
                <td align="center">
                    Action
                </td>
            </tr>

        </thead>
        <tbody>
            <asp:Repeater ID="rptEmployee" runat="server">
                <ItemTemplate>
                    <tr class="bgGray repeaterRow">
                        <td align="center" valign="top" width="3%">
                            <%# Container.ItemIndex + 1 %>
                        </td>
                        <td align="center" valign="top" nowrap="nowrap">
                            <asp:HiddenField ID="hdEmployee_ID" runat="server" Value='<%#Eval("Employee_ID")%>' />
                            <%#Eval("Employee_Code")%>
                        </td>
                        <td align="center" valign="top" nowrap="nowrap">
                            <%#Eval("Employee_Name")%>
                        </td>
                        <td align="center" width="10%" nowrap="nowrap">
                            <%#Eval("Department_Name")%>
                        </td>
                        <td align="center" valign="top" width="10%" nowrap="nowrap">
                            <%#Eval("Designation_Name")%>
                        </td>
                        <td align="center" valign="top" width="20%" nowrap="nowrap">
                            <%#Eval("Manager_Name")%>
                        </td>
                        <td align="center" valign="top">
                            <a id="aEdit" runat="server" href='<%# Eval("Employee_ID","EditEmployee.aspx?Employee_ID={0}" ) %>'>
                                Edit</a>
                        </td>
                    </tr>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <tr class="bgAlt repeaterRow">
                        <td align="center" valign="top" width="3%">
                            <%# Container.ItemIndex + 1 %>
                        </td>
                        <td align="center" valign="top" nowrap="nowrap">
                            <asp:HiddenField ID="hdEmployee_ID" runat="server" Value='<%#Eval("Employee_ID")%>' />
                            <%#Eval("Employee_Code")%>
                        </td>
                        <td align="center" valign="top" nowrap="nowrap">
                            <%#Eval("Employee_Name")%>
                        </td>
                        <td align="center" width="10%" nowrap="nowrap">
                            <%#Eval("Department_Name")%>
                        </td>
                        <td align="center" valign="top" width="10%" nowrap="nowrap">
                            <%#Eval("Designation_Name")%>
                        </td>
                        <td align="center" valign="top" width="20%" nowrap="nowrap">
                            <%#Eval("Manager_Name")%>
                        </td>
                        <td align="center" valign="top">
                            <a id="aEdit" runat="server" href='<%# Eval("Employee_ID","EditEmployee.aspx?Employee_ID={0}" ) %>'>
                                Edit</a>
                        </td>
                    </tr>
                </AlternatingItemTemplate>
            </asp:Repeater>
        </tbody>
    </table>

CSS:

.tblborder
{
    background-color: #7c7a90;
    font-family: Calibri;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.header
{
    border: 1px solid #aed0ea;
    color: Gray;
    font-weight: bold;
    font-size: 14px;
    font-family: Tahoma;
    background: #d7ebf9 url(../../../Styles/images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x;
    text-align:left;
}
.bgGray
{
    font-weight: normal;
    background: #f2f5f7 url(../../../Styles/images/ui-bg_diamond_100_f2f5f7_10x8.png) 50% 50% repeat;
    color: #362b36;
    padding:3px;
}
.bgAlt
{
    background: #eff6fc;
    font-weight: normal;
    color: #362b36;
    padding:3px;
}
.highlightRow
{
    background: rgb(228,245,252);
    color: Black;
}
.repeaterRow
{
    text-decoration: none;
}



jQuery/Javascript:

    <script type="text/javascript">
jQuery.fn.fixedtableheader = function (options) {
    var settings = jQuery.extend({
        headerrowsize: 1,
        highlightrow: false,
        highlightclass: "highlight"
    }, options);
    this.each(function (i) {
        var $tbl = $(this);
        var $tblhfixed = $tbl.find("tr:lt(" + settings.headerrowsize + ")");
        var headerelement = "thead";
        if ($tblhfixed.find(headerelement).length == 0) headerelement = "td";
        if ($tblhfixed.find(headerelement).length > 0) {
            $tblhfixed.find(headerelement).each(function () {
                $(this).css("width", $(this).width());
            });
            var $clonedTable = $tbl.clone().empty();
            var tblwidth = GetTblWidth($tbl);
            $clonedTable.attr("id", "fixedtableheader" + i).css({
                "position": "fixed",
                "top": "0",
                "left": $tbl.offset().left
            }).append($tblhfixed.clone()).width(tblwidth).hide().appendTo($("body"));
            if (settings.highlightrow) $("tr:gt(" + (settings.headerrowsize - 1) + ")", $tbl).hover(function () {
                $(this).addClass(settings.highlightclass);
            }, function () {
                $(this).removeClass(settings.highlightclass);
            });
            $(window).scroll(function () {
                if (jQuery.browser.msie && jQuery.browser.version == "6.0") $clonedTable.css({
                    "position": "absolute",
                    "top": $(window).scrollTop(),
                    "left": $tbl.offset().left
                });
                else $clonedTable.css({
                    "position": "fixed",
                    "top": "0",
                    "left": $tbl.offset().left - $(window).scrollLeft()
                });
                var sctop = $(window).scrollTop();
                var elmtop = $tblhfixed.offset().top;
                if (sctop > elmtop && sctop <= (elmtop + $tbl.height() - $tblhfixed.height())) $clonedTable.show();
                else $clonedTable.hide();
            });
            $(window).resize(function () {
                if ($clonedTable.outerWidth() != $tbl.outerWidth()) {
                    $tblhfixed.find(headerelement).each(function (index) {
                        var w = $(this).width();
                        $(this).css("width", w);
                        $clonedTable.find(headerelement).eq(index).css("width", w);
                    });
                    $clonedTable.width($tbl.outerWidth());
                }
                $clonedTable.css("left", $tbl.offset().left);
            });
        }
    });

    function GetTblWidth($tbl) {
        var tblwidth = $tbl.outerWidth();
        return tblwidth;
    }
};

    </script>

    <script type="text/javascript">
        $(function () {
            $("#tblEmployee").fixedtableheader({
                headerrowsize: 2
            }); 

            /* to highlight row on mouseover*/
            $('.repeaterRow').hover(function () {
                $(this).children().addClass('highlightRow');
            }, function () {
                $(this).children().removeClass('highlightRow');
            });

        });
    </script>

And that’s it. Just place this fixedtableheader function in a general javascript file reuse and call this function wherever you want. Only thing to remember is to follow the table structure as mentioned. Let me know if anything is not clear

Happy Coding!


Wednesday, June 13, 2012

Upload and Show Profile Picture Based on Session ID in ASP.NET

This was a question asked to in asp.net forums. It asked How to Upload and Show Profile Picture Based on Session ID in ASP.NET. I found it interesting and thought to write a post for it. So here we are with the solution:

FileUpload.aspx


<form id="form1" runat="server">
<div>
    <asp:FileUpload ID="FileUploadControl" runat="server" />
    <asp:Button runat="server" ID="UploadButton" Text="Upload" OnClick="UploadButton_Click" />
    <asp:Image ID="ProfilePic" runat="server" Height="150px" Width="150px" />
    <br />
    <br />
    <asp:Label runat="server" ID="StatusLabel" Text="Upload status: " />
</div>
</form>



FileUpload.aspx.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class FileUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["UserSessionID"] == null)
            Session["UserSessionID"] = System.Guid.NewGuid().ToString();//probably  create this in global.asax in OnSessionStart event

        ProfilePic.ImageUrl = "HttpHandler.ashx?ID=" + Session["UserSessionID"].ToString();
    }
    protected void UploadButton_Click(object sender, EventArgs e)
    {
        if (FileUploadControl.HasFile)
        {
            try
            {
                string ext = System.IO.Path.GetExtension(FileUploadControl.PostedFile.FileName);
                Session["UserSessionID"] = Session["UserSessionID"] + ext;
                FileUploadControl.SaveAs(Server.MapPath("~/") + Session["UserSessionID"]);
                StatusLabel.Text = "Upload status: File uploaded!";
                ProfilePic.ImageUrl = "HttpHandler.ashx?ID=" + Session["UserSessionID"].ToString();
            }
            catch (Exception ex)
            {
                StatusLabel.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
            }
        }
    }
}


HttpHandler.ashx


<%@ WebHandler Language="C#" Class="HttpHandler" %>

using System;
using System.Web;

public class HttpHandler : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        string imagePath = context.Request.QueryString["ID"];

        // split the string on periods and read the last element, this is to ensure we have
        // the right ContentType if the file is named something like "image1.jpg.png"
        System.IO.FileInfo imageFile = new System.IO.FileInfo(context.Request.PhysicalApplicationPath + imagePath); 
        bool fileExists = imageFile.Exists;
        if (fileExists)
        {
            context.Response.ContentType = "image/" + imageFile.Extension;
            context.Response.WriteFile(context.Server.MapPath(imagePath));
        }
        else
        {
            context.Response.ContentType = "image/jpeg";
            context.Response.WriteFile(context.Server.MapPath("NoImage.jpg"));
        }
       
            context.Response.Write(imagePath);
       
    }

    public bool IsReusable
    {
        get { return true; }
    }
}

Monday, June 11, 2012

Best Practices for Speeding Up Your Web Site

Today I found a greate article for  best practices for making web pages fast.The list includes 34 best practices divided into 7 categories.

 1) Content

    * Minimize HTTP Requests
    * Reduce DNS Lookups
    * Avoid Redirects
    * Make Ajax Cacheable
    * Post-load Components
    * Preload Components
    * Reduce the Number of DOM Elements
    * Split Components Across Domains
    * Minimize the Number of iframes

2) Server

    * Use a Content Delivery Network
    * Add an Expires or a Cache-Control Header
    * Gzip Components
    * Configure ETags
    * Flush the Buffer Early
    * Use GET for AJAX Requests

3) CSS

    * Put Stylesheets at the Top
    * Avoid CSS Expressions
    * Choose over @import
    * Avoid Filters

4) Javascript

    * Put Scripts at the Bottom
    * Make JavaScript and CSS External
    * Minify JavaScript and CSS
    * Remove Duplicate Scripts
    * Minimize DOM Access
    * Develop Smart Event Handlers

5) Cookie

    * Reduce Cookie Size
    * Use Cookie-free Domains for Components

6) Images

    * Optimize Images
    * Optimize CSS Sprites
    * Don’t Scale Images in HTML
    * Make favicon.ico Small and Cacheable

7) Mobile

    * Keep Components under 25K
    * Pack Components into a Multipart Document

For details check out this 

اشتہارات