Horizontal and vertical scrollbar in HTML5 and CSS3

In this post we are going to learn how we can put horizontal and vertical scrollbar in HTML5 and css3. In earlier version of HTML and CSS if we have to put only horizontal or vertical scrollbar that was not possible. Because there was no such properties there in CSS to describe whether we have horizontal scrollbar or vertical scrollbar.

Scroll bar in earlier version of HTML and CSS3:

In earlier version of HTML and CSS we have to use overflow property to display scrollbar for a particular div tag and If we add scrollbar it will add both horizontal and vertical scrollbar even if there is no need for that.Following is a code for that.

Continue Reading

Rounded corner div with HTML5 and CSS3

I have been recently playing with HTML5 and CSS3 and it is really fun. I am learning lots of new features of HTML5. Rounded corner is one of them. I thought it will be a good idea to share that with my readers. So In this post we are going to learn how we can create rounded corner div with HTML5.

In earlier version of HTML and CSS, If we need rounded corner div then we all needs to use image and without image it was not really possible. But now with the HTML5 and CSS3, It is very easy to create round corner div.

How to apply round corner to div?

There is a new CSS3 declaration for that. Border-Radius, With this you apply round corners to boxes and div without using images for rounded corners.

Example:

Let’s create an example for rounded corner div. I have created an sample page with Visual Studio 2012.

Continue Reading

ASP.NET 4.5 TextBox TextMode Property

Right now everybody is talking about HTML5 and its contains lots of new features like web sockets, canvas, new intput types with validation etc.

ASP.NET 4.5 text mode property enhancement:

With HTML5 new input types is going to be one of coolest feature and in future more and more people are going to use that feature. So in asp.net 4.5 asp.net development team given a support via TextMode property enhancements.

In earlier versions of ASP.NET we used have only three properties for TextMode property of asp.net textbox control.

1. MultiLine- for multiline textbox.
2. Password- for password textbox
3. SignleLine –for single line textbox

With ASP.NET 4.5 you are going to have tons of options with TextMode property.

1. Color- for Color entries
2. Date-  for date entries. You can enter dates only
3. DateTime – for datetime entries with respect to local time zone.
4. DateTimeLocal- for datetime entries with respect to local time zone.
5. Email- for email address
6. Month- for month and year entry.
7. Number- for  entering numeric values.
8. Range- for containing range between two numbers.
9. Search- for search field. A search field is like regular text fields
10. Tel- for telephone number.
11. Url- for website url entries. It will only contain urls.
12. Week- for entering weeks and year.

Continue Reading

Multiple file upload with asp.net mvc and HTML5

Few days I have written a blog post about Multiple file upload with asp.net 4.5 and Visual studio 2012. It was greatly appreciated by the community and also been part of www.asp.net community daily spot light.  On that post one of my reader Ciwan Kurd has requested the asp.net mvc version of that post. So in this post I will explain how we can do multiple file upload with HTML5.

For this post I am going to use asp.net mvc 3 with HTML5 template and visual studio 2012 but you can use same techniques in any version of asp.net mvc.  First things we needs to do create a HTML form for the uploading file in asp.net mvc view so following is a code for that.

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ 
    <label for="file">Upload Image:</label>
    <input type="file" name="files" value="" multiple="multiple"/>
    <input type="submit" value="Upload Image" />
}

In above code that I have use @HTML.BeginForm to create a HTML form with multipart as this attribute is required to upload any kind of files on the server. I have mapped that form to upload action result. Also I have used the file input control with HTML5 multiple attribute which allow us to upload multiple files on the server. Now its time to write code in asp.net mvc controller. Following is a code for that.

Continue Reading

Number- New HTML5 Input type

I have been writing few series of new HTML5 input types and this is another post on same series. In this post I am going to explain Number input types. The number type is for numeric values. When you use number input type it will have spinner with up and down arrow and with the help of this you can increase or decrease of value.

Attributes of Number Input type:

There are four attributes of Number input types.

1. Value : This attribute is used to specify the default value of the input type once its first loaded. So what ever you put there in input value it will be there.
2. Min: As name suggest it defines minimum value for a range that you can you can choose in number input types.
3. Max: It defines maximum number value for the range a number input type can have.
4. Step: This attribute defines the number which will decrease or increase number value. If you don’t specify the value for it the default value for this will be 1.

Continue Reading

URL–New HTML5 input element

In earlier post we have seen how the email input tag work in the browser. HTML5 comes with lots of new goodies and today we are going to see one of another new html5 input types URL.

In most of the sites once you fill your contact and personal information it will ask for your URL. Till now there is no specific type for URL and we have to manually validate the URL with the Java Script but now with the HTML5 you don’t have do that. It will automatically validate the URL. For the browsers that are not supporting this will work as normal input text box.

So let’s take a simple example of URL input type. I am going to use same ASP.NET MVC project that I have used for the earlier post. So Here is the code for that.

Continue Reading

Email-New Html5 input element

In most of the websites we have contact forms and other forms where we have some standard inputs like Phone,Email and Website URL and those are widely used in any site and has specific features. Email is one of the most standard used input elements which are used in our forms. Till HTML 4.1 we have standard input type text and that’s for we were doing input validation with java script and other technologies. While we all know HTML5 is there and it’s contains lots of goodies, One of them is email input types.

Email input type comes with HTML5 as standard input type. It has all validation by default which are required for email input like we must have @ and . while we entered email input type.

Continue Reading

how to vertically middle align text in div-HTML tip

Recently in one of the project I have to vertical align text in div. so doing some internet search I have found there are no proper way to do it. So I thought it would be good do share this within my readers.

Here is the code do vertically align text in div.

<div style="width: 25%;border:solid 1px red;display: table;vertical-align: middle;float:left;height:100px;">
<div style="display: table-cell;vertical-align: middle;">this is a very long text this is a very long text this is a very long text this is a very long text this is a very long text this is a very long text </div>
</div>

Here in above code you can see that I have created two divs first one will serve container for other div and other div has the text which I want to align vertically in div. So in container div you can see I have given its style to display table and in child div which has the text I have given its display style to table-cell and given vertical-align property to middle.

That’s it now when you run this in browser you can see text is vertically aligned.



Hope you liked it..Stay tuned for more..Till then happy programming.

Continue Reading