Solving development problems  |  About this blog

There are a lot of QR Code generators on a web and there is also listed our generator – available at http://www.esponce.com

It already went over simple generator functionality and new features are adding.

QR Codes Generator and API

Basically, beside QR Code generation, we are offering as addition:

• Tracking of generated QR Codes – for marketing managers ti know which locations work best (i.e. posters with printed QR Code)
• Dynamic QR Codes – if some QR Code is already printed you can make it point to completely different URL without changing the printed code
• Adding your logo inside QR Code (with readability testing) – branding feature
• All types of content are supported (hyperlinks, custom text, vCard, Bizcard, Mecard, vCalendar, social networks – Twitter, Facebook, YouTube, Geo locations and maps, SMS messages, phones,…)
• Strong use of API – automating generation process and possibility to use from your application/website – this is what we will talk about a little bit more in this article…

Using API is not complicated at all, we wrote a tutorial which is easy to understand.

Here is an example how you can have instantly QR Code image on your website:

This are direct links:

• Hello World custom text
• Google Maps location of company’s office
• QR Code generator URL

This how it could look like inside your website (just put this hyperlink inside your IMG tag)

<img src="http://www.esponce.com/api/v2/generate?content=
http%3a%2f%2fmaps.google.com%2fmaps%3ff%3dq%26q%3d46.043286%2c14.492791300000022%
26q%3d30%2bTeslova%2bUlica%252c%2bLjubljana%2b1000%252c%2bSlovenia&
format=png&padding=2&size=10&em=byte&ec=m" alt="Avivo location" />

We experienced a problem using attr(“value”) JQuery function when selecting values that are not integers.

So if you have:

  <ul>
    <li id="li1" value="1">One</li>
    <li id="li2" value="2">Two</li>
    <li id="li3" value="3">Three</li>
    <li id="li4" value="4">Four</li>
  </ul>

It is working OK.

  $(function() {
    alert($('#li2').attr('value'));
  });

But if you have (string as values instead of integers):

  <ul>
    <li id="li1" value="One">One</li>
    <li id="li2" value="Two">Two</li>
    <li id="li3" value="Three">Three</li>
    <li id="li4" value="Four">Four</li>
  </ul>

This is not working.

  $(function() {
    alert($('#li2').attr('value'));
  });

Solution (rename value attribute to something else):

  <ul>
    <li id="li1" tag="One">One</li>
    <li id="li2" tag="Two">Two</li>
    <li id="li3" tag="Three">Three</li>
    <li id="li4" tag="Four">Four</li>
  </ul>

This is now OK.

  $(function() {
    alert($('#li2').attr('tag'));
  });

Conclusion:

Do not use reserved attributes as your custom attributes (where HTML element does not support them).

As written in this article …

$.fn.myFunction = function()
{
  return $(this).addClass('changed');
}

And now, use it like this:

$('.changePlease').myFunction();

<ul class="menu">
  <li class="page_item">First Item</li>
  <li class="page_item">Second Item</li>
  <li class="page_item">Third Item</li>
  <li class="page_item">Last Item</li>
</ul>

<script type="text/javascript">
  $(function()
  {
    //Add css classes to first and last item in the html list
    $('ul.menu li:first-child').addClass('first_item');
    $('ul.menu li:last-child').addClass('last_item');
  });
</script>

If you want to quick test some functionality in JavaScript (fast clicking) then classic alert function is not a solution.
You can use this print function to simulate alert function. It writes message to a div, and if you want multiple divs just comment the code where existing div is reused.

Example od use:

print('your message', 'message box title');

function print(txt, title)
{
  txt = txt.replace(/\n/g,"<br />");
  if(!title) var title = "Message title";
  var template = "<center><div id='message_box' style='width:50%;"+
    "border:2px outset #ccc;background-color:#eee;'>"+
    "<div style='background-color:#5d5d92;color:#fff;font-weight:bold;"+
     "padding-left:5px;'>%TITLE%</div>"+
    "<div style='padding:15px;'>%TEXT%</div>"+
    "<center><input type='button' value='    OK    ' "+
    "onclick='document.getElementById(\"message_box\").style.display=\"none\"'"+
    " /></center>"+
    "</div></center>";

  var to_write = template.replace("%TITLE%", title);
  to_write = to_write.replace("%TEXT%", txt);

  if(document.getElementById("print_area"))
  { //If the 'print_area' exists, just write our data into it.
    document.getElementById("print_area").innerHTML = to_write;
  }
  else
  { //Else create the element before writing the data.
    var div = document.createElement("div");
    div.setAttribute("id","print_area");
    div.innerHTML = to_write;

    var body = document.getElementsByTagName("body")[0];
    	body.insertBefore(div,body.firstChild);
    //OR body.appendChild(div); //This will insert the message box at the end of the page.
  }
}