Welcome to New Google Plus

Hello Everyone,

Just before someday, I have updated you about the New Layout of Facebook. Today I am updating you about another Top most used Social Network from Google.

No, don't think about Orkut (you still remember), it is Google Plus. Google has recently changed Google Plus to Multi-column Layout. There is one Main Navigation Column as previous version but It is not Collapsible and HTML5. Google Plus is now using HTML5 and CSS3  which bring a HD display and many interesting features.

New Features:

• Main Navigation is Collapses when you Click on home Button. 
• Live Feeds are filtered according to the category you select with Post-Back which is Static when Page is Scrolled Down (Fixed position).
• Multi-Column Layout to fit Maximum content.
• New Improved Share Box with Ajax Popup. Just Zooms in Click, Lovely.

These are just some of the Graphical or UI Changes that are visible. Many more great Features are added on Events, Posting and other Security.

Hope you will switch to Google Plus if you are still Hanging on Facebook. By the way, I am also there, you can add me on your Circle, My Profile is +John Bhatt 

All the Best and enjoy.

Read More

Accordion Panel with CSS

Greetings from John!,
Hope you all are enjoying.
Friends I am back with a new thing for you. Today I am going to show you, how to make a Good Accordion Panel.

Do you know, what is Accordion Panel? You must have seen some tables or Div's in website, that are collapsing and expanding on just Click. You can also call them Collapsible Div or Table.

ASP.NET Ajax Tools make it so Simpler for ASP.NET. You just need to link AjaxControlToolkit.dll to your bin folder and use it in the Page.
Let's add a new Web Form in Solution, this is the Page, where you want to add your collapsible div or table what may contain anything.

Source Code for Design above is here.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accordian with CSS >> P.Yar.B Complex</title>
    <%--<link href="Accordian.css" rel="stylesheet" />--%>
</head>

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table width="100%" border="0">
            <tr>
                <td colspan="2" align="center">
                    <h1>Accordian with CSS</h1>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center">
                    <asp:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" Width="490px">
                        <Panes>
                            <asp:AccordionPane ID="pane1" runat="server">
                                <Header>Hardwares</Header>
                                <Content>
                                    Mouse<br />
                                    KeyBoard<br />
                                    Monitor
                                    <br />
                                    Printer<br />
                                    CPU<br />
                                    Speakers<br />
                                    Camera
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane2" runat="server">
                                <Header>Operating System</Header>
                                <Content>
                                    MS Windows<br />
                                    Linux<br />
                                    Android<br />
                                    Mac<br />
                                    Unix
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane3" runat="server">
                                <Header>.NET IDE</Header>
                                <Content>
                                    Visual Studio<br />
                                    Visual Web Developer<br />
                                    SharpDevelop<br />
                                    MonoDevelop
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane4" runat="server">
                                <Header>John Bhatt</Header>
                                <Content>
                                    <a href="http://www.johnbhatt.com" target="_blank">Portal Home</a><br />
                                    <a href="http://blog.johnbhatt.com" target="_blank">Blog of P.Yar.B</a><br />
                                    <a href="http://media.johnbhatt.com" target="_blank">Download Center</a><br />
                                </Content>
                            </asp:AccordionPane>
                        </Panes>
                    </asp:Accordion>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Now Let's See the CSS, what is on CSS.

.accordionHeader {
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeader a {
    color: #FFFFFF;
    background: none;
    text-decoration: none;
}

    #master_content .accordionHeader a:hover {
        background: none;
        text-decoration: underline;
    }

.accordionHeaderSelected {
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeaderSelected a {
    color: #FFFFFF;
    background: none;
    text-decoration: none;
}

    #master_content .accordionHeaderSelected a:hover {
        background: none;
        text-decoration: underline;
    }

.accordionContent {
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

Now Run the Page again. Lets See, how it looked. Check this at your machine. Best of Luck!

Read More

AutoCompleteExtender in Textbox

Hi,

We will learn how to enable AutoCompleteExtender in Textbox Control.


Here, We will learn to Map data from SQL Database to Textbox within Same Page. WebMethod in .cs Page.

Directly to Code:

ASPX Page Code

             


Vehicle No :

             








         

Now Code in ASPX.CS Page

Add these Namespages for below Code.

using System.Data; // For Dataset
using System.Data.SqlClient; // For SQlConnection/Adaptor
using System.Configuration; // Access Consting from Web.Config.
using System.Collections.Generic; 

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetVehicleList(string prefixText, int count, string contextKey)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConToJohn"].ConnectionString);
        SqlDataAdapter adp = new SqlDataAdapter("Select distinct VehicleNo from VehicleDispatch where VehicleNo like '%" + prefixText + "%'", con);
        DataSet ds = new DataSet();
        adp.Fill(ds, "Vehicles");
        string[] VehicleNo = new string[ds.Tables["Vehicles"].Rows.Count];
        for (int i = 0; i <= ds.Tables["Vehicles"].Rows.Count - 1; i++)
        {
            VehicleNo.SetValue(ds.Tables["Vehicles"].Rows[0][0].ToString(), i);
        }
   return VehicleNo;
    }

I have Selected Only Unique Value from Database using SELECT DISTINCT .... command. If you want all records, Simply Change SQL Query to SELECT ..... Will be glad to hear from you... This Post is copied from DotNetFunda where I wrote in Code section.

Read More