Showing posts with label HTML 5. Show all posts
Showing posts with label HTML 5. Show all posts

HTML5 Picture Element for Responsive Images

In this article, we will look at the <picture> element and how it helps in responsive design to render images of different sizes, based on the physical device accessing the content.

To display an image in our HTML pages, we have so far made use of the <img/> element with the source [src] attribute. Here’s an example:

<img src="Images/default.png" alt="Default Logo" />

With varying screen sizes and pixels, handling this image becomes a challenge. Let's create a small example for demonstrating this. I am using the free Visual Studio Community Edition although you can use any other web editor of your choice. Create an empty web application and add a HTML page with the name TestPicture.html in our project. Add the following code:
Continue Reading >>
Posted by No comments:

Reading a Local File using HTML5 and JavaScript

One area where the web has lacked for some time is the lack of a true file system.  HTML5 fills this void by providing a standard way of interacting with local files using the FIle API specification.

These APIs are used to read file locally, handling images etc. Some of the specifications are as listed below:

1. File: Provides read-only information about the file like name, filesize, mimetype etc.

2. FileList: Represents an array of individually selected files from the local system

3. Blob: Represents the raw binary data and allows access to range of bytes within the data which can be used for slicing file

4. FileReader: Provides methods to read data from file or Blob
Continue Reading >>
Posted by 1 comment:

HTML5 Geolocation API - Getting Started

Geolocation is one of the first HTML5 features that has been embraced across all major browsers. In this article, we will look at the HTML5 Geolocation API to get/access a user’s Geolocation.

Using HTML5 Geolocation API, you can share your current location with trusted web sites or even use it to provide additional geo location features in your own website, like providing discounts to visitors of your city. Finding out a visitor’s current location can be done using various methods. For example –
  • Find location using IP address
  • Wireless network connection
  • Using GPS etc
In HTML5, we can fetch Latitude and Longitude using JavaScript. We can make use of the global “navigator.geolocation” object to do so. Using the latitude and longitude of Geolocation, you can then share your location for example with apps like Google Maps.

Continue Reading >>
Posted by No comments:

HTML5 Video with Subtitles


HTML5 video element allows us to create caption enabled video pages. Captions/subtitles allows media contents to reach to different geographical locations. For example, if the media contents are in English and need to be translated into French or German to reach an audience that speaks these languages. We can provide the subtitles in our HTML5 Video element in the favorite language of the user.

To provide subtitles in HTML 5 video element, we will make use of WebVTT and TTML format files. These files are simple text files.

1. WebVTT - Web Video Text Tracks

2. TTML - Timed Text Markup Language

Introduction to WebVTT


WebVTT [Web Video Text Tracks] is a simple text file with the extention .vtt. This file can contain different types of information. For example -

  • Subtitles - The translation of the speech/dialog based on time.
  • Captions - It is similar to subtitles but it can include sound effects or other information of the media.
  • Chapters - You can create chapters so that user can navigate through the video. For example, creating chapters based on a slide show of Power Point Presentation.
  • Metadata - Information about the video which you can access using scripting languages.

WebVTT files can also be captured using script languages. These files can be created manually or you can create them using some authoring tools. The format of the file is as shown here:


















The WebVTT file [.vtt], starts with WEBVTT. Then it includes the time which is from and to with the decoration/position of the text which you want to display on your media. The position is shown as A:middle, i.e. the center of the screen.

The next line is the dialog/speech to display on the media. These contents are known as "cues". Each "cue" starts with an ID which is 1, 2 in our case. It must be separated with a blank line. Time specification must be done in HH:MM:SS:MMM format.You can even style the cues using CSS. The above file is used for displaying French subtitles.

Introduction to TTML


TTML [Timed Text Markup Language] is a specification published by W3C. TTML is XML based language. TTML file includes the XML version and encoding type. The format of the file is shown here:



















The root element in this language starts with <tt> with a namespace. Then you include <body> and <div> tags. In the <div> tag, we are including cues. The timing is specified with the begin and end in the paragraph tag.

Compared to the VTT, the TTML format looks little complex. But when you start using it, you get familiar with it.

Microsoft provides a simple tool called Caption maker. You can visit the URL to download this tool http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/

Now let's start creating our demo which will display the video in HTML 5 <Video> element and subtitle the same in English and French.

