Generating QR Codes in jQuery with jQuery.qrcode

You might not often need to dynamically generate QR codes in your web app but, when you do, jQuery.qrcode will be a timesaver. Written by Lars Jung, jQuery.qrcode is a wrapper to Kazuhiko Arase’s QR Code Generator.  There is a pure Javascript implementation of the original library so Lars wrapper only really makes sense if you are already using jQuery in your application but, if you are, it greatly simplifies the process.

Using jQuery.qrcode is as simple as including the library and calling it with the required parameters.


<!-- Load the libraries -->
<script src="jquery-1.10.2.js"></script>
<script src="jquery.qrcode.js"></script>

<!-- This is where the generated QR code will appear -->
<div id="img-buffer"></div>

<!-- Now generate the QR code! -->
<script>
    $('#img-buffer').qrcode({
    render: 'image',
    width: 400,
    height: 400,
    color: '#000000',
    text: 'http://dvolvr.davidwaterston.com',
    ecLevel: 'H',
    bgColor: '#FFFFFF',
    radius: 0.5
 });
</script>

The latest release (0.6.0) supports soft, rounded corners and the ability to embed an image or text in the centre of the code. There’s also a new interactive demo page that lets you to try out all the features, to see if the library suits your needs, before you download.

Because I could, I generated the QR code at the bottom of the right-hand sidebar using jQuery.qrcode.

More:

jList 1.6.0: Eight new functions added

Earlier today I pushed jList 1.6.0 to GitHub. This version of the library, which brings ColdFusion-style list handling to Javascript, adds eight new functions, bringing the total to thirty:

  • listConcatenate
    Adds one list to the end of another.
  • listDifference
    Returns the elements that are unique to each of two different lists.
  • listIntersection
    Gets the elements that are common to each of two different lists.
  • listRemove
    Removes elements in one list from another list.
    Matching is case-sensitive.
  • listRemoveNoCase
    Removes elements in one list from another list.
    Matching is not case-sensitive.
  • listReplace
    Replaces any occurrences of an element in a list with a different element.
    Matching is case-sensitive.
  • listReplaceNoCase
    Replaces any occurrences of an element in a list with a different element.
    Matching is not case-sensitive.
  • listUnion
    Combines the elements from two different lists.

For the first time, these changes were not made by me but by Chris Tsongas. This was the first time Chris had contributed to an open source project and he did a great job of adding new functionality as well as making sure all of the tests and documentation were brought up-to-date.

All documentation is updated so full details of the new functionality is on the jList GitHub page.

All eight new functions have also been added to jsFiddle should you wish to try them out first –

listConcatenate

listDifference

listIntersection

listRemove

listRemoveNoCase

listReplace

listReplaceNoCase

listUnion

jList 1.6.o can be downloaded for free from GitHub.

More:

Previously:

jList 1.5.0: Two new functions added

Even though I wrote the original, rather messy, version of jList over five years ago I’ve never had the need for a listContains function i.e. one that searches a list looking for an item which at least partially matches a string. Until now, that is.

Yesterday I pushed jList 1.5.0 to GitHub. This version of the library, which brings ColdFusion-style list handling to Javascript, adds two new functions, bringing the total to twenty-two:

  • listContains
    Determines the index of the first list element that contains a specified substring.. The search is case-sensitive.
  • listContainsNoCase
    Determines the index of the first list element that contains a specified substring. The search is not case-sensitive.

These functions look at each individual element of a list for a specific value.  Where the value being searched for is wholly or partially contained within an element  then the position of that element in the list is returned. Where no match is found, zero is returned.

For example:


jList.listContains("cat,dog,mouse,rabbit,lion", "bit")

would return 4 even though the value itself is not in the list.

All documentation is updated so full details of the new functionality is on the jList GitHub page.

The two new functions have also been added to jsFiddle should you wish to try them out first – listContainslistContainsNoCase.

jList 1.5.o can be downloaded for free from GitHub.

More:

Previously:

jList 1.4.1: a bug fix for listFind

Today I checked version 1.4.1 of jList into GitHub. This release contains only one bug fix – to listFind.

The listFind function uses array.indexOf to search arrays, if it is available (it is in all modern browsers). Where it isn’t available (e.g. in Internet Explorer versions prior to 9) I fall back to using a less efficient for loop. Unfortunately there was a syntax error in the fallback version that has been there from release 1. Of course, this should have been detected in testing, especially now that am I am using a Jasmine-based test suite, but the fact that it wasn’t emphasises one of the limitations of automated web testing – if you don’t run your test suite in a very broad range of browsers you’re running the risk of certain parts of your code never being tested at all.

jList 1.4.1 can be downloaded for free from GitHub.

 

More:

 

Previously:

jList 1.4.0: more validation and a Jasmine test suite

Earlier today I checked version 1.4.0 of jList into GitHub. This version adds:

  • More validation of input parameters
    When I first wrote jList I made a decision that there would be only the minimum validation of input parameters. This was to keep the file size down and also because it was for use by developers who should no better than to miss mandatory parameters. With this release I’ve relented a little – missing parameters will now throw an error. I’m still undecided about adding further validation in future…
  • Compatibility with jsLint Edition 2012-08-23.
    A recent change to jsLint meant that my missing parameter checks:

    if (tyepeof paramname === "undefined")
    

    were being flagged as errors. As full jsLint compatibility is an important part of jList these have been amended to the more appropriate and acceptable:

    if (paramname === undefined)
    
  • Jasmine test suite.
    The most significant change for this release isn’t to the code itself – I have added a test suite that allows future changes to be regression tested with the minimum of effort. Written in Javascript using the Jasmine framework, there are 250 tests that validate the output of each function. This is the first time that I have used Jasmine so it took a bit longer than I anticipated to learn the framework (though it is very easy) and create the test suite. It’s not perfect (I’m sure that I will add more tests in future) but it’s a very good start towards ensuring consistency from one change to the next.

jList 1.4.0 can be downloaded for free from GitHub.

 

More:

 

Previously:

jList: Version 1.3.0 adds three new functions

Today I pushed version 1.3.0 of jList to GitHub. This version of the library, which brings ColdFusion-style list handling to Javascript, adds three new functions, bringing the total to twenty:

  • listChangeDelims
    Changes a list delimiter.
  • listValueCount
    Counts the instances of a specified value in a list. The search is case-sensitive.
  • listValueCountNoCase
    Counts the instances of a specified value in a list. The search is not case-sensitive.

All documentation is updated so full details of the new functionality is on the jList GitHub page.

The three new functions have also been added to jsFiddle should you wish to try them out – listChangeDelims, listValueCount, listValueCountNoCase.

Previously:

jList: All functions now available in jsFiddle

jsFiddle is a free, browser-based, application for creating and running snippets of HTML, CSS and JavaScript. As each snippet is given a unique URL it can easily be shared, making it a great tool for testing, experimentation and collaboration.

All of the functions in the jList library, which brings ColdFusion-style list handling to Javascript, are now available as public snippets in jsFiddle so that you can try them out without having to download the source from GitHub. The fiddles available are:

 

Full list of fiddles

 

listAppend

listDeleteAt

listFind

listFindNoCase

listFirst

listInsertAt

listLast

listLen

listPrepend

listQualify

listRemoveDuplicates

listRemoveDuplicatesNoCase

listRest

listReverse

listSetAt

listSort

 

More:

 

Previously: