We Keep Coding

How to resize QR code?

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.

Working with JQuery animate and "this" selector

I'm working on what I thought would be a simple chunk of code, trying to dynamically (using 'this') animate div blocks to scale (zoom) to the size of the parent container (section tag) on click.
My HTML:
<section>
<div id="project"></div><div id="project"></div><div id="project"></div>
<div id="project"></div><div id="project"></div><div id="project"></div>
</section>
My JavaScript:
$("#project").click(function() {
$(this).animate({
opacity: 0.75,
width: 100%,
height: 100%
}, 5000, function() {
});
});
Both Jquery and Jquery UI are linked correctly from Google Libraries (so says my console), my console also tells me that there is a syntax error with an unexpected ",", however I am taking this syntax straight from JqueryUI.com. Any help is appreciated!
Additionally, I want to be able to dynamically select all other divs except the currently clicked div and remove them from the DOM (using display:none), just so it looks cleaner, but I don't know how to go about 'selecting' them in my code...
Thanks all! :)

you are missing quotes around 100% so your code will be correct like this
$("#project").click(function() {
$(this).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {
});
and please use unique IDs
Edit:
for using classes you can use something like that
$(".project").click(function() {
$(".project").css({'display':'none'});
$(this).css({'display':'block'});
$(this).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {
});

I want to be able to dynamically select all other divs except the currently clicked div and remove them from the DOM (using display:none), just so it looks cleaner, but I don't know how to go about 'selecting' them in my code...
var $project = $(".project");
$project.click(function() {
var thisDiv = this;
$project.each(function(index, elem) {
if (elem!==thisDiv) $(elem).css('display', 'none');
});
$(thisDiv).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {});
});

Making a div on the fly that is resizable not working

I have a function that creates a div on the fly using jquery, and the user can define several properties to style the div. The problem is that I want the div to be resizable but the resulting div is the size the user defines but I am not able to resize it.
this is my function:
function createDiv(id, divWidth, divHeight, divContent, divBgColor, opacity){
//FIRST HEX TO RGB FOR BG COLOR & OPACITY
var currentColor = hexToRgb(divBgColor);
//CREATE THE WRAPPER DIV
var wrapper = $('<div/>', {
id: id
}).css({
"backgroundColor": 'rgba('+currentColor+' '+opacity+')',
"min-width": divWidth,
"min-height": divHeight
}).resizable({
containment: 'parent',
minHeight: divHeight,
minWidth: divWidth
}).appendTo('.current-layer');
}
This is the call to the function:
onclick="createDiv('1', '200px', '100px', 'text', '#FF0000', 0.5)"
I hope someone can tell me what I am doing wrong! TIA

The parent(containment) must have a width/height higher than the min-width/min-height of the resizable.
Currently width and height is not set, so it will be 100% and 0
Result: you can resize the resizable:
width: 200px up to the width of the containment(100%)
height: 100px up to height of the containment(also 100px, derived from it's content), so the height is unresizable
Demo: http://jsfiddle.net/doktormolle/VnCHA/

I solved the problem and feel like bit of a muppet.
Because the div was created on the fly I had to make it resizable after it was appended to the DOM.

Change Height and Width of TextArea in codemirror

I am developing website which having xml, java programs. So i chose CodeMirror for displaying programs in TextArea. I had successfully displayed. It's default height is 300px in codemirror.css. How to change Height and Width of TextArea programmatically in codemirror?

The CodeMirror user manual is your friend.
Example code:
<textarea id="myText" rows="4" cols="10"></textarea>
<script type="text/javascript" language="javascript">
var myTextArea = document.getElementById('myText');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
myCodeMirror.setSize(500, 300);
</script>

myCodeMirror.setSize(null, 500);
You can pass null for either of them to indicate that that dimension should not be changed.
Documentation:
cm.setSize(width: number|string, height: number|string)
Programmatically set the size of the editor (overriding the applicable
CSS rules). width and height can be either numbers (interpreted as
pixels) or CSS units ("100%", for example). You can pass null for
either of them to indicate that that dimension should not be changed.

Although the answer from Christian is great, just a heads up:
Autoresize Demo.
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
By setting an editor's height style to auto and giving the viewportMargin a value of Infinity, CodeMirror can be made to automatically resize to fit its content.
Source: https://codemirror.net/demo/resize.html

As an extention to the correct answer:
If you want that it takes the whole size of the Parent element, you can use:
myCodeMirror.setSize("100%", "100%");

if you are doing this in react use ref
const codemirrorRef = React.useRef();
React.useEffect(() => {
const current = codemirrorRef.current.editor.display.wrapper.style.height = "1000px";
});
<CodeMirror
[...]
ref={codemirrorRef}
/>
codemirrorRef.current.editor.display.wrapper contains the div element. From there you can do anything you would do if you did document.getElementById('#id')

$(function () {
// CodeMirror
CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
lineNumbers: true,
readOnly: true,
//mode: "htmlmixed",
}).setSize("100%", 610);
})

I used the solutions above but always struggled with the option when one line was too long and then it break out of the wrapper and broke the layout. I did not want to use the lineBreak option so I defined following:
<div class="container">
<textarea id="codemirror">
</div>
and the style was following:
.container {
position: relative;
height: {as you want}
width: 100%;
}
#codemirror {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

If you use ngx-codemirror package in your angular application the below blog will be very much useful for you
https://devsuhas.com/2021/04/06/change-height-and-width-of-textarea-in-codemirror/

jQuery - zoom image effect (emulate browser resize)

Can a zoom image like effect be reproduced with jQuery + background-position animation?
something like this: http://www.sohtanaka.com/web-design/examples/image-zoom/
I mean, instead of animating image size (which sucks because browsers resize images horribly) - do a animation by setting a background image on a link, and animate the position and size of the link.
edit:
A idea is to use two images. For example:
two overlapped images, one 200 x 200 pixels, the other 400 x 400 pixels
only the 1st image is visible, the 2nd image is hidden behind the 1st, and resized to 200 x 200
the user hovers over it, then the first image enlarges to 400 x 400 and fades out simultaneously
the second image fades in and enlarged simultaneously to its original size (400 x 400)
Could this be achieved with jquery and how?

CSS
#div{
background: url('http://images.epilogue.net/users/sirgerg/phoenix_nebula.jpg') top no-repeat;
background-size: 10%;
height: 490px;
width: 490px;
}
JS
$('#div').hover(function (){
$(this).animate({
'background-size': '50%'
})
}, function (){
$(this).animate({
'background-size': '10%'
})
})
HTML
<div id="div"></div>
On JSFIDDLE
DESCRIPTION: works only on latest chrome
REFERENCE: Set size on background image with CSS?

You mean like this
$('div').hover(function() {
$(this).animate({
width: 400,
height: 400
})
}, function() {
$(this).animate({
width: 200,
height: 200
})
})
Check working example at http://jsfiddle.net/vm4wQ/