Showing all posts tagged: 'HTML 5'

A 8-post collection

Add watermark to textbox and password textbox using HTML5

If you need to add a watermark on your textboxes and wish to avoid ugly Javascript implementations, HTML5 is your friend. Simply use the placeholder attribute with any input element of type text or password, as per the examples below: <input id=”txtUsername” type=”text” placeholder=”Type your username” /> <input id=”txtPassword” type=”password” placeholder”Type your password” /></pre> This works like a treat! P.S This feature is only supported by the latest HTML5 browsers (IE10, Safari, Chrome, Firefox). Older browsers still require Javascript Happy coding… …[read more]

Tidy up your forms with horizontal sliding divs using JQuery UI

Many websites still make use of lengthy scrollable forms or numerous page post backs when requesting input from their users, e.g shopping cart check outs etc. jQuery and jQueryUI give developers the opportunity to significantly improve the overall UI experience. In this tutorial, we will look into creating sliding panels/divs that respond to user input and allow the users to navigate through the data entry process in a nice, fluid way. First we need to ensure that we reference the appropriate libraries: jQuery 1.9.0 jQueryUI 1.9.2 Then we need to create our html elements: …[read more]

HTML5 Drag and Drop file upload with preview using jQuery and MVC 4

With the advent of HTML5 and its wide adoption by all major browsers, web developers now have a new arsenal in their hands for implementing powerful file upload functionality on their website. In this tutorial we will see how to implement this using the FileDrop jQuery plugin and an MVC controller to receive and store the uploaded files in a repository on the server. First create a new MVC 4 website in Visual Studio. An existing website can also be used.  Create a new blank view and name it “UploadFiles”. You should be able to navigate to the page using …[read more]