HTML5 – Introduction and tutorials, Cookbook style series

G'day, Now that I have simplified my blog categories I feel like I am free to talk about the topics I am passionate about. I have written few post on HTML5 but while I already know few things I am learning more and more everyday. That would be better to share them here, with you. I would be taking problem/solution approach to explain what I've learned. When I talk about HTML5 its just not HTML5 its treated as combination different technologies like       CSS3 - Its not HTML but still comes under HTML5 label New HTML elements, attributes etc Javascript APIs and events, Its altogether a new language but still many references make it part of HTML5 hood For me every above technology is put inside a blender and there is our HTML5 as a blended product. What we get from HTML5 is loads of goodies such as Updated Form elements Canvas Local storage Desktop notifications Web sockets Video and audio Drag and Drop Geo location History and other cool stuff We will cover most of it later. I think I will be posting pretty much HTML5 for next few days. Many will say that HTML5 is silverlight or Flash killer but they are totally different pillars and serves differently. This is just an introductory post about HTML5 so more will follow in following days. Most of the HTML5 modules or you can say features will work on many modern browsers including IE9+ Chrome Safari Opera Firefox There are many features that still are being developed, most of above mentioned browsers are very aggressive with getting on with HTML5 I think only one lagging behind will be Internet explorer. Now this post is not about IE bashing so lets get on with that fact. I will be supplying many code examples in upcoming posts so get your HTML editor ready to try various variations you can put into the code you see in examples. I am not a HTML5 expert yet, but wait! then what? Lets become expert together :) there is no harm in … [Read more...]

Detecting Text width using canvas – A simple jQuery plugin with fallback

Hello, While we all know that HTML5 added some really cool features and one of them is Canvas. There are literally thousands of tutorials floating on internet and you can learn something from all of them. In this post we are just concentrating on one simple thing and will try to get Text Width of any given string. It will be pretty close. There are a couple of ways you can do that but we will be using canvas for our purpose. Ok so lets go ahead and check how can we do this The jQuery Plugin code [crayon-5b28a5c4c5ff7145572554/] As you can see that we have a fall back method too just in case canvas is not available. Let me now show you how to use it The our example markup Here is a quick example markup that you can use to test it [crayon-5b28a5c4c6003089067891/]   Usage [crayon-5b28a5c4c600a137600440/] If you have something to add in above code and would like to improve it or correct my tiny brain please leave your comments so that I can update my code. Same method is used for my another plugin called jcElasticTextBox that you can get from Google Code. I hope that this helps. Cheers, … [Read more...]

Free Online speech to text editor

Hello, Yes! I know I am a lazy typist and do not like to type at all. Rather this content that you are reading right now is a copy paste from my experimental site called http://ispeaktext.com. Before you proceed with the link above please note this point that iSpeakText only works with on Google Chrome Basically this site is a text editor. You can play around with it. The coolest thing about it is that it takes voice commands. There are over 25 voice commands supported. It will take you some time to get used to with this text editor. I will share a video that I have done on how to use this tool. Here is a list of commands that this editor will accept as voice commands.   Voice command What does it do? Delete all When you say "Delete All", everything in your editor will be removed. I mean all the text. Delete last line Deletes the last spoken line Select All All text will be selected so that you can CTRL+C to copy it. You can also say "Delete" after this command to clear everything in your editor. Select last line Selects the last list. This is handy be you can convert your last spoken line to Heading, Bold text, italics etx by saying commands "Header", "Bold", "Italic" etc respectively. Unselect Unselects the selected text Backup Temporary backup. I recommend that you backup your work time to time. You backup stays till you close your browser or your session is Inactive for long. Restore Said something bad. You can restore your backup with speaking this command. Bold Convert selected text to bold. Saying it twice will toggle this style. Italic Convert selected text to italic style. Saying it twice will toggle this style. Header Convert selected text to H1 header. Saying it twice will toggle this style. Find Opens "Find text" dialog box Replace Opens "Replace text" dialog box Link Opens "Link" dialog box Number List Starts numbered list. Follow it … [Read more...]

HTML5 desktop notifications

Hello, Everyday we learn something new, sometimes because we are curious how things work and sometimes because time require us to learn. I did learn how to display desktop notifications a while back but today I end up using them. They are supported by webkit browsers such as chrome. I will go through a simple Object that I've written to give you what;s required. You can't believe your eyes when you see it as simplest thing you may have ever done or learnt Here is a simple JS class The Javascript [geshi lang="javascript" nums="1" target="_self" ] [crayon-5b28a5c4c66d1531321647/] Lets check the markup for our example code The Markup We have two anchors and we will bind click handlers to both of them as shown in Usage section [crayon-5b28a5c4c66dd990107744/] Usage Here is a quick usage example for the above object. [geshi lang="javascript" nums="1" target="_self" ] [crayon-5b28a5c4c66e4883350230/] [crayon-5b28a5c4c66ea810591976/] As you can see that its pretty straight forward stuff and is very easy to understand. Its time for a Demo Demo Here is a quick demo http://jaspreetchahal.org/examples/jquery-examples/notifications.html Screenshot Desktop notification will look like this As you can see above that we are making use of all three elements for our notification i.e. Image, Title and description I hope that you will find this post useful. If you have something to add please let me know via comments and I will make corrections or additions based on your input. Cheers … [Read more...]

