How to resize QR code? - javascript

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?

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.

Related

Using croppie to crop images without jquery

I am trying to add an image cropper to a website I am working on. The example I am basing it on is here:
https://jsfiddle.net/Twisty/afb76b7f/8/
The JS panel claims it is plain javascript, but it uses JQuery too ( if I am not wrong, not familiar with it at all ).
I am trying to remove it, to keep the website as easy to maintain as possible, but I am getting an error.
HTML:
<div id="page">
<div id="demo-basic">
</div>
</div>
CSS:
#page
{
background: #FFF;
padding: 20px;
margin: 20px;
}
#demo-basic {
width: 200px;
height: 300px;
}
JS
$(function() {
var basic = $('#demo-basic').croppie ( {
viewport: {
width: 150,
height: 150
}
});
basic.croppie('bind', {
url: 'https://i.imgur.com/xD9rzSt.jpg',
});
});
So, from what I understand, the first $( function () ) can be simplified by calling the onLoad method, and $('demo-croppie' ) can be simplified by using document.getElementById ( 'demo-croppie' )
So, the page imports the croppie javascript files
croppie.js
croppie.min.js
And tried to simplify the script like this ( onLoad event of page body )
var basic = document.getElementById('demo-basic').croppie({
viewport: {
width: 150,
height: 150
}
});
basic.croppie('bind', {
url: previewPictureSource,
});
But I get a reference error:
ReferenceError: croppie is not defined
I cannot find the croppie function anywhere, or understand how to associate it to an object.
Is there an obvious solution to this problem?
I am also happy to try any other library which crops image with a square resulting image, if anybody has more to suggest
You cannot call .croppie() on basic because you initialized it using VanillaJS. However, you can call .bind() on it directly:
basic.bind({
url: previewPictureSource
});
The documentation specifies that you can interact with a Croppie object in the following two ways:
// with jQuery
$('#item').croppie(method, args);
// with VanillaJS
croppieObject.method(args);
Check out the documentation here: https://foliotek.github.io/Croppie/

Chartist dynamic input

I'm making a website where users can upload data that will be displayed as a graph
HTML:<div id="data"></div>
test1.php outputs:,-0.05,-0.07,-0.07,-0.07,0.14,0.14,0.09,0.07,0.07,0.07,0.07,0.65,0.63,0.63,0.63,0.63,0.63,0.58,0.56,0.56,0.56,0.56,0.84,0.79,0.77,0.77
js/jquery:
$(document).ready(function(){
$("#data").load("test1.php");
var data = $("#data").text().split(",").slice(1);
new Chartist.Line(".ct-chart", {
labels: [data],
series:[ data ]
}, {
fullWidth: true,
height: 650,
chartPadding: {
right: 0
}
});
});
The graph does not show up and I get the error
Uncaught Error: Exceeded maximum number of iterations while optimizing
scale step
But if I type $("#data").text().split(",").slice(1) into the console and paste the output into labels and series it works fine it also works if you make data a normal array and don't get the data from the page
I assume you use the $.load function runs an xhr request. The XHR requests are normally Asynchronous (google the definition of the acronym AJAX) - therefore the data you are trying to input is not present at the time you need it. It is only returned from the php page, after all of the http-request is done - which is most likely after the Charlist.new() function has fired.
Look at the documentation here: http://api.jquery.com/load/
If you instead tried something like this (NOT tested):
$(document).ready(function(){
$.ajax("test1.php", {
success:function(response) {
var data = response.split(",").slice(1);
new Chartist.Line(".ct-chart", {
labels: [data],
series:[ data ]
}, {
fullWidth: true,
height: 650,
chartPadding: {
right: 0
}
});
});
}
});
EDIT: Ok i updated some code. As i said, This is untested. But this should steer you in the right direction. Try it now. If it doesnt work 100% do some testing and debugging, and maybe you'll learn something..

Increase the height of JSignature input area

