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?

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?

• javascript
• jquery
• css
• kendo-ui
• qr-code

1 Answer 1

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./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./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/ysffjujh/1/. In both cases, you just need to update the values of height and width to generate a different size QR Code.