All About .Net: April 2013

Tuesday, April 23, 2013

Efficiently Paging Through Large Amounts of Data

Get Sql Records With Row Index
***********************************

You can reduce your record traffic between process

DECLARE @start INT SET @start=2
DECLARE @end INT SET @end=3

SELECT us.UserID
FROM (SELECT ROW_NUMBER() OVER (ORDER BY UserID) AS Row, UserID
FROM Users.[User]) us
WHERE Row > @start AND Row <= (@start + @end)

Jquery Tab

Saturday, April 20, 2013

css transition menu like jquery

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE HTML>
<head runat="server">
    <meta charset="utf-8">
    <title>test</title>
    <link href='http://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet'
        type='text/css'>
    
    <style>
        /* Style Reset */body, ul, li
        {
            padding: 0;
            margin: 0;
        }
        nav
        {
            display: block;
        }
        ul
        {
            list-style: none;
        }
        a
        {
            text-decoration: none;
            color: #fff;
        }
        p a:hover
        {
            color: #f36;
        }
        body
        {
            background: url(img/dark_Tire.png) #222;
            font-family: 'Exo' , sans-serif;
            font-size: 16px;
            color: #999;
            min-width: 800px;
        }
        nav a
        {
            font-weight: 900;
            font-size: 23px;
            text-transform: uppercase;
        }
        /* menu-1 */#menu-1
        {
            position: fixed;
            top: 200px;
            left: 0;
        }
        #menu-1 a
        {
            padding: 8px 20px;
            margin: 1px 0;
            background: url(images/menu_bg.png) no-repeat -1px top rgba(0,0,0,0.2);
            background-size: 0 100%;
            display: inline-block;
            -moz-transition: all 0.2s ease-out;
            -webkit-transition: all 0.2s ease-out;
            -ms-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
        }
        #menu-1 a:hover
        {
            background-size: 100% 100%;
        }
        /* menu-2 */#menu-2 ul
        {
            text-align: center;
        }
        #menu-2 li
        {
            display: inline-block;
        }
        #menu-2 a
        {
            padding: 8px 20px;
            margin: 0 1px;
            background: url(images/menu_bg.png) no-repeat left -1px rgba(0,0,0,0.2);
            background-size: 100% 0;
            display: block;
            -moz-transition: all 0.2s ease-out;
            -webkit-transition: all 0.2s ease-out;
            -ms-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
        }
        #menu-2 a:hover
        {
            background-size: 100% 100%;
        }
        /* others */
        h1
        {
            color: #f36;
            text-align: center;
            margin-top: 200px;
            padding: 0 200px;
        }
        p
        {
            text-align: center;
            padding: 0 200px;
        }
    </style>
</head>
<body>
    <nav id="menu-2">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">My Blog</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

</body>
</html>

Friday, April 19, 2013

Sorting in Gridview Aasp.Net

* Java Script *

<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>

    <script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
------------------------------------------------------------------------------------------
* JS Function *

    <script type="text/javascript">
        $(document).ready(function() {
            $("#" + '<%=grvMember.ClientID%>').tablesorter();
        });
    </script>

----------------------------------------------------------------------------------
* GridView on aspx Page *

<asp:GridView ID="grvMember" runat="server" AutoGenerateColumns="false" CssClass="tbl-grid"
                GridLines="None" Width="100%" OnRowDataBound="grvMember_OnRowDataBound">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Name
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblMemberID" runat="server" Visible="false" Text='<%#Eval("MemberID") %>'></asp:Label>
                            <asp:Label ID="lblprice" runat="server" Visible="false" Text='<%#Eval("price") %>'></asp:Label>
                            <asp:Label ID="lblEmailID" runat="server" Visible="false" Text='<%#Eval("EmailID") %>'></asp:Label>
                                                           <asp:Label ID="MemberName" runat="server" Text='<%#Eval("MemberName") %>'></asp:Label>
                                                  </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Gender
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Gender" runat="server" Text='<%#Eval("Gender") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Height/Weight
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Height" runat="server" Text='<%#"H-"+Eval("Height")+", W-"+Eval("Weight") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Membership Type
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="MembershipType" runat="server" Text='<%#Eval("MemberTypeName")%>'></asp:Label>
                            <asp:Label ID="ValidMonth" runat="server" Font-Size="10px" Text='<%#Eval("ValidMonth") %>'></asp:Label>
                            <asp:Label ID="MemberTypeID" Visible="false" runat="server" Text='<%#Eval("MemberTypeID") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            B'Date
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="DateofBirth" runat="server" Text='<%#Eval("DateofBirth","{0:dd/MM/yyyy}") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <%--<asp:TemplateField>
                        <HeaderTemplate>
                            Payment Last Date
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="LastDatefoPayment" runat="server" Text='<%#Eval("LastDatefoPayment","{0:dd/MM/yyyy}"+" ("+Eval("RamainDay")+")") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>--%>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Photo
                        </HeaderTemplate>
                        <ItemTemplate>
                            <img src='<%#"../"+Eval("PhotoPath") %>' width="25" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Visite
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="ProfileViewed" runat="server" Text='<%#Eval("ProfileViewed") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                                                            </Columns>
            </asp:GridView>

7 JavaScript Differences Between Firefox & IE

