CSS3 Using attr() function with content property

Hi Guys, While working on css3 pseudo classes I came across this beauty, that could be handy just in few cases. You can read more about attr() specs here http://www.w3.org/TR/css3-values/#attr Anyway lets talk a little bit more about this function. Key things you should remember are In CSS3 attr() can return different types in contrast to CSS2 implementation where it would only return string Purpose of attr is data related not presentation related It must be used with attribute names such as data-*  There is better way to understand other than when its shown implemented. Consider this example The Markup We will work with a basic markup and will only define a DIV as shown below [crayon-541fd9480a722890813273/] [crayon-541fd9480a739684443379/] Nothing complicated in our DIV above. The only thing you should note is that I defined few custom attributes such as data-name, data-href, data-phone  The CSS Now lets check the CSS side of things [crayon-541fd9480a743953263211/] As you can see that we are using our attr() with content property and we are making use of our custom attributes and using them as fill values for blanks. Demo See above implementation in action by visiting the example page below http://jaspreetchahal.org/examples/html5/attr.html As you can see that CSS is becoming more powerful with every release with functions such as attr() being added/improved. I still sometimes wonder if that is actually an overhead when performance is something that you are looking for. I hope this helps   … [Read more...]

Using Font Awesome Icons in HTML5 Lists

First there is no difference as such in HTML4/5 lists as far as my knowledge goes. They render the same way so the title of this post is not misleading but I am just trying to stay up with the latest :) Anyway this post shows how to use Font Awesome in your Ordered or Unordered lists. The result will look like this First things first, if your browser does not support CSS pseudo classes then this approach will not work. You will be glad to hear that most of the latest browsers including Chrome, IE, Firefox supports them. If you have don't know what pseudo classes are then go look at this little tutorial http://www.w3schools.com/css/css_pseudo_classes.asp Anyway lets get back on track and see how the above is done. I assume that you correctly have included bootstrap, font awesome files on your HTML5 page. The Markup [crayon-541fd9480bb89029935356/] above is really basic markup that is required. I've added more lines just so it looks nice in the end. Now lets take a look at our CSS The CSS Here is the CSS that is required to give us the required result. [crayon-541fd9480bb9a840280947/] The most important bit in the above CSS is the use of psedo class :before and content that should go before each list item. Demo http://jaspreetchahal.org/examples/font-awesome-list.html A near full list of content values is pro Font Awesome Content Values - Quick reference - Without icons though Here is the Content values of icon- fonts, To integrate check this page out http://fortawesome.github.io/Font-Awesome/#integration icon-glass --> "\f000" icon-music --> "\f001" icon-search --> "\f002" icon-envelope --> "\f003" icon-heart --> "\f004" icon-star --> "\f005" icon-star-empty --> "\f006" icon-user --> "\f007" icon-film --> "\f008" icon-th-large --> "\f009" icon-th --> "\f00a" icon-th-list --> "\f00b" icon-ok --> "\f00c" icon-remove --> "\f00d" icon-zoom-in --> "\f00e" icon-zoom-out --> … [Read more...]

How to disable Autocorrect, spellcheck and autocomplete HTML5 Tip

Hi Guys, There are time when you would like to disable AutoCorrection, Spell checking, Auto Completion for your form fields. This is true when a field takes in values like names, addresses, phone numbers etc Even though mobile browsers and desktop browsers offers these as features to help users to make less mistakes with their typing and all but as stated there are times when they MAY be less desirable. Browsers such as Chrome, Firefox, Opera or even Internet Explorer helps developers out with disable these features, at form level and or at field level. Oh and we can also add fourth attribute to equation called AutoCapitalize Let me show you with an example but let me tell you about the property names first autocomplete values: on|off autocorrect values: on|off autocapitalize values: on|off spellcheck values: true|false The Markup [crayon-541fd9480c474071139534/] So the above will give us much to test on you can also use these properties at  form level as shown below [crayon-541fd9480c485548390104/] Here is a quick demo (Open this page in mobile browser and see if you can hit the nail with the demo provided) http://jaspreetchahal.org/examples/html5/disable_form_features.html I hope that this post was helpful. Just keep these properties in mind, at least if you know they exist you can use them at will and when most desired. You can prevent auto complete, auto correction, spell checking and auto capitalization just with ease. Cheers.   … [Read more...]

Image blur using canvas html5

