Contents tagged with HTML5
-
7 Things You Should Know About the Geolocation API
Many websites don't need to know anything about the geographical location of their visitors. In certain cases, however, this knowledge can be useful and can be used to enhance the user experience. This knowledge can also be used to integrate special features into your application. Consider, for example, a company selling some electrical equipment. By knowing the user's geographical location you can suggest the nearest store where they can visit, and purchase the products. To provide such suggestions it is important to capture the user's location. To that end, the Geolocation API allows you to do just that. This article examines seven key things you should know about the Geolocation API in order to use it in your web applications.
-
Understanding the Proper Way to Lay Out a Page with HTML5
A web page being rendered in the browser consists of many things - logo, informative text, pictures, hyperlinks, navigational structure and more. HTML5offers a set of markup elements that allow you to create a structured layout for web pages. These elements are often termed as Semantic Markup because they convey their meaning and purpose clearly to the developer and to the browser. This article discusses some of the important HTML5 elements that can contribute to the layout of a web page.
-
5 HTML5 Features Every Developer Should Know How to Use
As HTML5 becomes more and more common, it is important for web developers to know the main features and how to use them. HTML5 not only includes new markup elements but also APIs that can be consumed from the JavaScript code. If you are not familiar with HTML5 yet, it's the right time to peek into some of the interesting features. To that end this article discusses some of the features of HTML5 that are worth knowing. Specifically you will learn about audio, video and canvas elements, new input types, miscellaneous form features and custom data attributes.
-
Introduction to Developing Mobile Web Applications in ASP.NET MVC 4
As mobile devices are becoming more and more popular, web developers are also finding it necessary to target mobile devices while building their web sites. While developing a mobile web site is challenging due to the complexity in terms of device detection, screen size and browser support, ASP.NET MVC4 makes a developer's life easy by providing easy ways to develop mobile web applications. To that end this article introduces you to the basics of developing web sites using ASP.NET MVC4 targeted at mobile devices.
-
Using Custom Data Attributes to Store JSON Data in ASP.NET MVC
HTML5 custom data attributes (data-*) are used to store arbitrary pieces of metadata about an element. One way to store such metadata in data-* attributes is to create a separate data-* attribute for each piece of information you wish to store. This approach works well if there are only a few data-* attributes. However, at times you need to store a bunch of metadata in data-* attributes. In such cases instead of creating multiple data-* attributes you can create just one data-* attribute and store all the pieces of metadata as an object in JSON format. To that end this article illustrates how custom data attributes can be used to store JSON data in an ASP.NET MVC application.
-
Displaying File Upload Progress using jQuery UI Progressbar Widget
While uploading large files you may need to display the progress of the file upload operation to the end user. This can be done using HTML5 and jQuery UI's Progressbar widget. While HTML5 also has progress element that can be used to render a progress bar, jQuery UI's Progressbar widget offers more configuration and theming options. In this post you will use XMLHttpRequest (Level 2) object to upload files to the server. The XMLHttpRequest object now supports file upload related events such as progress that can be used to track file upload progress.
-
Using HTML5 Date Input Type Inside GridView
HTML5 provides several new input types such as email, URL and Date. While using Date input type a textbox is displayed as a date-picker by browsers such as Chrome and Opera. Such a textbox uses dates in yyyy-MM-dd format (ISO format) and this formatting can lead to some problems in data controls such as GridView as discussed below.
-
Two Ways of Passing HTML5 Web Storage Data to ASP.NET
HTML5 web storage allows you to store data on the client side. However, unlike cookies this data is not passed automatically to the server with every request-response cycle. To pass the data stored in web storage to the server you need to make some programmatic arrangement. Two ways by which such a data transfer can be facilitated are hidden form field and Ajax call. This article explains both of these techniques with an example.
-
Two ways of selecting files for uploading
As you know HTML5 has native support for drag and drop operations. A part of this support also allows you to drag files from Windows explorer and drop them on to a web page element. The files can then be uploaded on the server as usual. In addition to HTML5 drag-n-drop you may want to allow users to use classic technique of file selection - displaying an open file dialog and let them select the files. If you are supporting both the types of file selection techniques you may want to hide the File Upload server control from being displayed on the form entirely because generally you will have some other element (usually a graphical element) on which the end user can drop the files.
-
Uploading Files Using ASP.NET Web Forms, Generic Handler and jQuery
In order to upload files from the client machine to the server ASP.NET developers use FileUpload server control. The FileUpload server control essentially renders an INPUT element with its type set to file and allows you to select one or more files. The actual upload operation is performed only when the form is posted to the server. Instead of making a full page postback you can use jQuery to make an Ajax call to the server and POST the selected files to a generic handler (.ashx). The generic handler can then save the files to a specified folder. The remainder of this post shows how this can be accomplished.