1. The CSS “float” property

The basic syntax for accessing a specific css property for any given object is object.style.property, using camel casing to replace a hyphenated property. For example, to access the background-colorproperty of a <div> whose ID is “header”, we would use the following syntax:

document.getElementById("header").style.backgroundColor= "#ccc";  

But since the word “float” is already reserved for use in JavaScript, we cannot access the “float” property usingobject.style.float. Here is how we do it in the two browsers:

The IE Syntax:

document.getElementById("header").style.styleFloat = "left";  

The Firefox Syntax:

document.getElementById("header").style.cssFloat = "left";  

2. The Computed Style of an Element

JavaScript can easily access and modify CSS styles that have been set on objects using theobject.style.property syntax outlined above. But the limitation of that syntax is that it can only retrieve styles that have been set inline in the HTML or styles that have been set directly by JavaScript. The style object does not access styles set using an external stylesheet. In order to access an object’s “computed style”, we use the following code:

The IE Syntax:

var myObject = document.getElementById("header");  
var myStyle = myObject.currentStyle.backgroundColor;  

The Firefox Syntax:

var myObject = document.getElementById("header");  
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);  
var myStyle = myComputedStyle.backgroundColor;  

3. Accessing the “class” Attribute of an Element

As is the case with the “float” property, our two major browsers use different syntax to access this attribute via the getAttribute method in JavaScript.

The IE Syntax:

var myObject = document.getElementById("header");  
var myAttribute = myObject.getAttribute("className");  

The Firefox Syntax:

var myObject = document.getElementById("header");  
var myAttribute = myObject.getAttribute("class");  

This syntax would also apply using the setAttribute method.

4. Accessing the “for” Attribute of the <label> Tag

Similar to number 3, we have different syntax to access a <label> tag’s “for” attribute in JavaScript.

The IE Syntax:

var myObject = document.getElementById("myLabel");  
var myAttribute = myObject.getAttribute("htmlFor");  

The Firefox Syntax:

var myObject = document.getElementById("myLabel");  
var myAttribute = myObject.getAttribute("for");  

5. Getting the Cursor Position

It would be rare that you would want to find the cursor position of an element, but if for some reason you need to, the syntax is different in IE and Firefox. The code samples here are fairly basic, and normally would be part of a much more complex event handler, but they serve to illustrate the difference. Also, it should be noted that the result in IE will be different than that of Firefox, so this method is buggy. Usually, the difference can be compensated for by getting the “scrolling position” — but that’s a subject for another post!

The IE Syntax:

var myCursorPosition = [0, 0];  
myCursorPosition[0] = event.clientX;  
myCursorPosition[1] = event.clientY;  

The Firefox Syntax:

var myCursorPosition = [0, 0];  
myCursorPosition[0] = event.pageX;  
myCursorPosition[1] = event.pageY;  

6. Getting the Size of the Viewport, or Browser Window

Sometimes it’s necessary to find out the size of the browser’s available window space, usually called the “viewport”.

The IE Syntax:

var myBrowserSize = [0, 0];  
myBrowserSize[0] = document.documentElement.clientWidth;  
myBrowserSize[1] = document.documentElement.clientHeight;  

The Firefox Syntax:

var myBrowserSize = [0, 0];  
myBrowserSize[0] = window.innerWidth;  
myBrowserSize[1] = window.innerHeight;  

7. Alpha Transparency

Okay, this is not a JavaScript syntax issue — alpha transparency is set via CSS. But when objects fade in and out via JavaScript, this is done by accessing CSS alpha settings, usually inside of a loop. The CSS code that needs to be altered via JavaScript is as follows:

The IE Syntax:

#myElement {  
    filter: alpha(opacity=50);  
}  

The Firefox Syntax:

#myElement {  
    opacity: 0.5;  
}  

So, to access those values via JavaScript, we would use the style object:

The IE Syntax:

var myObject = document.getElementById("myElement");  
myObject.style.filter = "alpha(opacity=80)";  

The Firefox Syntax:

var myObject = document.getElementById("myElement");  
myObject.style.opacity = "0.5";  

Of course, as mentioned, normally the opacity/alpha would be changed in the midst of a loop, to create the animating effect, but this simple example clearly illustrates how it’s done.

All About .Net

Tuesday, April 23, 2013

Efficiently Paging Through Large Amounts of Data

Jquery Tab

Saturday, April 20, 2013

css transition menu like jquery

Friday, April 19, 2013

Sorting in Gridview Aasp.Net

7 JavaScript Differences Between Firefox & IE

1. The CSS “float” property

The IE Syntax:

The Firefox Syntax:

2. The Computed Style of an Element

The IE Syntax:

The Firefox Syntax:

3. Accessing the “class” Attribute of an Element

The IE Syntax:

The Firefox Syntax:

4. Accessing the “for” Attribute of the <label> Tag

The IE Syntax:

The Firefox Syntax:

5. Getting the Cursor Position

The IE Syntax:

The Firefox Syntax:

6. Getting the Size of the Viewport, or Browser Window

The IE Syntax:

The Firefox Syntax:

7. Alpha Transparency

The IE Syntax:

The Firefox Syntax:

The IE Syntax:

The Firefox Syntax:

Opps Part 1 : Abstraction

Search This Blog