To start with, create a blank ASP.NET Web application and add a HTML page. I have named my HTML page as "MathsVideo.html".

Once you add the page, add a folder with the name "Media" under your web application and paste the video which you want to display. For more information about HTML 5 Video element media format support, please visit the link given below -

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

I am using the MP4 format for this demonstration. Once you add the media file into our Media folder, right click the Media folder and add a text file with the extension .vtt. I have named my file as "MathTrickSubtitle1_EN.vtt" and used the code shown below - 

WEBVTT

1
00:00:01.000 --> 00:00:03.000 A:middle
 Let's say you want to multiply 12 x 13

2
00:00:04.000 --> 00:00:07.000 A:middle
 For this one we will draw one line

3
00:00:08.000 --> 00:00:15.000 A:middle
 For the two we will leave a little bit of space and will draw two lines

4
00:00:16.000 --> 00:00:23.000 A:middle
 For the other numbers we will draw the lines to the other direction

5
00:00:24.000 --> 00:00:29.000 A:middle
 Now we will group together different lines and will count the dots

6
00:00:30.000 --> 00:00:33.000 A:middle
  Here we have six different dots

7
00:00:34.000 --> 00:00:37.000 A:middle
  In the middle, we have 5 different dots

8
00:00:38.000 --> 00:00:41.000 A:middle
  And on the other side we have one dot

9
00:00:42.000 --> 00:00:44.000 A:middle
   And that's the anser - 156

Now let's repeat the above steps to add French subtitles. I have named my file as " MathTrickSubtitle1_EN.vtt ". The code is as shown below - 

WEBVTT

1
00:00:01.000 --> 00:00:03.000 A:middle
 Disons que vous voulez multiplier 12 x 13

2
00:00:04.000 --> 00:00:07.000 A:middle
 Pour celui-ci nous allons tirer une ligne

3
00:00:08.000 --> 00:00:15.000 A:middle
 Pour les deux , nous allons laisser un peu d'espace et nous allons tracer deux lignes

4
00:00:16.000 --> 00:00:23.000 A:middle
 Pour les autres chiffres que nous allons tracer les lignes à l'autre direction

5
00:00:24.000 --> 00:00:29.000 A:middle
 Maintenant, nous allons regrouper les différentes lignes et comptera les points

6
00:00:30.000 --> 00:00:33.000 A:middle
  Ici, nous avons six points différents

7
00:00:34.000 --> 00:00:37.000 A:middle
  Au milieu , nous avons cinq points différents

8
00:00:38.000 --> 00:00:41.000 A:middle
  Et de l'autre côté nous avons un point


9
00:00:42.000 --> 00:00:44.000 A:middle
   Et ce est la anser - 156

I have used a translator to convert the English speech to French. That could be the reason, you may not see the correct word as per the speech.

Now open the Web.config file and write the code shown below. This code registers the MIME type for WebVTT and TTML. If you don't include this, you may not see the subtitles in our video.

<system.webServer>
    <staticContent>
      <remove fileExtension=".vtt" />
      <mimeMap fileExtension=".vtt" mimeType="text/vtt" />
      <remove fileExtension=".ttml" />
      <mimeMap fileExtension=".ttml" mimeType="application/ttml+xml" />
    </staticContent>
</system.webServer>

Now we will add a <video> element in our HTML page. The code for HTML is shown below - 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video With Subtitles</title>
</head>
<body>
    <video controls="controls" src="../Media/MathTrick1.mp4">
        <track kind='subtitles' srclang='en' label='English' src='../Media/MathTrickSubtitle1_EN.vtt' default>
        <track kind='subtitles' srclang='fr' label='French' src='../Media/MathTrickSubtitle1_FR.vtt'>
    </video>
</body>
</html>

In the above code we are using <video> element and the <track> element inside the video element. The <track> element contains several attributes like - kind - You can set the value of this attribute like captions, chapters, descriptions, metadata and subtitles. We are using subtitles. srclang is set to en and fr respectively. The label and the path of the source file. We are also making English as a default subtitle. User can change the same as per his/her choice.

Now let's run the web page and see how your subtitles look like. The output is shown here:





























Now if you change the language to French using the label shown above, you will see French subtitles. It is shown here:





























