Avivo Tech Blog » HTML, Javascript and CSS

The easiest way to generate a QR Code for software developers

developer — Tue, 24 Jan 2012 14:46:11 +0000

So you want to simply generate a QR Code image without diving into the technical specifics? This blog post contains a few simple examples. Just copy-paste where you need it.

Idea is to build a URL, make an HTTP request and download the QR Code image. Result is the following image:

HTTP Request

URL looks like http://www.esponce.com/api/v3/generate?content={content}&format={format} where {content} is URL encoded content to be embedded in QR and {format} is output image format. Available formats are png, jpg, bmp, tif, xaml, svg, eps, txt, html, zip (containing all listed formats)

List of other parameters like color and size can be found here.

C# Sample

This code can be used in .NET 2.0 including ASP.NET and WPF or Silverlight for web or WP7

using System;
using System.IO;
using System.Web;
using System.Net;

public class Program
{
  public static void Main(string[] args)
  {
    //Generate a QR Code and save it to file "sample.png"
    Generate("your content goes here", "png", "sample.png");
  }

  public static void Generate(string content, string format, string path)
  {
    string encoded = HttpUtility.UrlEncode(content);
    Uri uri = new Uri("http://www.esponce.com/api/v3/generate?content=" + encoded + "&format=" + format);
    WebClient client = new WebClient();
    client.DownloadFile(uri, path);
  }
}

Java Sample

This code can be used in a classic Java application or web applet or Android application

import java.io.*;
import java.net.*;

public class qrcode
{
  public static void main(String args[])
  {
    //Generate a QR Code image and save it to file "sample.png"
    generate("your content goes here", "png", "sample.png");
  }

  public static void generate(String content, String format, String path)
  {
    try
    {
      String encoded = URLEncoder.encode(content, "UTF-8");
      String url = "http://www.esponce.com/api/v3/generate?content=" + encoded + "&format=" + format;
      BufferedInputStream ins = new BufferedInputStream(new URL(url).openStream());
      FileOutputStream fos = new FileOutputStream(path);
      BufferedOutputStream bos = new BufferedOutputStream(fos, 1024);

      int size = 0;
      byte data[] = new byte[1024];
      while ((size = ins.read(data, 0, 1024)) > 0)
      {
        bos.write(data, 0, size);
      }

      bos.close();
      fos.close();
      ins.close();
    }
    catch (Exception e)
    {
    }
  }
}

Python Sample

Using Python 2.7

#!/usr/bin/env python
# -*- coding: UTF-8 -*-

import urllib
import httplib

def generate(content, format = "png"):
    query = urllib.urlencode({ "content": content, "format": format })
    con = httplib.HTTPConnection("www.esponce.com")
    con.request("GET", "/api/v3/generate?" + query)
    response = con.getresponse()
    image = response.read()
    con.close()
    return image

image = generate("your content goes here")
file = open("sample.png", "wb")
file.write(image)
file.close()

JavaScript Sample

JavaScript in combination with HTML

PHP Sample

" alt="QR Code" />

There is more

Download all samples with make script here.

Other QR Code related methods like decoding (reverse process of generating) and tracking scans can be found at esponce.com.

Very cool! Create TRIANGLE in HTML with CSS

Avivo — Wed, 31 Aug 2011 10:46:55 +0000

Triangle in pure HTML/CSS

Infinity in pure HTML/CSS

So, this is the CSS for triangle:

.triangle {
    border-bottom: 100px solid #FC2E5A;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 0;
}

All other custom shapes!

HTML Textbox or Textarea with padding and 100% width and horizontal scroller

Avivo — Tue, 14 Jun 2011 13:36:58 +0000

If you have a HTML textarea or textbox and give them 100% width and if these elements have padding then total width will be 100% + padding which is not wanted behaviour and you will get horizontal scroller.
In order to make it behave properly add this CSS styles to your textbox/textarea:

box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;

QR Codes API – automatically generated for given content

Avivo — Mon, 16 May 2011 18:31:05 +0000

There are a lot of QR Code generators on a web and there is also listed our generator – available at http://qrcode.good-survey.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:

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

Try it also by yourself – just download DEMO API application from CodePlex and you can play with supported API features.

JQuery problem with attr(“value”)

Avivo — Fri, 11 Mar 2011 14:10:23 +0000

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

So if you have:

  
    One
    Two
    Three
    Four

It is working OK.

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

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

  
    One
    Two
    Three
    Four

This is not working.

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

Solution (rename value attribute to something else):

  
    One
    Two
    Three
    Four

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).

Create your own JQuery function

Avivo — Thu, 17 Feb 2011 18:05:21 +0000

As written in this article …

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

And now, use it like this:

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

How to select first and last child / element with JQuery

Avivo — Tue, 15 Feb 2011 23:03:52 +0000


  First Item
  Second Item
  Third Item
  Last Item

JavaScript alert (message) box alternative

Avivo — Fri, 21 Jan 2011 10:51:21 +0000

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,"
");
  if(!title) var title = "Message title";
  var template = ""+
    "%TITLE%"+
    "%TEXT%"+
    ""+
    "";

  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.
  }
}

Preloading images with JavaScript (JQuery) and JQuery cool animations and effects

Avivo — Wed, 12 Jan 2011 16:29:02 +0000

Model 1:

Use function to replaceImage:

function replaceImage(img, replacementImage)
{
  img.onload = null;
  img.src = replacementImage;
}

blank.gif is an 1px x 1px pixel transparent image. Basically, the idea is that this blank image is loaded and expanded to 75×75 (to preserve layout). That almost immediately fires the onload handler, which changes the image’s source to the desired image.

Model 2:

var img = new Image();
img.onError = function(){
  //error handling here
}
img.onLoad = function(){
  //success
containerForImg.removeClass('loading-image').append($(img));
}
img.onAbort = function(){
  //user clicked stop
}
img.src = "http://example.com"   //loading begins NOW!

References:

http://goo.by/wE3TFa
http://goo.by/w7AjZN
http://goo.by/w0CsbA

Background image animations:

$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})

Recognize IE6 in HTML

Avivo — Thu, 06 Jan 2011 12:41:16 +0000

You can detect IE6 using HTML relatively easy and then show warning message that this is an old browser….

You can show outdated browser message like this: