Feeds:
Posts
Comments

Emails are the important part of any web application to make an interaction between website and end users. I got many queries from my friends for “How to send emails in ASP.NET”, so I have created a sample email sending application in asp.net to give you an idea about email sending in asp.net. So take a look at the how to make an application which will send emails.

First of all setup your mail server settings in web.config file, so that you’ll need not to define the mail server settings every time in code. In the web.config file define the <system.net> tag to define the mail server settings as below:

<!–Mail Server–>

<system.net>
<mailSettings>
<smtp deliveryMethod=”Network”>
<network host=”your host name” port=”25″ userName=”" password=”" defaultCredentials=”false”/>
</smtp>
</mailSettings>
</system.net>

In the above settings change your host name in <network> tag. Port number usually default 25, but it depends on your mail server settings, add you username and password for mail server.

After setting up your mail server settings in web.config file, create a page from where you want to send emails. I have created default.aspx page from where I’ll send emails. In this page I have created a sample interface for sending emails, with some common fields, from, to, subject, and body of email with a Send Mail button. On click of the button I am executing the following code.

if (sendMail(txtfrom.Text, txtto.Text, txtsubject.Text, txtbody.Text))
{
lblmsg.Text = “Mail Sent”;
}
else
{
lblmsg.Text = “Some error has been occured, please try again!”;
}

In the above code I am executing a sendmail function in if condition, sendmail function returns a bool type (true or false) value. If emails sent successfully then it will return true else return false. On the basis of that bool value returned by the sendmail function I am displaying the error message if email sending is failed. Sendmail function is defined in this default.aspx file, just download the sample app below and look by yourself, if have any problem please comment below.

This is a simple mail sending application with minimal options you can also use CC, BCC, attachments etc, just explore more options from this (http://www.systemnetmail.com/) site which is specially made for describing the email sending method and function in ASP.NET 2.0.

Download the sample application here: DOWNLOAD

Introduction

Hi, I found this video while surfing on YouTube and its pretty interesting, will tell you all the basic concept of developing a website in today’s world. Watch and listen it carefully (lyrics are included below). Have fun :)

Lyrics

Your site design is the first thing people see
it should be reflective of you and the industry
easy to look at with a nice navigation
when you can’t find what you want it causes frustration
a clear Call to action to increase the temptation
use appealing graphics they create motivation
if you have animation
use with moderation
cause search engines can’t index the information
display the logos of all your associations
highlight your contact info that’s an obligation
create a clean design you can use some decoration
but to try to prevent any client hesitation
every page that they click should provide and explanation
should be easy to understand like having a conversation
when you design the style go ahead and use your imagination
but make sure you use correct color combinations
do some investigation, look at other organizations
but don’t duplicate or you might face a litigation
design done, congratulations but it’s time to start construction
follow these instructions when you move into production
your Photoshop functions then slice that design
do your layout with div’s make sure that it’s aligned
please don’t use tables even though they work fine
when it come to indexing they give searches a hard time
make it easy for the spiders to crawl what you provide
remove font type, font color and font size
no background colors, keep your coding real neat,
tag your look and feel on a separate style sheet
better results with xml and css
now you making progress, a lil closer to success
describe your doctype so the browser can relate
make sure you do it great or it won’t validate
check in all browsers, I do it directly
gotta make sure that it renders correctly
some use IE, some others use Flock
some use AOL, I use Firefox
title everything including links and images
don’t use italics, use emphasis
don’t use bold, please use strong
if you use bold that’s old and wrong
when you use CSS, you page will load quicker
client satisfied like they eating on a snicker
they stuck on your page like you made it with a sticker
and then they convert now that’s the real kicker
make you a lil richer, your site a lil slicker
design and code right man I hope you get the picture
what I’m telling you is true man it should be a scripture
if it’s built right you’ll be the pick of the litter
everyone will want to follow you like twitter
competition will get bitter and you’ll shine like glitter
if you trying to grow your company will get bigger
design and code right man can you get with it

Introduction

Smile please, hey guys I received this query through email from one of my friend. It looks great and funny; I am sharing it with you. Dedicated to all techies :)

Wedding Sql Query