Now let's test the same using TTML [Timed Text Markup Lanague] file. Let's first add a text file with the extension, .ttml into our Media folder. I have named it as "MathTrickSubtitle2_EN.ttml". Write the code shown below in the file - 

<?xml version="1.0" encoding="UTF-8"?>

<tt xmlns="http://www.w3.org/ns/ttml" xml:lang="en" >
  <body>
    <div>
      <p begin="00:00:01.000" end="00:00:03.000">Let's say you want to multiply 12 x 13. </p>
      <p begin="00:00:04.000" end="00:00:07.000">For this one we will draw one line. </p>
      <p begin="00:00:08.000" end="00:00:15.000">For the two we will leave a little bit of space and will draw two lines. </p>
      <p begin="00:00:16.000" end="00:00:23.000">For the other numbers we will draw the lines to the other direction. </p>
      <p begin="00:00:24.000" end="00:00:29.000">Now we will group together different lines and will count the dots. </p>
      <p begin="00:00:30.000" end="00:00:33.000">Here we have six different dots. </p>
      <p begin="00:00:34.000" end="00:00:37.000">In the middle, we have 5 different dots. </p>
      <p begin="00:00:38.000" end="00:00:41.000">And on the other side we have one dot. </p>
      <p begin="00:00:42.000" end="00:00:44.000">And that's the anser - 156. </p>
    </div>
  </body>
</tt>

Now let's add another text file with the .ttml extsion into our Media folder. I have named the file as "MathTrickSubtitle2_FR.ttml". Write the code shown below in the file -

<?xml version="1.0" encoding="UTF-8"?>

<tt xmlns="http://www.w3.org/ns/ttml" xml:lang="en" >
  <body>
    <div>
      <p begin="00:00:01.000" end="00:00:03.000">Disons que vous voulez multiplier 12 x 13</p>
      <p begin="00:00:04.000" end="00:00:07.000">Pour celui-ci nous allons tirer une ligne</p>
      <p begin="00:00:08.000" end="00:00:15.000">Pour les deux , nous allons laisser un peu d'espace et nous allons tracer deux lignes</p>
      <p begin="00:00:16.000" end="00:00:23.000">Pour les autres chiffres que nous allons tracer les lignes à l'autre direction</p>
      <p begin="00:00:24.000" end="00:00:29.000">Maintenant, nous allons regrouper les différentes lignes et comptera les points</p>
      <p begin="00:00:30.000" end="00:00:33.000">Ici, nous avons six points différents</p>
      <p begin="00:00:34.000" end="00:00:37.000">Au milieu , nous avons cinq points différents</p>
      <p begin="00:00:38.000" end="00:00:41.000">Et de l'autre côté nous avons un point</p>
      <p begin="00:00:42.000" end="00:00:44.000">Et ce est la anser - 156</p>
    </div>
  </body>
</tt>

Now it's time to change the source of the file into our HTML page. The code for HTML page is as shown below - 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video With Subtitles</title>
</head>
<body>
    <video controls="controls" src="../Media/MathTrick1.mp4" height="400" width="500">
        <track kind='subtitles' srclang='en' label='English' src='../Media/MathTrickSubtitle2_EN.ttml' default>
        <track kind='subtitles' srclang='fr' label='French' src='../Media/MathTrickSubtitle2_FR.ttml'>
    </video>
</body>
</html>

Now run your web page and see the output. It will be same as shown above. I have done a test of WebVTT which is supported by IE 10, Google Chrome 18, Firefox. TTML is supported by IE 10. But I didn't find the support for the same in Google Chrome 39.0 and Firefox 33.

Summary - In this article, we have seen how to display subtitles using HTML 5 video element. We have seen WebVTT and TTML file formats to create the subtitles and embed them using a <track> element.
Posted by No comments:

HTML 5 Offline Applications

This article discusses when should one think about an Offline Web Application. What is an HTML5 offline application and to create one.

When should think about creating an Offline web application?

There are many situations where creating an Offline Web Applications makes sense. Some of them are: 
  • You may want to work with your application even when you are outside your company/organization’s network.
  • You may want to view documents/web pages when you are offline with no network connectivity.
  • You may have data entry application where you are storing data offline and once the network is available, you want to synchronize the data back to your main application.
  • In case if you are working with media applications, you may want some offline media pages which allows you to see videos offline etc.
Likewise there are many situations you can think of w.r.t. Offline applications.
Continue Reading >>
Posted by 1 comment:

Using LocalStorage in HTML5 with JavaScript to manage data locally in a Browser

Cookies and HTML5 LocalStorage serve different purposes although they both store data on client-side. While Cookies are meant to be sent to the server with each request, HTML5 LocalStorage comes with the idea of storing data locally, without transmitting it to the server.

In the past, we have used cookies to save data generated by user, on the client side. But there have been multiple issues with cookies, mainly due to its insecure nature. Because of these issues, users browse the web by disabling cookies or deleting them from time to time.

In HTML5, a new standard web storage was created called as LocalStorage and sessionStorage. Typically these are really useful to save data in cases where:
  • Browser Crashes accidently.
  • User closes browser accidently
  • Internet connection lost.
In these cases, there are chances of losing data which an end-user might have already entered before losing it unexpectedly. One of the best feature of the LocalStorage is it is supported by all browsers (IE 8+, Chrome, Opera, Safari,Firefox). In this easy walkthrough we will implement simple mechanism of managing data through the LocalStorage.
Continue Reading >>
Posted by 13 comments:

ASP.NET and HTML 5 Canvas - Draw Images and Save in ASP.NET Image Object

The Canvas element is a popular HTML 5 tag that can be embedded inside an HTML document for the purpose of drawing and displaying graphics. In this article, we will see how to use the HTML 5 canvas element in an ASP.NET Page to draw shapes and save them to an ASP.NET Image object.

Let’s get started. Open Visual Studio 2010/2012 and create a blank ASP.NET Website. Now add a page ‘default.aspx’ to the site. Set it’s target schema for validation as HTML 5 by going to Tools > Options > Text Editor > HTML > Validation. If you do not see the HTML 5 option, make sure you have installed Visual Studio 2010 Service Pack 1and Web Standards Update for Microsoft Visual Studio 2010 SP1.

Declare a HTML 5 canvas element of dimensions 400x400, add a Save button and an ASP.NET Image element to the form.

<form id="form1" runat="server">
<div>
    <canvas id="canasp" width="100" height="100">
    </canvas><br />
    <asp:Image ID="imgASP" runat="server"/>
    <asp:Button ID="btnSave" runat="server" Text="Save Image">
    </asp:Button>
</div>
</form>
Continue Reading >>
Posted by 2 comments:

HTML5 and CSS 3 in ASP.NET 4.5 – Part 1

In the first part of ‘HTML5 and CSS 3 in ASP.NET 4.5’ article, we will see how HTML5 is supported in ASP.NET 4.5. We will also explore some new features of HTML5 with ASP.NET 4.5.
ASP.NET 4.5 by default supports HTML5. To see this in action, let’s create a new empty web site with the name “HTML5SupportPartI” using Visual Studio 2012 as shown below –

For this demonstration I am using Windows – 8 and Visual Studio 2012.

newemptysite

Add a new item to our blank web site which is “Web Form”. I am using the default name of the page which is “Default.aspx”. Once you have added the “Default.aspx” page, observe the “DOCTYPE” in our page. It looks like below –
Continue Reading >>
Posted by 2 comments:

TextBox Watermark using HTML5 and jQuery

A ‘TextBox Watermark’ is an UI effect that is often employed in space constrained scenarios where putting in a label next to a text box explaining the purpose of the textbox is not possible. In such scenarios, the TextBox has a watermark that stays on till a user starts typing. For example the WordPress.com home page

wordpress

Here when we start typing on the Username or the Password textbox, the text vanishes allowing you to put in your username and password

wordpress-login

Apart from the above use case, it is often used to show sample data or expected formatting. This effect has become so popular that it is now supported in HTML5 <input> elements through an attribute called ‘placeholder’. But like all things, not all browsers support HTML5 yet. The following html

textbox-watermark

gives us the following out put on IE9, Firefox 12 and Chrome 19.

ie9-watermark-nosupport

As we can see above, IE9 does not support this effect.

To get the same effect across all browsers we will develop a small jQuery plugin that will take the placeholder value provided and applies the watermark effect across all browsers.
Creating the Plugin
We will go step by step on how to create the jQuery Plugin.

Step 1: Basic Syntax

jQuery plugins are JavaScript function properties added to the jQuery.fn object from the jQuery library. The syntax for it is as follows:

