I recently came across a 2 dimensional barcode called QR Code. QR code’s are popular in Japan and they are mainly used there to quickly get to some website on their mobiles by simply taking a picture of the QR code. You may read more about QR codes on Wikipedia.
Here is an example of QR code for jQuery HowTo blog:
If you have a QR code reader on your mobile take a picture of it and it will open this website. Cool ha?!
Anyway, there are plenty of free online QR code generator sites, but no JavaScript and jQuery plugins/functions. So, I quickly searched for a free online QR code generator sites with “friendly” URL’s and put together a javascript and jQuery functions that generate QR barcode image’s URL for passed URLs. I used Kaywa & University of Bath services.
See jQuery and QR code in action on this demo page.
Here are javascript and jQuery QR code functions:
// JavaScript function function qrcode(url, size){ if(typeof(size) == 'undefined') size = 8; return 'http://qrcode.kaywa.com/img.php?s='+size+'&d='+url; } qrcode('http://jquery-howto.blogspot.com'); // jQuery plugin (function ($) { $.fn.qrcode = function(url, size) { if(typeof(size) == 'undefined') size = 8; return 'http://qrcode.kaywa.com/img.php?s='+size+'&d='+url; } })(jQuery); $().qrcode('http://www.google.com');
The code above utilizes Kaywa’s online QR code generator. You can specify image site as the second argument to the function. The size argument mut be between 1 and 40 and the generated image will 32 x your argument.
Here is javascript and jQuery code for University of Bath barcode generator:
// JavaScript function function qrcode(url){ return 'http://go.bath.ac.uk/qr/download?DATA='+url; } qrcode('http://jquery-howto.blogspot.com'); // jQuery plugin (function ($) { $.fn.qrcode = function(url) { return 'http://go.bath.ac.uk/qr/download?DATA='+url; } })(jQuery); $().qrcode('http://www.google.com');
NOTE: You can encode plain text messages. They are not limited to URLs...