I am using JSignature to accept the signature. How can i increase the default height? I tried giving height to the signature div but not working as expected.
Code:
<div id="signature" style="background-color:#fff9cb;border:0px;height:200px"></div>
How to fix this?
replace this line in jSignature Sample
var $sigdiv = $("#signature").jSignature({ 'UndoButton': true })
to
var $sigdiv = $("#signature").jSignature({ 'UndoButton': true, 'width': 400, 'height': 400 })
I've had trouble altering the size or the line width of the signature box in <div> (capture) and <img> (display) tags. Try modifying the size with jQuery (and make sure you have jSignature.js added to your project):
<div id="mySignatureBox" style="background:#000000; color:#ffffff"></div>
$('#mySignatureBox').jSignature({ lineWidth: 1, width: 700, height: 200 });
It seems you can also use percentage values, this did the job for me:
$('#signature').jSignature({
width: '100%',
height: 250
});

Javascript code not properly work in FireFox

<body>
`
<div id="page-wrap"> .... </div>
<script>
(function ($) {
jQuery(window).resize(function () {
var width = jQuery('#page-wrap').css('margin-left');
jQuery('#left-link').css({ width: width });
jQuery('#right-link').css({ width: width });
});
var width = jQuery('#page-wrap').css('margin-left');
jQuery('#left-link').css({ width: width });
jQuery('#right-link').css({ width: width });
})(jQuery);
</script>
</body>
and I create this script but don't play in Firefox and I cannot find the bug . Chrome and IE play correct .
What is it then that doesn't work?
Is it the code that is supposed to be executed on resize? Test it by using breakpoints in firebug or just print something to the console. Btw. you could make it look better by writing it like this
$(window).on("resize", function() { /* your stuff here */ });
or does it fail to adjust the width of the two elements you're trying to manipulate? In this case you should take a closer look at what value your width variable holds, maybe it is somehow computed in firefox.

preload with percentage - javascript/jquery

I did a Google search and I cannot find a way to do a loading with percentage. Anyone know how I can find an example of that?
I need a preload for a website from 0-100 without bar, before show the content, but I cannot find any example.
I recommend this plugin. Its amazing
download from http://demo.inwebson.com/download/jpreloader.zip
see in action here http://www.inwebson.com/demo/jpreloader/
<script type="text/javascript" src="js/jpreLoader.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('body').jpreLoader();
});
// ]]></script>
here are the links to new version jpreloader 2.1
http://demo.inwebson.com/download/jpreloader-v2.zip
http://www.inwebson.com/demo/jpreloader-v2/
If you mean you want to show the content only when it is fully loaded, you may try following two options:
1) wrap all content inside a <div id="wrapper" style="display:none;"></div> tag and on load complete event show it like this:
$(function(){
$("#wrapper").show();
});
2) If this still does not solves your purpose, you can load empty page and fetch content using ajax:
$(function(){
$.ajax({
.......//AJAX params
.......
success:function(msg){
$("#wrapper").html(msg);//DO NEEDFUL WITH THE RETURNED VALUE
});
});
EDIT: Using queryLoader script provided by gayadesign I was able to achieve some success :D
I had to made some changes to the queryLoader.js file from line 127 to 151. The changed script is as follows. Try it yourself.
$(QueryLoader.loadBar).css({
position: "relative",
top: "50%",
font-size:40px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
});
},
animateLoader: function() {
var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
if (perc > 99) {
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 5000, "linear", function() {
$(this).html("<strong>100%</strong>");//MY EDIT
QueryLoader.doneLoad();
});
} else {
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 5000, "linear", function() {
//MY EDIT
$(this).html("<strong>"+Math.round(perc)+"%</strong>");
});
}
},
You can't.
As zzzzBov said, it isn't known how much content there will be, or what size that content is.
You could 'fake' it, with something like this (for the example I am using images):
var percentCounter = 0;
$.each(arrayOfImageUrls, function(index, value) {
$('<img></img>').attr('src', value) //load image
.load(function() {
percentCounter = (index / arrayOfImageUrls.length) * 100; //set the percentCounter after this image has loaded
$('#yourProgressContainer').text(percentCounter + '%');
});
});
As I mentioned this isn't a TRUE percentage of the sites loading, but a rough estimate of the images that have loaded, assuming each image is roughly the same size.
See this Project. It does what you want nicely.
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
The demo is hosted here
http://www.gayadesign.com/scripts/queryLoader/
Download it here
http://www.gayadesign.com/scripts/queryLoader/queryLoader.zip

Categories