jQuery.fn.inputWatermark = function() 
{
    // The plugin related methods here  
};

As we see above, inputWatermark is the name of our plugin. You can replace it with a name of your choice for the plugin.

Step 2: Using the $ symbol

Now we can wrap the above in an immediately invoked function expression (IIFE) so that it maps to the $ sign and it can’t be overwritten by another library in scope of its execution. So our boilerplate code becomes


(function ($) 
{
    $.fn.extend({
        inputWatermark: function() {  
        // The plugin related methods here  
      }
    });
})(jQuery);
Step 3: Maintaining Chainability

We want our plugin to be applicable to multiple <input> elements because we can have multiple text boxes to which the watermark needs to be applied. We also want to be able to pass on the ‘inputWatermark’ along to the next method in the chain. To do this, our plugin must return the ‘this’ keyword. So our shell code is modified to the following


(function ($) {
    $.fn.extend({
        inputWatermark: function () {
            var options = datasource;
            return this.each(function () {
                // plugin code
            });
        }
    });
})(jQuery);

Step 4: Setting up the Code
The logic for the watermark behavior is simple.
1. If no text have been provided by the user, show the watermark text
2. When user enters the input box, remove the watermark
3. When the user exits the input box if they haven’t added any text, put the watermark back.

To do the above, we handle the blur and focus events of the input element. On plugin initiation, we check if value provided is not empty, if it is, we add the watermark. The code is as follows


(function ($) {
    $.fn.extend({
        inputWatermark: function () {
            return this.each(function () {
                // retrieve the value of the ‘placeholder’ attribute
                var watermarkText = $(this).attr('placeholder');
                var $this = $(this);
                if ($this.val() === '') {
                    $this.val(watermarkText);
                    // give the watermark a translucent look
                    $this.css({ 'opacity': '0.65' });
                }



                $this.blur(function () {
                    if ($this.val() === '') {
                        // If the text is empty put the watermark
                        // back

                        $this.val(watermarkText);
                        // give the watermark a translucent look
                        $this.css({ 'opacity': '0.65' });
                    }
                });



                $this.focus(function () {
                    if ($this.val() === watermarkText) {
                        $this.val('');
                        $this.css({ 'opacity': '1.0' });
                    }
                });
            });
        }
    });

})(jQuery);

We update our HTML to the following


<!DOCTYPE html>
<html>
<head>

    <title>TextBox Water Marking</title>
    <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="Scripts/input-watermark.js" type="text/javascript"></script>
</head>


<body>
    <input id="input1" placeholder="Placeholder here..." />
    <input id="input2" placeholder="2nd Placeholder" value="This is actual Text" />
    <script type="text/javascript">

        $(document).ready(function () {
            $(':input').inputWatermark();
        });

    </script>

</body>
</html>

As seen above we are assigning the plugin using the type selector. This assigns the plugin to all input boxes. The beauty is that we use HTML5 style markup and the same attribute (placeholder).

We could assign the plugin to individual input elements too by using the id selector

$('#input1').inputWatermark();
or
$('#input2').inputWatermark();

Finally our code in action looks as follows

ie9-watermark-fix


See a Live Demo
Posted by 3 comments:

Use HTML 5 Elements in IE 8 using HTML 5 Shiv

There are a lot of new HTML 5 elements like <header>, <article>, <footer> etc. that browsers like IE 8 and versions prior to that, do not support. These browsers need some help recognizing the new HTML5 elements and Remy Sharp’s HTML 5 Shiv provides just that.

To use this script, it must be included before the <body> element (i.e. in the <head>).

To improve performance, include the CSS first and then this script. Here’s how to declare this script

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]—>

This script enables IE to acknowledge the new HTML 5 elements by directing it to create the elements using JavaScript. The conditional comment shown above only loads the html5 shiv code when the version of IE is lower than 9.

You also need some CSS styling to render the elements as  block-level elements

image
Posted by 1 comment:

Most Popular .NET, jQuery and Web Development articles in 2011

With 2012 fast approaching and 2011 drawing to an end, we've put together our list of the Most Popular .NET articles on DevCurry.com this year. The year 2011 featured articles on DevCurry covering many technologies like jQuery, HTML 5, ASP.NET, MVC, Silverlight, WPF, .NET, VS 2010, Entity Framework and Sharepoint, just to name a few.