G'day, While I was looking around for something with my not so relevant queries, I found StackBlur which does pretty good Job to blur an Image by introducing a Canvas layer on top of the Image. I guess it make sense to do it that way. The results is something that took me by surprise. They are pretty close to what we are used to in Photoshop filter called Gaussian blur. Let me take you through this and we will also build a jQuery plugin to generalize few things in the end. A simple functional Image blur example can be reached from the link provided below Demo You can view the demo here http://jaspreetchahal.org/examples/jquery-examples/jblur/image_blur_example.html Now that you've seen the demo lets cover it in detail. First get hold of latest StackBlur from here Scripts and Styles Below are the scripts and stylesheet that you will need to recreate the example [crayon-541fd9480cb6e602925934/] [crayon-541fd9480cb7f530623437/] The HTML [crayon-541fd9480cb89582590479/] [crayon-541fd9480cb94086636398/] The above stuff can be reduced to just couple of lines of code, but I just copy pasted from my code when I was trying to do a few bits and pieces but you'll get the Idea. The CSS Beautify it a little bit, but thats just me, for others I am spoiling the look and feel :) The JavaScript Below is the Javascript that we need to introduce a slider and stuff [crayon-541fd9480cb9e809543874/] What above code does is, it is introducing a slider and binding the stackBlurImage()  function to the slide event so that our slider value become the blur radius. Above works but what if we have something similar to this [crayon-541fd9480cbab448098369/] Well thats exactly what we will be looking at next, New revised Markup [crayon-541fd9480cbb5181175303/] Our Little jQuery Plugin Code Please note that this plugin does not auto generate the slider control, slider control that is used in the example above, it from jQuery … [Read more...]

CSS3 form field highlight spotlight on focus HTML5

Hi Guys, Well there are times when you want to add some sort of interactivity to your webpage, one of those is when you introduce modal windows, where user fills up something and take any action "in form" of hitting a button or something. Long story cut short is that you just want to highlight an area which you think is most important to the user. We will do something cool with our form fields today, that will give you an idea what I am talking about. The Markup Below is the basic easy to understand markup that has nothing but form fields as shown below [crayon-541fd9480d75c708306626/] Nothing unusual that you couldn't understand above Now lets check out the CSS part and that is the most important one to introduce our so called dialog mask for textfields/textareas etc The CSS The only CSS bit or style that is required is listed below   [crayon-541fd9480d76c310677562/] Result   Demo Here is a quick demo to what I am talking about. http://jaspreetchahal.org/examples/html5/formfieldfocus.html Tested on All major Latest browsers   I hope this little trick is anyhow useful to you :) Cheers, … [Read more...]

twitter Bootstrap site is non responsive on phones and tablets

Hello, This is more of a question of whether you are using correct meta, styles and javascript lib or not on your pages. Generally nowadays you will use CSS frameworks like Bootstrap and rely on them for responsiveness of your pages. Lets see what's bare minimum requirement for your pages to work and look good if you are solely building your pages with twitter bootstrap The CSS You should be including the responsive CSS stylesheet provided with bootstrap [crayon-541fd9480ddd7000004274/] and then you should include jQuery and bootstrap.js files on your page before the body end tag as shown below [crayon-541fd9480dde6974198423/] Don't forget to add viewport meta tag in your head element as shown below [crayon-541fd9480ddf1702713922/] So the bare minimum HTML template for twitter bootstrap is shown below   [crayon-541fd9480ddfb382723779/] In addition to above you can also put a mobile friendly icons links as shown below   [crayon-541fd9480de07414056994/] so the final template will be [crayon-541fd9480de11087693209/] [crayon-541fd9480de1d549135953/] The above should also be included inside the head element. Now when you try to view your site on your iPhone or Android phone you will see your site behaving properly layout wise. Always try to use bootstrap grid system for column based layouts.   Resources http://twitter.github.com/bootstrap/index.html If this post needs any correction please let me know by leaving your comments. I hope this helps Cheers.     … [Read more...]

jcedit: A jQuery Plugin for contenteditable containers

Hi Guys, Here is a skeleton jQuery plugin that you can use on various pages to get people to send you corrections on the web pages of yours. Let me explain a bit more. So this plugin was written to help me with my work with a WordPress plugin of mine that allows in article editing and correction suggestion to be sent to the author/administrator. The WordPress plugin is called WP Errata and will be available from Wordpress.org But lets talk about this little jQuery plugin and I will take you though some key things that this plugin does. Example markup [crayon-541fd9480e8cb319971839/] So the above markup is something that we will need. It doesn't matter if you include contenteditable="true" or not, as long as you are including class="jcedit" or your own within the div element, see the usage section Usage This plugin allow hook functions when user resets or hit save button and these actions can be overridden by following functions [crayon-541fd9480e8dc823896127/] As you can see that by default the functions will have old and new content available through params. So a quick usage example will be   [crayon-541fd9480e8e7569932399/] .jcedit is the default class that we have applied jcedit to but you can have your own hook classes. It shouldn't matter. There is a good Stack print when you pass on debug: true some maybe useful info is printed out. Styling Here is the default stylesheet that you can edit if you are not happy with default styles. [crayon-541fd9480e8f5670676783/] Above is pretty much very simple styles definitions that can be edited with ease     Version Current version 1.0 Demo Ok here is a quick demo of this plugin http://jaspreetchahal.org/examples/jquery-examples/jcedit/jcedit.html If you have any question regarding this demo please let me know Compatibility This plugin should work if contenteditable is supported by your browser. This plugins has been tested on … [Read more...]