HTML5 window.sessionstorage

Hi Guys, In my previous post I highlighted how we can make use of localStorage for persisting data on users machine. In this post I will be highlighting localStorage counterpart called sessionStorage If you are interested reading my previous post if can be found here http://jaspreetchahal.org/html5-persistent-storage-using-window-localstorage/ Window.localstorage vs window.sessionStorage There is one basic difference between these two objects window.localStorage persist data permanently whereas data persisted by sessionStorage is only available till the user close his browser. Now that we are sort of clear what these two objects are for, lets now go a little bit deeper to understand how things work with sessionStorage object. Important functions that you should be aware of in sessionStorage object are getItem() - gets value of a stored key setItem() - sets value of a key clear() - clears session You have to remember that sessionStorage maintains a storage that is only available for the duration of the page session. A page session lasts for as long as the browser is open and survives over page reloads or restores. Another thing to note is that if you end up opening the same URL in another tab of the same browsers the session will be re-initiated. Let me try to explain using an example The Markup Here is a basic markup that we will make use of [crayon-5b28a5c4cb636749017280/] Ok so the above code is really simple to understand I guess. We have a Textarea and a hyperlink and a DIV with ID msg to display a message Idea is that when user will click on the Save button it will send the textarea value to session storage. Note that the saved data is available for currently opened browser tab or window only. Lets make use of the jQuery to handle clicks and make use of sessionStorage The Javascript Here is the javascript that we will be using to store our textarea value [crayon-5b28a5c4cb645825073585/] Ok so … [Read more...]

html5 persistent storage using window.localstorage

Hello, In this post I would like to show a really cool feature that you can make use of in HTML5 that enables us to use local storage on users device such as a PC. As long as the browser supports localStorage you should be good to go. Here is a read about Webstorage standard http://www.w3.org/TR/webstorage/ Ok so lets start. I will divide this post in 3 sections, First I would like to show you the markup that we will be using to demonstrate this functionality and then the Javascript code and then I would like to direct you to the DEMO to try it yourself. The Markup Here is a basic markup that we will make use of [crayon-5b28a5c4cbd1f880877184/] Ok so the above code is really simple to understand I guess. We have a Textarea and a hyperlink and a DIV with ID msg to display a message Idea is that when user will click on the Save button it will send the textarea value to local storage container. Note that we are not sending this data to the server itself Lets check the Javascript code. I am making use of jQuery here but the core couple of lines are traditional javascript. The Javascript Here is the javascript that we will be using to store our textarea value [crayon-5b28a5c4cbd2b802558583/] [crayon-5b28a5c4cbd31722772786/] [crayon-5b28a5c4cbd37673994520/] Pretty straightforward! right? Ok let me explain the above code. On window.load we are loading value of our stored property called myStoredVal to our textarea. We are also handling click event on our anchor tag and thats when the line below does the magic [crayon-5b28a5c4cbd3d845172632/] As you can see that localStorage is an object under window object and I think that's pretty right place to keep it and offers functionality to store and retrieve our stored data. Important functions of localStorage object As you can see above that 2 of the important functions under loadStorage are setItem() - to store a value getItem() - to retrieve a stored … [Read more...]

HTML5 attribute hidden equivalent to CSS’ display:none

Hello, While I am becoming more and more aware of some of the key features of HTML5 I would like you to know that there is a new attribute that you can make use of which is called [crayon-5b28a5c4cca99420388598/] This attribute serves exactly the same thing that our old friend display:none does So in CSS we used this [geshi lang="css" nums="1" target="_self" ] [crayon-5b28a5c4ccaa4958738085/] And then we apply the above style to an element as [crayon-5b28a5c4ccaab230246888/] Now lets do the exact same thing with our new HTML5 friend "the hidden attribute" We can use hidden attribute 3 ways. As bool [crayon-5b28a5c4ccab1323581515/] As string literal [crayon-5b28a5c4ccab6564031340/] or as an empty string literal [crayon-5b28a5c4ccabc115314931/]     Browser support No surprises here that IE does not support it. All other major browser do support it which includes firefox, chrome, opera, safari Using hidden attribute With jQuery This is pretty simple and we will do it the standard way we add attribute to an element Here is a quick example [crayon-5b28a5c4ccac3277357282/] As you can see that the element with ID hide_this_element will not appear on the page as a result of above jQuery code. jQuery with fallback [crayon-5b28a5c4ccac9379887856/] [crayon-5b28a5c4ccacf170203762/] [crayon-5b28a5c4ccad5382467098/]   I am in double mind to use it because there are few HTML things that when kept to HTML core looks more syntactically correct but anyone can argue on this point. I will. For the time being though I will still be using my beloved CSS display: property. It will be another few years before we see standards getting adopted by major browsers as soon as they become standards. I hope :) I hope that you find this writeup useful. As always your comments are always welcomed Cheers. … [Read more...]