CREATE PROCEDURE MyMarriage
BrideGroom Male (25),
Bride Female (22)
AS
BEGIN
SELECT Bride FROM India_Brides
WHERE FatherInLaw = ‘Millionaire’
AND Count(Car) > 20   AND HouseStatus=’ThreeStoreyed’
AND BrideEduStatus IN (B.TECH ,BE ,Degree ,MCA ,MBA)
AND HavingBrothers = NULL
AND Sisters = NULL
SELECT Gold, Cash, Car, BankBalance FROM FatherInLaw
UPDATE MyBankAccout SET MyBal = (MyBal + FatherInLawBal)
UPDATE MyLocker SET MyLockerContents = (MyLockerContents + FatherInLawGold)
INSERT INTO MyCarShed VALUES (’BMW’)
END
GO

Then the wife writes the below query:

DROP Husband;
COMMIT;

Have a nice & smiley day!

Step by step installation of Microsoft SQL server 2008.

read more | digg story

This article wil tell you how to create a sample database in mysql and how to connect that database to an ASP.NET application…… :)

read more | digg story

Introduction
Hi, you all people are aware of the browser Firefox. A simple and easy to use browser, you can say that Firefox is Simply an Awesome browser. Firefox provides you add-ons which you can integrate with Firefox to get more benefits and improve your surfing experience, if you’re a web developer then you must have all these add-ons which I am going to list below. All these add-ons, I used personally and got some benefits they helps me in many ways. As we know the Firefox is an Open-Source browser, that means you need not to pay anything for that, so all these add-ons are also free of cost. So download and use them. So let’s have a look of these cool add-ons.
 

clip_image001[4]

Clearing a cache is always needed for a web developer. Sometimes if you have done any updates in website then it will again and again continues to display the older contents from the cache of the browser, and de to which we thought may be we have done some mistake in code. But in actually it’s the game of cache. So to clear the cache you have to go the options of the browser and then we’ll clear the cache. But going to the options every time is a headache, so don’t worry your headache will be goes out with this cool add-on (Clear Cache Button). This add-on will add a Clear cache button in toolbar of your Firefox browser.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/1801

 

clip_image002[4]

ColorZilla basically a color picker tool for firefox, using this tool you can get the HEX and RGB code of the colors. This can only select the color inside the firefox window not outside that. This helps very much when on some website you sees a color and want use it, so this will help you to get the color code of the color which you can use in your web page code. You can find this tool after installing in Left side of the status bar.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/271

 

clip_image003[4]

This tool is very good downloader for firefox. This increases speed of your downloading file and download that fast. It provides many functionality like, pause, stop etc. I like this tool at least for firefox browser. You must have this tool if you’re having firefox installed in your system.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/201  

 

clip_image004[4]

Firesizer provides you the resolutions using which you can view your website in all resolutions. This is displayed in the status bar when you’ll install this in your browser.

https://addons.mozilla.org/en-US/firefox/addon/5792

 

clip_image005[4]

This is not very useful tool but still it’s a good tool if you want to know about website server, that where the website server is located in the world. Flagfox display the Flag of the country where the website server is located in the world.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/5791

 

clip_image006[4]

This is not necessary but it’s good to have this cool add-on, this will add the favicon of the websites before the search result in the search result of the Google. You can notice existence of this tool when you search anything in Google after installing it.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/4676

 

clip_image007[4]

This tool is a text highlighter of the text which you’re searching. Means when you click Ctrl+F then it will highlight all occurrence of the text you’re searching in the current page.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/4240

 

clip_image008[4]

McAfee site advisor advises you that which website is safe to visit or which is not. It advises you that it’s not safe to visit this website automatically by showing a small popup when you open any unsafe website. And when you search for anything in Google then it will also displays the safe and unsafe icon in the search result.

Get this from here: http://www.siteadvisor.com/download/ff.html

 

clip_image009[4]

This option is used to open the image in new window. Means when you click on any image on a website then there are two three options like save image, view image etc but not always you want to save all images, in firefox I used to view the image first if it suits my requirement then save it. But when we click view image then it opens the image in the same window, which diverts your mind, so it’s better to open that image in new tab and think about it later. So if you want to see this image in new tab then this is a very helpful tool. You can find this option in the Context menu (Right-Click menu) whenever you right click on any image in the browser.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/2248

 

clip_image010[4]