I would like to thank each one of you who has visited my blog or contributed to it by submitting a Guest post, Subscribing to RSS Feed, by joining me on Twitter or the Facebook page or promoting the articles and giving regular feedbacks via rating, comments or Emails. Many thanks to those too who purchased my jQuery ASP.NET eBook.

Here are some articles that were liked the most by readers like you. Have a very Happy New Year 2012!

.NET Articles


jQuery & JavaScript Articles


HTML 5 & CSS Articles

Posted by 6 comments:

HTML 5 Developer's Dilemma - Which Video File Format to Convert and Support

Until recently, the only way to embed video in web pages was using third-party plugins like Silverlight, Flash and QuickTime. HTML5 has made it easier to include multimedia in your web pages without any plugins, by just using the <video> element. However support for video and audio file formats varies across browsers. HTML5 capable browsers support different video formats.
They are:
  • Theora (.ogg, .ogv) - The free and open source container format from the Xiph.org foundation, for the open source Theora codec. Results in lower quality than H.264 and uses the application/ogg MIME type and the video/ogg video attribute type
  • MP4/ H.268 (.m4v) - The compressed container format for the H.264 codec, with high definition support and uses video/mpeg MIME type and the video/mp4 video attribute type
  • WebM (.webm) – Open source container format supported by Mozilla, Opera, Adobe, and Google., compressed by VP8 codec and uses the video/webm MIME type and the video/webm video attribute type
A standard video format has not yet emerged. So as a web developer, to make sure you handle all major web browsers and that as many users  as possible can see your content, you have to encode video in different formats.

Let’s us first quickly see what browsers support what file formats

html5-video-formats

Looking at the chart above, one can conclude that if you serve ‘at least’ two different formats: MP4 and WebM or MP4 and Theora, you can handle all the ‘latest’ browsers. The easiest way to provide content in different formats is to convert your video format into Mp4, WebM or Ogg formats

Free Encoding Tools to Convert Video Formats

Here are some free encoding tools to convert video formats:
  • HandBrake – Open source transcoder for generating .mp4 files.
  • Firefogg - Firefox extension for performing Ogg encoding.
  • Miro Video Converter – Converts video files to Theora Ogg, MP4, and WebM
  • Media Converter -  Convert files to MP4, Theora Ogg, Flash FLV etc.
  • Vid.ly Converter -  Converts your source video into 22 output renditions to cover more that 6,000 devices and browsers in market.
    This tool was shared by Elijah Manor in the comments section

Using HTML 5 with a Flash Fallback

Faced with these format differences, a web developer should prepare multimedia in different formats (as we explored above) and also support old browsers that do not support HTML 5.

Here’s an example of how you can write your markup

html5-video-fallback

As you can see, in addition to different file formats, we have a fallback to a Flash video and a further fallback to an Image, in case the flash plug-in is also not installed. While providing Flash support, Firefox uses the `data` attribute above and IE/Safari uses the param attribute, hence we have included both.
Posted by 1 comment:

HTML 5 Number Spinner Control

The HTML 5 "spinner" or number input control provides an input for entering a number and also allow users to click up and down arrows to select a number.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spinner Control in HTML5 by DevCurry.com</title>
</head>
<body>
   <form>
        <label for="age">
            I am   
            <input type="number" name="age" id="age"
                min="18" max="120" step="1" value="18">
             years old
        </label>
    </form>
</body>
</html>

What I like in the number input control is that it is a combination of text and range. A user can enter values directly just like they do in a textbox, but at the same time is restricted to enter only numerical values in a range, like a range control.

The min and max attributes, allow you to enter range of values. The step attribute sets the value increment and the value attribute lets you specify the default value of the control.

The control renders differently in different browsers and in tablets, the behavior changes. Here’s how it looks in Chrome 13.

Html 5 Number control

Browser support for the HTML 5 Number Spinner Control

I have tested this example on the latest browsers including IE 9, Chrome 13, Firefox 6, Safari 5. Here’s a list of what is supported and what is not. Hopefully all browsers will sooner or later add support for this control!

HTML 5 number control
Posted by 1 comment:

HTML 5 DataList Element with Fallback option for Old Browsers