HTML5 CSS3 glowing border for input text, textarea

Hello, CSS3 and HTML5 are two technologies which I am trying to mater but there is so much to cover. I write post of these sorts so that the thing that I learned today stick with me. Someone said that "A dullest pencil is better than a brightest memory" -  so my writings serves as notes to me more too often too. In this post I am going to show you how you can make your textfields and textareas glow when they get user focus. The output will be something like this Ok so lets let back to business. Let take the markup below to start with The Markup [geshi lang="html5" nums="1" target="_self" ] [crayon-5b28a5c4cd436810774182/] Now lets see what will make them glow. I will through 2 themes but you can change colors based on your website's theme The CSS - Grey theme [geshi lang="css" nums="1" target="_self" ] [crayon-5b28a5c4cd442863516771/]     The CSS - Red theme [geshi lang="css" nums="1" target="_self" ] [crayon-5b28a5c4cd44a805087381/] The Demo Demo for the above code can be found here http://jaspreetchahal.org/examples/css-examples/glowing_form_input_textarea.html Notice the way I used attribute autofocus in the first textfield in our example markup? If you want to learn more about this attribute please read this. http://jaspreetchahal.org/html5-auto-focus-textfield-textarea-example-without-using-javascript/ If you would like to add more to the above examples please do so using comments section. I hope that this helps Cheers,     … [Read more...]

HTML5 auto focus textfield, textarea example without using javascript

G'Day, How many times on various pages we have to do something like this [crayon-5b28a5c4cded6301294210/] to put that caret on to the textfield which we want user to enter something first or just to help our website user usability wise so that they don't have to click on textfield before they start typing. Its a good practice to help users as much as possible, thus improving usability of your web forms. Its not always essential but definitely good to have on all page. Ok without wasting more time on my blah blah lets get to the point. In HTML5 we have a new attribute autofocus that is supported by majority of the web browsers except Internet explorer. Usage You can include this attribute in one of the following three forms. autofocus="autofocus" autofocus="" autofocus Second and third option will work because autofocus attribute is treated as bool. much like readonly and disabled attributes if you remember them Consider this form     The Markup [geshi lang="html5" nums="1" target="_self" ] [crayon-5b28a5c4cdee2416806745/] If you open this form in any browser but IE autfocus will kick in and default focux will be on first_name textfield Now say if you keep repeating this attribute on all the input elements such as input, textare, select etc then the last one holding the autofocus attribute will get focus. so consider this example [geshi lang="html5" nums="1" target="_self" ] [crayon-5b28a5c4cdeea755684649/] [crayon-5b28a5c4cdef0959887959/] As you can see that the autofocus attribute is used on two of the 4 input element in the form above thus the element that will have focus in the end will be the textarea     Advantage of using autofocus attribute No need of javascript much cleaner code Drawback IE and other old browser have no support for autofocus attribute you will have to write a fallback in javascript. I hope this helps If you have … [Read more...]

HTML5 CSS3 Fixed footer

Hello, Sometime we want a footer that stays where it is supposed to stay i.e. at the vertical end of the page. We don't have to worry if user scrolls or not it just stays there. In the page layout we are left with pretty much standard components or you can say containers namely Header (carries navigations, logos etc) Content (could be subdivided) Footer(carries links that company want you to see regardless which page you are browsing) With HTML5 we got a special tags namely header and footer Here is an example footer that uses twitter bootstrap styling The Markup [crayon-5b28a5c4ce5fa541309589/]   Before I continue, first thing first. Because of browsers which don't know about HTML5 tags or in other words they are not compatible with HTML5 I recommend you making use of this very useful library for rendering your styles correctly. https://github.com/aFarkas/html5shiv Download and put html5shiv.js on your pages which enables you to make use of HTML5 sectioning elements for example header, footer, article etc. Include it like [crayon-5b28a5c4ce606638518404/] Once you have done that the styles shall work on likes of browsers such as  IE7, IE8 etc Now lets do the CSS bit and fix it at the bottom. The CSS for sticky footer in HTML5 and with CSS3 [geshi lang="css" nums="1" target="_self" ] [crayon-5b28a5c4ce60d175358516/] The above CSS is enough to make your footer sticky. It is recommended that you shouldn't use any margin in vertical styles else you would have to adjust style values accordingly. You should adjust Footer's internal container width accordingly to center it. Here is a demo for what we have done above The Demo http://jaspreetchahal.org/examples/css-examples/fixed-border-html5-css3.html Please note That other CSS classes used such as row, span2, offset* etc are inherited from twitter bootstrap I hope this helps you If you have any questions do leave your comments and someone … [Read more...]