This add-on will restart all your firefox windows. You need not to go and close each and every window, you just need to click this menu “Quick Restart” and will automatically restart all your firefox browser windows.

When you install this add on then you can find this feature in File -> Restart Firefox OR you can use the shortcut key Ctrl+Alt+R

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/3559

 

clip_image011[4]

Sometimes you want that whatever windows you have opened now, you’ll get all these when you next starts the windows or firefox. This add-on is useful for web developers or software developer who, use to visit the chatting sites without his boss permission. Means if you are chatting and you knows that your boss is coming at your desk then you just save the session of firefox an close all your browser windows and when he gone from there then again start firefox and you’ll get all your windows as it is, but this is other side but normally this add-on helps very much, you just save session and shutdowns your windows, then when you next start your windows you can get all your firefox windows as it is.. [J] You can find this in (File -> Save Session & Exit) after installing this add-on.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/4199

 

clip_image012[4]

SEO firefox, an AWESOME tool which displays the SEO statistics for the website in the Google search results. You can see the page rank in Google yahoo or in many others browser and many other statistics of the website that is displayed in the Google search results. An awesome tool for web developers.

Get this from here: http://tools.seobook.com/firefox/seo-for-firefox.html

 

clip_image013[4]

This is useful when you want to know that on which type of web server the website you’re visiting is hosted. This will automatically displays the web server type of the website in the status bar.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/2036

 

clip_image014[4]

This add-on show the IP address of the website in the status bar of the firefox browser. Sometimes this is useful when you want to know the IP address of a particular website. It’s better than searching or pinging the website using the “who is” websites or using cmd prompt.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/590

 

clip_image015[4]

This add-on is used to open the tab in new window. It is useful sometimes, you should have this add-on. You can find it when you right click on a tab.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/2062

 

clip_image016[4]

Time Tracker tracks the time you spent in your web browser. it displays this tracking I the status bar.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/1887

 

clip_image017[4]

Web developer toolbar, a very useful and good tool for web developers, you must have this tool of you’re using firefox. This tool adds a toolbar in your firefox browser, There are many functionalities provided by this browser, you just install this tool and have a look of all these, but believe me its AWESOME tool. Which will definitely helps you in web designing.

Get this from here: https://addons.mozilla.org/en-US/firefox/addon/60

List of add-ons installed in my firefox browser

firefox-1

 

These are some add-ons for firefox which I am using and getting benefits from these add-ons and there are hundreds of other tools are present who can help you in many ways.
But I am confused that Microsoft a big name in IT field, not having any kind of add-ons with IE, or may be there are, but they are not popular, but I think they are not having anything, and also in comparison of everything like Speed, looks, easy to operate firefox is better than IE. But I am a fan of Microsoft Company, so I request them to develop a good and fast browser. And I appreciate firefox team for making such a cool and awesome browser keep the spirit up and hope that Firefox3 will add many other feature which helps user and web developer.
And if you know any other cool add-on which can help people to improve surfing experience, so please share the same with us.

Give your valuable comments.
Thanks

Reference : Prashant Pandey (TechAhead)

*******

kick it on DotNetKicks.com
Introduction
Hi, in this article I am going to explain you about the use of “radio button” control inside an “ASP.NET Grid View” control. This sounds that it’s easy to put the radio button inside a grid view control, but you are wrong it’s not easy as it sounds. There are many factors which makes this problem complex to solve. But as you know the things looks “impossible”, who ultimately says “I am possible”.  So let’s take a look of this problem and solution for the same.

What is the problem?
The problem is, sometimes we (web developers) needs to display a data to the user which requires a radio button control, means for selection purpose or something. Let’s say you have a list of products out of which you want user can select only one product, so radio button help us that user can select only one product. List something like below:

geid-radio1


Description of the problem and its solution :)
So in the above displayed case we need to put radio button control inside a column in the grid view. Now as you know in asp.net we use the grid view control to display the data in the tabular format, grid view is an element in which you just need to specify the field name (fields that are present in your dataset) which you want to display. And then it will automatically bind those fields and displays all the data to the user in a tabular format.
But according to our problem we need to have a radio button control inside a column in the grid view.
In the grid view there are 7 predefined column types using those you can bound text data and controls like button, check box etc in the grid view column.
The 7 type of columns are displayed below.
  • Bound Field
  • Checkbox Field
  • Hyperlink Field
  • Image Field
  • Button Field
  • Command Field and
  • Template Field

 