HTML5 vibration API with code examples

Hello, While reading more and more about HTML5 and working with it nearly everyday there is something new you end up doing everyday. Yesterday I was doing a bit of reading and came across the Vibration API so let me share you few things about the vibration API.   Why would you use a vibration API Well I can think of a few usage scenarios and the one that is more obvious is to when you alert user about something in your mobile application it would be fun if you can add a little bit of shake so that an alert becomes a little bit more exciting. Or if you are a game developer then you can use it when a guy snaps a punch on other guys face. Think of anything that result in some sort of a shock you can use vibrations to make that shock more realistic Lets start  looking more in depth of this API Detection With new APIs introduced not all browsers support it out of the box so it makes sense to detect the API support first and then do something cool with it. Firefox for Android as of writing support this API Here is how we can detect the vibration API supports [crayon-541fd9480f3e2022431605/] Usage Now that we have seen how to detect the support for lets now check out how to use the vibration function Here are couple of ways you can use the overloaded vibrate [crayon-541fd9480f3f7373674098/] so above is translated to following for real app situation [crayon-541fd9480f403422708846/] Cancelling the vibration Cancelling the vibration is quite simple and here is an example to cancel the vibration [crayon-541fd9480f40e475904313/] Quite simple ehh! You can use Javascript method such as setTimeout()/clearTimeout() and setInterval()/clearInterval() to control the delay or repeats for vibrations. As web is moving more towards HTML5 now is the time to get used to new API. More browsers will be supporting these sort of new API. Browsers such as Chrome, Safari and Firefox and even Opera are pretty aggressive … [Read more...]

HTML5 File API – Part 1: FileList and File interface example

Hello, In this post I will be talking about new HTML5 file API. Please let me know if this post can be improved. File API will be touched on in 3 posts in HTML5 category. Introduction - this post File Reading Extended specification - creating a local file on clients machine Lets start knowing about File API. So up until now there have been no support for local file reading or writing but with HTML5 this is changing without compromising the security of course. The File API from my personal point of view is great addition and allows us to Read information about the selected files Read actual contents of the file. In this post I will concentrate on FileList and File interfaces. Let me first of all make a point clear about the security Security Now because File API works with files that are outside the working area of browser on client's machine, it is obvious to get concerned about security. Alright so from the specification it is understood that File API will only work with the user selected files. i.e. File API will not be able to provide you with a Directory structure or work on files on its own rather if will only work with user selected files or files that user is giving exclusive permission to be read. FileList and File interface Lets now check these two interfaces. I will give you a demo to work with and you can see yourself. Before we jump on that I would like to make this point clear that at the time of writing File API works on Chrome 9+, Firefox 3.6+, IE10+, Opera 11.1+ In this exercise we will create a File input box and once user select some files we will output key meta information of the selected files. The Code [crayon-541fd9480fbaa857110279/] Demo Demo for the above listing can be found here http://jaspreetchahal.org/examples/html5/html5-file-api-intro.html We will look into a little bit more complex example in post 2 that will touch base on FileList and File interface again and also touch base on … [Read more...]

HTML5 canvas export as png or jpeg

Hello, Today we will see how we can export our canvas to an image in well known formats png jpeg I will also give you a trick to download a file the HTML5 way using the new download attribute that ships with HTML5 out of the box Lets start with declaring our markup The Markup [crayon-541fd94810342753393278/] Above markup is pretty much what I have used in my previous posts so it must be now familiar to you. Notice our anchor tag has a click event handler. Lets now check what JavaScript functionality is required. There are gazillion ways to do what I have done below so don't judge on the code but rather see how our problem is solved.   The JavaScript [crayon-541fd94810358215554304/] So we are just drawing a string "This canvas will be exported" on our canvas and our exportCanvas() method is responsible for exporting our canvas to an image file that opens in new window from where users can right click on the image and save it on their disk. Notice this line [crayon-541fd94810368719479417/] Thats where we are telling our canvas function to export it as png file. To export it as jpeg do this instead [crayon-541fd94810373381000586/] Demo http://jaspreetchahal.org/examples/html5/canvas-image-export.html Above is just a basic usage example. But you should get an idea Another way to force download an image using JavaScript would be to feed our canvas data URL to an anchor href with download attribute as shown below The Markup (method 2 - force download) Be aware that this works only on browsers that supports download attribute such as Google Chrome. We will change our exportCanvas() method in a sec. [crayon-541fd9481037e553465534/] The Javascript Updated exportCanvas() method is shown below [crayon-541fd94810389222573461/] Remember that this is just a pointer. How you end up using above functionality is solely upto you. Also remember that download attribute is not supported in majority of … [Read more...]