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/
Related
I'm sure there is a simple fix for this and I just am unable to piece it together... In the event that the link with the id of "light_off" is clicked then I want all the little changes to take place, that part is working, but they're happening too abruptly. How do I slow them down or fade into the changes so the transition looks smoother? Do I fadeIn? Add "slow" duration? Animate? And if so, how would I implement that properly? Gee, I hope that makes sense. Any help would be appreciated! Thank you!!
<script>
$(document).ready(function(){
$("#lights_off").click(function(){
$("#lights_off").fadeOut(1000);
$("#main").addClass(" lights_on");
$('#flavoredesign_logo').attr('src','img/logofinal.png');
$("#nav").css("color","#000000");
$("#nav").css("border-bottom"," #333 solid 1px");
});
});
</script>
You can also use $.animate()
However using animate you can't set color values, but only numeric values or use 'toggle's. w3 has an excellent guide for using it.
$(function() {
var on = true;
$('#lights').on('click', function() {
if ( on ) {
$( "#lights" ).animate({
width: 100,
height: 100
}, 1000 );
} else {
$( "#lights" ).animate({
width: 200,
height: 200
}, 1000 );
}
on = !on;
});
})
I created a fiddle with sizing of an element
you can use setTimeout(function(){ /you code/ }, 200) or use css animations / transitions
As pointed out in the comments, couldn't you use the CSS transition attribute to achieve smooth class changes? You can use this to give a time frame for transitioning between different property values. For example, if you wanted to give an animation time frame for transitioning between colours:
.light {
border-radius: 50%;
width: 100px;
height: 100px;
transition: background-color 1s; //Most properties can be manipulated through the transition attribute, e.g. width 1s
Then toggling between different classes with different values for background-colour:
.lights_off {
background-color: grey;
}
.lights_on {
background-color: yellow;
}
I've created a Fiddle that shows how this could be utilised to create a smooth transition.
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.
I am using dat.gui, and I would like to position it somewhere different than the top right, preferably at the top overlapping a three.js canvas, is this accomplished through commands, or is there some css that will do the trick?
You need some JavaScript and CSS to do this.
The GUI constructor can be passed a paramaters object. You can tell the control not to be autoplaced. You can also attach an element ID to make styling easier
var gui = new dat.GUI( { autoPlace: false } );
gui.domElement.id = 'gui';
And then the CSS to place it can be something like this:
#gui { position: absolute; top: 2px; left: 2px }
The accepted answer answers my question but is not quite what I went for to solve the problem, do to the gui scrolling with me when I go up and down the page. Instead of setting an ID for the gui domElement, I appended the element to an existing element which I can control better.
css:
.moveGUI{
position: absolute;
top: 13.1em;
right: -1em;
}
JS:
// Create GUI
gui = new dat.GUI( { autoPlace: false } );
{
// create fill and open folders
}
var customContainer = $('.moveGUI').append($(gui.domElement));
HTML:
<div class = 'moveGUI'>
</div>
Override CSS:
.dg.a { margin-right:60px !important; }
Personally I like to use:
function datgui(){
let gui = new dat.GUI({
width : 300
});
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/
For whatever reason, my jquery loading overlay doesn't load at all under any circumstance even though the same code was working just days ago. Well, not the exact same code. I have been trying to get the overlay to resize with the window, and I have been trying different things, but I don't understand what I did that caused the overlay to never even show up? Here is the code that should attach to the overlay to the correct div...
function MRNSearchInternals()
{
//debugger;
var form = $("#MRNSearch");
$div = $("#TabView1");
var srlzdform = form.serialize();
var PopID = <% =PopID %>;
var options = [];
var $url = $("#target").attr("action");
$('<div id="overlay">').css({
position: 'absolute',
opacity: 0.2,
top : $div.offset().top,
left : $div.offset().left,
width : $div.offset().width,
height : $div.outerHeight(),
background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
}).hide().appendTo($div);
$("#overlay").fadeIn();
$.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data)
{
DisplayDemographicSearch(data);
$("#overlay").fadeOut();
});
}
Notice how I create the div. I give it an id, and then I call it's css atribute. From there I set all the css attributes. I then attempt to call fadeIn, and fadeOut after the ajax call. Any body have any idea why this isn't working? Any help would be great.
Some More clarification
Also notice how I chose the div to overlay. I get a div id from my dom
$div = $("#TabView1");
Also, I looked the source, and I do have that particular div in there. So that is not the problem. Somehow or the other, it simply isn't showing up.
UPDATE: The DOM I get
Below is what is produced from the jquery code. It appears as though everything is being created fine. Note also, that display is set to none. That is what I would expect since I have the overlay fade out. My question is why does it never show up.
<div class="TabView" id="TabView1">
<div class="Tabs">...</Tabs>
<div class="Pages">
<div id="overlay" style="left: 114px; top: 205px; height: 452px; display: none; position: absolute; opacity: 0.2; background-image: url("/images/ajax-loader.gif"); background-attachment: scroll; background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: blue;"/>
</div>
Well, the better way to create the overlay div would be
$('<div/>', {
id: 'overlay'
})
Does that solve the problem? Otherwise, the ID might not be created, or does it?
Update for the edit from your post: the "width" attribute is not set on the created overlay. What happens if that is added and set to e.g. 100px? It seems like there is something wrong with the setting of the width attribute (or the getting of the width attribute of $div).
Is this code called more than once? If so, are you removing #overlay somewhere?
Calling this code multiple times would create duplicate #overlay dom nodes which is a no-no and could explain why it doesn't work sometimes.
To remove it, change:
$("#overlay").fadeOut();
to:
$("#overlay").fadeOut('slow', function () {
$("#overlay").remove();
});
Your selector doesn't look right.
I would try:
$('#overlay').css. . . .
function MRNSearchInternals()
{
//debugger;
var form = $("#MRNSearch");
$div = $("#TabView1");
var srlzdform = form.serialize();
var PopID = <% =PopID %>;
var options = [];
var $url = $("#target").attr("action");
$('<div id="overlay">').css({
position: 'absolute',
opacity: 0.2,
top : $div.offset().top,
left : $div.offset().left,
width : $div.offset().width, //<- The problem is right here should be $div.width
height : $div.outerHeight(),
background: 'grey url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
}).hide().appendTo($div);
$("#overlay").fadeIn();
$.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data)
{
DisplayDemographicSearch(data);
$("#overlay").fadeOut('slow', function () {
$("#overlay").remove();
});
});
}
Man. That was real hard to debugg. I wish Visual studio 2010 had better jquery debugging capability. Thankfully, the next version is supposed to be a better jquery debugger. But, the problem was the width attribute.