geid-radio2


There are 2-3 fields present which are meant and developed to bind the controls like checkbox, hyperlink, image, and button. But not for radio button, so if you want to display any other control in the grid view columns other than already there then you have to use the Template Field column. In which you can place any control you want.
According to our problem we have to display a radio button inside the grid column then we’ll take the Template field column to get the radio button displayed inside it.

Types of “Radio Button” in ASP.NET
Now the complex things start. I don’t know you people are aware of it or not, but there are two types of radio buttons present in the asp.net
 
  1. HTML radio button control – This is the HTML radio button, this runs on the client side and can’t contact with server directly.
  2. Server radio button control – This is the server side radio button you can access this from the server.
Now the question is which type of radio button to choose to get our problem solved. If we choose the “Server radio button control” then it will create problem because the “groupName” property (which is responsible for single radio button selection among the many radio buttons present in the grid) will work only for the radio button present in the same row, not in the different rows, so this will not work and solve our problem.
Now the other one “HTML radio button control” which solve our problem because it works for the “name” (which is responsible for single selection) different rows, and also for the same row. That means where ever the HTML radio control will find the radio control which is having “name” property as same it will include that radio control in the group also and only single selection is possible.
So the final result of this section is that we’ll go with “HTML Radio Button Control” and we’ll use this in our template field column inside a grid view.
 

