How to resize QR code?


Tags: javascript,jquery,css,kendo-ui,qr-code

Problem :

My current HTML code:

<input id="text" type="text"/>
<div id="qrcode"></div>

My OLD JAVASCRIPT code:

var qrcode = new QRCode("qrcode");

$("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();

$("#qrcode").kendoQRCode({
  value: "#test"
});

$("#qrcode")
   .css({ width: "100px", height: "100px" })
   .data("kendoQRCode").resize();

My current JAVASCRIPT code:

var qrcode = new QRCode("qrcode");

$("#qrcode").kendoQRCode({
  $("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();
});

$("#qrcode")
   .css({ width: "100px", height: "100px" })
   .data("kendoQRCode").resize();

I'm using JQuery UI 1.9.2 , qrcode.min.js and kendo.all.min.js

For my OLD JAVASCRIPT, it print out 2 different qrcode. For my current JAVASCRIPT, it doesn't print out anything. I have tried different way to resize it by using css but it doesn't work as well. How to solve it?Any idea?



Solution :

According to Kendo UI QRCode documentation, to set the size of the QR code, you need to use the parameter size in pixels. Like this:

$("#qrcode").kendoQRCode({
    value: "#test",
    size: 300
});

That will generate a QR code of size 300px by 300px.

And according to the documentation for qrcode.js, to set the size of the resulting QR code you can use the width and height parameters like this:

var qrcode = new QRCode("qrcode");

var qrcode = new QRCode("test", {
    text: "http://jindo.dev.naver.com/collie",
    width: 400,
    height: 400,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

In this case, the QR code will be 400px by 400px.


As for the second part of the question, why before you got 2 QR codes and now you don't get any, that's because before you were creating two:

// One QR Code here using qrcode.js
$("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();

// Another QR code here using Kendo UI QRCode
$("#qrcode").kendoQRCode({
  value: "#test"
});

And now you are not getting any, probably (and I have not tested this, so I may be mistaken) because this code is wrong:

$("#qrcode").kendoQRCode({
  $("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();
});

You are trying to create a QR code using Kendo UI QRCode, but the parameters passed are incorrect (it's an event listener that generates the first QR code). If you look at the console, you'll probably see some error in that line of code.

You should probably try to go back to the original code, and add the size (or width/height) parameter as specified in the documentation.


As requested by OP, here is a functional code that will allow to set the size of the QR code using qrcode.js:

var qrcode = new QRCode("qrcode", { width:100, height:100 });

$("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://davidshimjs.github.io/qrcodejs/qrcode.min.js"></script>

<input id="text" type="text"/>
<div id="qrcode"></div>

You can also see it working on this JSFiddle: http://jsfiddle.net/ysffjujh/1/. In both cases, you just need to update the values of height and width to generate a different size QR Code.


    CSS Howto..

    What is the problem with Visual Studio.Net's “absolute positioning”, and how is that problem fixed by CSS's “absolute positioning”?

    How can I give a child element of one parent a higher z-index than another parent?

    how to i convert this asp.net list to html list?

    how to show section of a CSS sprite within a set position on the whole html body

    How to hide expand/collapse icon in vaadin treetable?

    How to force the casing of letters in a textbox

    how to increase the size of background image to cover all backgroung (but no repetition) [closed]

    CSS how to make an element fade in and then fade out?

    How to make 1 table scrollable with fixed header without affecting other tables in Bootstrap

    How/where to center Items on Webpage

    How to keep long image within background cover at any screen size in CSS?

    How can I get my text to hug around the top of my image?

    How to target the text in an element but not the text in nested elements with CSS

    How to use CSS to align a custom check box with its label?

    How do you refer to more than one .css file in html?

    how to affect an element's width by one child element but not others using CSS

    how to read value of style[“display”] property of webcontrol

    Leaflet for R: How to change default CSS cluster classes

    How to Surround Links with Bounding Box Using CSS

    How to use CSS selectors to retrieve specific links lying in some class using BeautifulSoup?

    How to position my embedded flash file

    CSS Rotation and Styling - how to?

    How to add padding to the outside of an input in css

    CSS: How to shadow a field like this? [closed]

    How to change my online store template in dbdirector ecommerce platform

    How do I get the name of div a user must click to appear in a text div?

    How to get css property of a DOM element server-side?

    Please help me understand how to make my first jquery slider

    How to do page / content transitions

    How can i execute two effects on .mousenter THIS?