A DropDown menu in HTML 5 is accomplished using a combination of the new DataList element and the list attribute. This is done in two steps:

Step 1: Create a datalist and populate it with option elements as shown below:

<datalist id=tvseries>
    <option value=Heroes>
    <option value=LOST>
    <option value=Fringe>
    <option value=CriminalMinds>
    <option value=CSIMiami>
</datalist>

Observe the ID attribute which is important to link this datalist with other elements on the page.

Step 2: Create an input element and link it to the datalist by setting the list attribute to the id of the associated datalist

<input type=text id=tv list=tvseries name=series autofocus>

When you run this example in a browser that support the HTML 5 datalist element and set focus on the TextBox, you will see a dropdown menu as follows:

HTML 5 DataList

The datalist element, as of this writing is supported only in FireFox 4+ and Opera 11.

In browsers like IE9, Chrome, Safari etc. that currently have not implemented support for the datalist element, you will see a regular text box. However this is not very consistent. What we would like is that in browsers that do not support DataList, atleast a standard dropdown control (SELECT element) should appear, which will allow users to select a value.

Note: Unlike the select element, users can enter data of their choice in datalist. It’s just that  they’ll be presented with a set of suggested options in a drop-down as they type. That’s what makes the datalist control exciting to add to your forms.

FallBack Option for Browsers not supporting HTML 5 DataList

Here’s how we can provide support for browsers not supporting the DataList by doing some minor changes in the code written previously

HTML 5 DataList

As you can observe, we have enclosed a ‘select’ element inside the datalist. All browsers supporting the datalist element will ignore the select element and display only the   HTML5 datalist element.

However all older browsers or ones without the datalist support will display a dropdown. Cool ain’t it!

Additionally, we have also added text for each of the option elements


image

This is done because the select element in old browsers does not display the value attribute, but instead displays the text specified.

That’s it. Run the page and see the output

image

Remember that the Select list will only be shown in browsers that do not currently support the datalist element like IE, Chrome, Safari.
Posted by 4 comments:

IE10 Platform Preview 2 Released with better HTML 5 support

Microsoft just released Preview 2 of the new Internet Explorer 10 and it's getting better! You can download it from http://www.ietestdrive.com.

Here’s a broad list of what’s new in preview 2:
  • Support for the Web Worker API which allows to run complex JavaScripts in the background
  • Support for Web File API providing browsers controlled access to the local file system, HTML 5 sandbox and iFrame isolation
  • CSS3 Positioned Floats for print-like layouts
  • Better HTML5 Drag-drop support
  • Media Query and Listeners
  • Better HTML 5 performance and standards support
  • Initial Support for HTML 5 Form validation, Parser and Channel Messaging
  • and more…
Check a Video that demos how stuff works in the new IE 10 Preview 2



IE 10 would release sometime around March 2012.
Posted by 2 comments:

New Tags in HTML 5

HTML 5 is the latest version of the Hyper Text MarkUp Language and introduces many new features. HTML 5 introduces many new tags devoted to describing a documents’ structure, multimedia  etc.

Here are some of the new tags added in HTML 5 (OutDated Article. Please refer to the latest list at http://www.w3.org/TR/html5-diff/)

HTML 5 Tag Description
<article> Defines an article
<audio> Defines sound content
<canvas> Defines graphics
<command> Defines a command button
<datagrid> Defines dynamic data in a tree, tabular or list
<datalist> Defines a drop-down list
<datatemplate> Defines a data template
<details> Defines details of an element
<dialog> Defines a conversation or a dialog
<embed> Defines a plug-in or interactive content
<eventsource> Defines a a target for events generated by a remote server
<figure> Defines a group of media content used for annotating illustrations, diagrams, photos, code etc and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<mark> Defines text as marked or highlighted for reference purpose
<meter> Defines a scalar measurement within a known range
<nav> Defines navigation links
<nest> Defines a nesting point in a data template
<output> Defines result of a calculation or some type of output
<progress> Defines progress of a task
<rule> Defines the rules for updating a template
<section> Defines a section within an article
<source> Defines multiple media resources on media elements like audio, video etc.
<time> Defines a date/time
<video> Defines a video

We will be exploring all these tags on DevCurry.com as well as the new features of HTML 5 as we move ahead. So stay tuned!
Posted by 1 comment:
Subscribe to: Posts (Atom)