Solution code for the problem
I have created an example in Asp.NET (C#) to fill the grid view with a radio button column. Like below:
geid-radio1 
To demonstrate this problem I have created a table in database, an asp.net application, which I am explaining here and later you can download the full source of it.

SQL Table Script:

CREATE TABLE radioproblem
(
    Id INT IDENTITY(1,1),
    Name VARCHAR(50)
)

INSERT INTO radioproblem VALUES(’Prashant’)
INSERT INTO radioproblem VALUES(’Praveen’)
INSERT INTO radioproblem VALUES(’Pratik’)
INSERT INTO radioproblem VALUES(’Aman’)
INSERT INTO radioproblem VALUES(’Shenu’)

SELECT * FROM radioproblem

ASP.NET Application
Asp.net application have a page named “radiosample.aspx”, this page has two Server side buttons (Fill Data and Submit), a label, a grid view and a server side radio button. In the grid view I have a template field (which will contain a HTML radio button control) and two boundfield that are “Id” and “Name”. On the click event of the Fill Data button I am filling the grid with data. When data will be filled in the grid then the Radio button will be automatically rendered in each row, and out of those entire radio buttons you can select only one.
Following I am explaining the markup code of the grid view because we have to change some attributes inside markup code of the grid. The code is:

<asp:TemplateField>
            <ItemTemplate>
                <input
                    type=”radio”
                    name=”gvradio”
                    value=”<%#Eval(”Name”)%>” />
            </ItemTemplate>
            <ItemStyle
HorizontalAlign=”Center”
VerticalAlign=”Middle” />
        </asp:TemplateField>

The markup-code of grid view that you will find inside the example, only the above code deserves an explanation. In the above code we have taken a template field column, in which we have inserted a HTML radio button control,

<input type=”radio” name=”gvradio” value=”<%#Eval(”Name”)%>” />

In the radio button code you have to set the “name” attribute to something which you want and “value” this is basically our database value which you can set using the Eval method and we’ll retrieve when user submit the page. Name property is must because this property insures that only single radio button will be clicked out of all radio buttons having the same name, and also we’ll be able to get the value of this radio button using this name.
So now I think our main problem got solved, we can make use of HTML radio button along with grid view, so that user can select only one record or product from grid view. If you want user can select multiple records then you can make use of ASP.NET or HTML checkbox controls

Hold on guys,
So we have solved the problem of ‘how to put a radio button inside grid view’ and how to restrict the user to select only one entry using radio buttons. But guys this is not the end, there are two more problems for you regarding the grid view and radio button relationship. Let’s discuss both one by one.
 


Getting value of “HTML Radio Button” control present inside grid view
Now our first problem after solving the above problem is “getting the value of selected radio button in asp.net code”. It looks easy but its not, because the radio button is present inside the grid view, so you can’t directly access this control and also it’s a HTML radio button, So according to ASP.NET we can’t access the HTML controls directly in Server side code. So how will we find out that, which product or record user selected?
So there is a way with which we can get the value that which record is selected. Generally you can bind any value with radio button which you ant to access on the post back, but as we know  In every sql database table (mostly) there is a primary key column which identifies each row uniquely; it may be your product id, employee id, recorded etc. So it’s always better to bind that unique field with radio button type of columns so that you can find out each row in grid uniquely, but all depends on your requirement whatever you want bind with radio button control you can bin, like I am binding my table’s “Name” field with radio button in my example so that I can access that which name is selected when user submit the page. Have a look how to do this as I have done below:

<input type=”radio” name=”gvradio” value=”<%#Eval(”Name”)%>” />

value=”<%#Eval(”Name”)%>” you can put your database field name in place of “Name”.
When user will click the submit button then inside the submit button we can access that which value user selected using the following code.

Request.Form["gvradio"];

Using the above code you can get the value selected on click of the submit button. In my example I am do is,on click of submit button I am changing the value of Label1 label present on my web page. Like below:

Label1.Text = Request.Form["gvradio"];

So now you got he value of the radio button in asp.net code also. But there is one more possible problem that can arise problems for you, but d’t worry that also having the solution, lets take a look. 


Selecting the first radio button by default
Another problem is “selecting the first radio button in the grid view by default”, if you’ll not do so then, without selecting any record user will submit the page and hence you have to put a code on server side that user selected any record or not. But for this small thing if we send the user to the server then it will put some amount of load on our server, So to solve this there are two ways out, first is using the checked property (but its not the good way) and second is using JavaScript code.
So the first method is using the checked attribute of the radio button you can set the radio button state as checked. Like below,

<input type=”radio” name=”gvradio” checked=”checked” value=”<%#Eval(”Name”)%>” />

But the above code creates a problem, that is it will select one radio button in the given radio button in grid but it will select the radio button that is present in the last row, not the first one, because as we know grid renders each row one by one, so the row that is rendered in last will be selected. But we have to select the first one, so that user will know that first record selected and if he’ll submit the page then selected row will be submitted. So to select the first radio button of first row we have to make use of JavaScript. As you know that gridview in asp.net I renders itself in HTML Table, Row & Column format when we run this in browser, to solve our problem we’ll use this concept of “HTML Tables”, see the JavaScript code below
o in the above displayed case we need to put radio button control inside a column in the grid view. Now as you know in asp.net we use the grid view control to display the data in the tabular format, grid view is an element in which you just need to specify the field name (fields that are present in your dataset) which you want to display. And then it will automatically bind those fields and displays all the data to the user in a tabular format.
But according to our problem we need to have a radio button control inside a column in the grid view.

<script language=”javascript” type=”text/javascript”>
    function select_first()
    {
        var table=document.getElementById(’<%=gvRadiogrid.ClientID %>’);
        if (table.rows && table.rows.length>0)
        {  
            //Here you need to use 1 for first row. because 0 means its refers the header row in table.   
            var firstrow = table.rows[1];             
            var cell = firstrow.cells[0]; 
            var chkChecked = cell.firstChild;

            while(chkChecked)
            {
                if(chkChecked.tagName==”INPUT” && chkChecked.type==”radio”)
                {
                    chkChecked.checked = ‘checked’;
                    break;
                }
                chkChecked = chkChecked.nextSibling;
            }
        }
    }   
</script>

In above code I am taking the reference of gridview as a table object then after accessing the 1st cell of 1st row and then searching the INPUT tag inside that cell if found then checking that it is a radio button, if yes then selecting the radio button and stooping the loop.
That is fine that we have created a JavaScript which will select the 1st row’s radio button by getting the reference of the grid view in table format. But when we run this function, if we’ll run it on document load then at that time our grid not renders so we’ll get the nullable object error. So to solve this we’ll run this function after our grid renders. That means by pasting the following code in our markup file after the markup of gridview.

<script type=”text/javascript” language=”javascript”>select_first();</script>

put the above code after the grid tag (</asp:GridView>) close. So that it will run after the grid completely rendered and hence it will select the radio button.

Download the example code
Download the zip file and change the  SQL database name, SQL Server username and password, and also make a table using the script given in the example, because that table is used to demonstrate the application.

download

TI have tried my best to explain all possible problem of gridview with radio button, else you can download and run the sample application. To run the code you have to create the table in SQL and have to give the SQL username and password in the code file.

If feel any problem in understanding the code then please comment here.


Give your comments.
Thanks

Reference : Prashant Pandey (TechAhead)

*******

kick it on DotNetKicks.com
Introduction
Hi, this article will give you how to add a script which will add the site to your browser’s favorite’s (IE) or to bookmark’s (Firefox) on click on any element in HTML like hyperlink, button etc. So let’s take a look.

What is bookmark in browsers?
Bookmark, is a feature provided by all the latest browsers. Using this feature you can add any site to the bookmark list, so that later if you need to visit that site then you can easily retrieve it from your bookmark list and visit the site. This feature is useful because mostly people visits many sites while searching for something and it’s not possible to remember the name of all the sites, at that time this feature works as your “URL remember machine”. You can add all the names in your list and visit them whenever you want.
In Microsoft Internet Explorer we call this feature as Favorites (Add to Favorites) like below,

bookmark3


And except IE in all other browsers like in firefox it is called as Bookmarks (Bookmark this page) like below.
bookmark4 

Shortcut of adding any site which you are visiting to your favorites is Ctrl+D in all browsers.


Code to implement bookmarking in our website
As we know that we can add sites to our bookmark list using Ctrl+D or using the menu’s given in browser itself. But to attract users or just providing a facility we can also implement the same facility in our webpage’s on the click of a link or button using a little code of JavaScript. We’ll provide the link to the user something like below,

bookmark1

When user click on this bookmark link then the same dialog will open which open when we press Ctrl+D keys, like following,

 bookmark2

So, to provide this the code of JavaScript and the HTML code is as follows,


JavaScript Function:

function addbookmark()
{
if ( navigator.appName != ‘Microsoft Internet Explorer’ )
    {
window.sidebar.addPanel(”TechAhead Blog”,”
http://techahead.wordpress.com/”,”");
    }
    else
    {
window.external.AddFavorite(”
http://techahead.wordpress.com/”,” TechAhead Blog “);
    }
}

 

HTML hyperlink code:

<a href=”javascript:void(addbookmark());”>
    Bookmark
</a>

 

If you want to use the button instead of link then you can use that in the same way onclick event of the button.

So the whole code will look something like below:

<html>

<head>

<title>Bookmark Script</title>

<script type=”text/javascript” language=”javascript”>

function addbookmark()

{

if ( navigator.appName != ‘Microsoft Internet Explorer’ )

{

window.sidebar.addPanel(”TechAhead Blog”,” http://techahead.wordpress.com/”,”");

}

else

{

window.external.AddFavorite(”http://techahead.wordpress.com/”,” TechAhead Blog “);

}

}

</script>

</head>

<body>

<a href=”javascript:void(addbookmark());”>
    Bookmark
</a>

</body>

</html>

I have this script but I am also facing a problem with this script, actually on net if you’ll search for the scripts then they are very large and complex to use and understand, the above script is easy, simple and short, but the problem is its not working in Safari browser, its working fine in IE and Firefox but not in Safari, So guys please let me know if anyone can give me simple easy script which work in all browsers.
Hope this will help you guys,

Give your comments.
Thanks

Reference : Prashant Pandey (TechAhead)

*******

kick it on DotNetKicks.com
Introduction
Hi guys, here I am with a new and interesting article. This article related to web development, I have used the XHTML and CSS languages to demonstrate example in this article. In this article you’ll find a great and simple technique of CSS and XHTML to make icons in web page. Most of the sites using this trick to create the icons in their site. May be you people already know this but I found this interesting and I think this will help a beginner level web developer a lot, so I am including this in my blog (techAhead).

Concept and implementation of “CSS ICONS”
I think I can explain this more clearly to you by giving you some visual examples. Basically we use this trick to create icons in the website to create the look and feel of the web page more users friendly and attractive. The best example I can give you is Orkut.com a social community site, they are using the icons in their menus like as below:

orkut-menu


Imagine orkut without these cool and cute icons, if someone asked me to “remove these icons or not?” Then my personally thought would be NO. They gives a cool look to orkut, these icons are like make up of web page.
Now after this entire explanation lets move on to real question, is it difficult to do create these icons??, few weeks ago someone asked me that can you create some thing like below,
orkut-simple-menu

I said yes why not, take and image tag and then your text, just and it’s completed. Like below:

<img src=”myicon.png” /> profile

But this is not so easy, yeah what I said in previous line (with using image and text) its is possible but alignment will be a major issue in that case, your text and image will not be aligned properly and hence it will not achieve the perfection.
So to solve this problem you can make use of CSS with XHTML. Like below I have done:
Here I am making a html page with using CSS. The code is below:


<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS icon demo</title>

<style media=”screen” type=”text/css”>
/*CSS Class */
.icon_demo{
padding:3px 0px 3px 20px;
background:url(images/info.png) no-repeat left;
}
</style>
</head>

<body>

<!—HTML Code.– >
<span class=”icon_demo”>Information</span>

</body>
</html>


The above code will produce the following output.

css-demo

In the above code, icon_demo is the CSS icon class which is responsible for setting the icon image in the span or in the div properly and padding done to display the text properly. And the span (HTML Code) in which we’ll set the CSS class and hence it will display the icon and text in properly aligned way, you can make use of div tag also instead of span tag. It all depends on your requirements.
You can use these icons in your menus like orkut done, or in links also or anywhere where you think they’ll look cool and perfect.

That’s it. You people try it by yourself and feel free to contact me in case any problem regarding this topic. I know this is a very small problem and solution but I found this interesting one, so I am including it in my blog. Hope it helps someone.
Give your comments.
Thanks

Reference : Prashant Pandey (TechAhead)

*******

kick it on DotNetKicks.com
Introduction
Hi to all, after a long time since my last article, I am back again. Actually I was busy in my MCA (Master of Computer Application) exams. But now the “TechAhead Express” is back again on the track.
So here I am going to give a brief introduction about the new features in VS2005 in brief. Actually these all points are displayed when you installing the VS2005. With setup there is a presentation going on, those are very good points. So I have decided to put those points for all of you. VS2005 released 2 years back, but I think these are some points which everyone wants to read. It’s like a brief introduction of VS2005.
So let’s take a look,

Be More Productive
  • Speed development with enhanced visual designers.
  • Restructure code faster and easier with new refactoring support.
  • Build data-driven solutions faster with built-in designers for tables and queries.

One tool, One framework, Many languages

  • Use the programming languages that best maps to what you know and where you’re headed.
  • Fully employ the .NET Framework from any language – C#, Visual Basic, J#, and C++.
  • Discover a wealth productivity aids for developing with whatever language you choose.

Create Applications for Windows

  • Build professional-looking applications easily with new controls, such as the ToolStrip.
  • Craft data-driven applications faster with enhanced drag-and-drop data binding.
  • Create form layouts quickly with new Smart Tags, Document Outline view, and SnapLines.

Deliver Integrated Solutions

  • Build upon the Windows Server System to create robust, enterprise-grade applications.
  • Use Visual Basic, C# or C++ to author stored procedures for Microsoft SQL Server 2005.
  • Tackle integration challenges with native support for XML Web services.

Discover Innovation in Language Design

  • Discover new language features such as the “My namespace” and anonymous methods.
  • Generics support in the .NET Framework enables developers to write more performant, type-safe code.
  • Gain greater productivity in Visual Basic, C++ or C# with features like Edit and Continue.

Build Better Web Applications with ASP.NET 2.0

  • Write code faster with a powerful new editor which preserves HTML formatting.
  • Discover over 50 new ASP.NET server controls designed to accelerate site development.
  • Use built-in membership and personalization services to enhance your site.

Simplify Deployment and Operations

  • Streamline application deployments and updates with ClickOnce deployment.
  • Detect and install missing prerequisites automatically using the new setup bootstrapper.
  • Incorporate performance counters and event logging mechanisms into applications easily.

Write Less Code

  • Reduce code by up to 70% using new functionality in .NET Framework 2.0.
  • Use Code Snippets to insert and customize large blocks of template code.
  • Use the new Class Designer to author classes and create structured code stubs.
Thanks,

Reference : Visual Studio 2005 Setup, Prashant Pandey (TechAhead)

*******

Older Posts »