We Keep Coding

cropper is not a function on is not a function

I'm trying to make use of cropper plugin by fengyuanchen but meeting quite an impossible error
I constantly get into Uncaught TypeError: canvas.cropper is not a function even though I already tried everything I searched in your guide and even issues but I couldn't solve it. I try to initialize a cropper in canvas when my button is clicked, like this
$('#crop-mode').click(function(e){
var canvas=$('#image-display canvas')[0];
var options={
viewMode:0,
dragMode:'crop',
aspectRatio: NaN,
preview:'.extra-preview',
responsive:true,
cropBoxMovable: true,
cropBoxResizable: true,
autoCropArea:0.8
};
canvas.cropper(options);
canvas.on({
'build.cropper': function (e) {
console.log(e.type);
},
'built.cropper': function (e) {
console.log(e.type);
},
'cropstart.cropper': function (e) {
console.log(e.type, e.action);
},
'cropmove.cropper': function (e) {
console.log(e.type, e.action);
},
'cropend.cropper': function (e) {
console.log(e.type, e.action);
},
'crop.cropper': function (e) {
console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
},
'zoom.cropper': function (e) {
console.log(e.type, e.ratio);
}
});
});
I'm completely in vain
There is also another error: canvas.on is not a function
I don't know why. I already include jQuery 3.1

From the jQuery docs:
Attach an event handler function for one or more events to the selected elements.
Now, canvas after var canvas=$('#image-display canvas')[0]; is not a selected element. It's the first property of the selected element. $() will return a selected element (if found, obviously), but $()[0] is something completely else. Drop the [0].

First, make sure you have the library loaded with jquery:
<script src="/path/to/jquery.js"></script>
<script src="/path/to/cropper.js"></script>
Cropper is a jquery extension, thus instead of:
var canvas=$('#image-display canvas')[0];
do:
var canvas=$('#image-display canvas');

Be sure to download the correct package with
npm install cropper
Please don't use this
npm install cropperjs
as Cropper.js is not a jQuery plugin.

This will work definitely >> after following every step correctly as mention in link-https://www.npmjs.com/package/ngx-image-editor .
do only this.>>> goto your angular node module find >>>ngx-image-editor/esm5/ngx-image-editor.js >>> here you can import>>>import {default as Cropper} from 'cropperjs'; and refresh your node module and save ...

Even if you are with jQuery you have to import the cropper library file,
<script src="/plugin/cropper/cropper.js"></script>
<script src="/plugin/cropper/jquery-cropper.js"></script>
<link href="'/plugin/cropper/cropper.css'" rel="stylesheet" type="text/css"/>
Remember! You still have to have jQuery above this all.

Saving User-Chosen Stylesheet via jQuery and Cookies

Edit: I figured it out. I'm a complete numpty and didn't test putting the switcher code at the top of my other scripts. As soon as I did that, I fixed it, and it works perfectly.
Old post below.
I want to be able to have my users select a stylesheet via button or link, and have the browser remember that. I'm not great with jQuery, but I know generally enough to follow tutorials and reverse-engineer, to a point.
I have been attempting to use this plugin, but it's not playing nicely with my existing code. There are a couple of things that could be causing the issue, but I think the most likely culprit is the different versions of jQuery that are used. Using just the 1.4.4 breaks some of the core functionality (the ability to reset the checkbox state), and using just the 1.11.2 means that the plugin doesn't work at all. I've no idea how to resolve this, nor even what to google.
After further testing, when using the demo's index.html, I can use just the 1.11 library without breaking functionality. But when using my index.html, it doesn't function at all. So that's probably not the issue.
The demo HTML is viewable online, and here is a pastebin of my full index.html. Obligatory plea for mercy regarding my subpar coding skills.
Here's the demo header:
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<link type="text/css" rel="stylesheet" id="theme" href="css/theme1.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"> </script>
<script type="text/javascript" src="js/jquery.style-switcher.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#header').styleSwitcher();
});
</script>
And here's my header:
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/classic.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC|Open+Sans' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="http://starbuckguild.com/ore/favicon.png">
<script>
//Add functionality for hiding perm nodes that may be silver or iron
$(document).ready(function () {
$("input[name=both]").not(".textbox").click(function () {
if ($(this).is(":checked")) {
$("input[name=both]").prop('checked', true)
$("input[name=both]").parent(".container").addClass("visited_node");
$("input[name=both]").parent(".container").hide(500);
}
else $(this).parent(".container").removeClass("visited_node")
});
$("input[name=both2]").not(".textbox").click(function () {
if ($(this).is(":checked")) {
$("input[name=both2]").prop('checked', true)
$("input[name=both2]").parent(".container").addClass("visited_node");
$("input[name=both2]").parent(".container").hide(500);
}
else $(this).parent(".container").removeClass("visited_node")
});
$("input[name=both3]").not(".textbox").click(function () {
if ($(this).is(":checked")) {
$("input[name=both3]").prop('checked', true)
$("input[name=both3]").parent(".container").addClass("visited_node");
$("input[name=both3]").parent(".container").hide(500);
}
else $(this).parent(".container").removeClass("visited_node")
});
//Mark node as visited.
$("input").not(".textbox").click(function () {
if ($(this).is(":checked")) {
$(this).parent(".container").addClass("visited_node");
$(this).parent(".container").hide(500);
}
else $(this).parent(".container").removeClass("visited_node")
});
//Show visited nodes
$("#showall").click(function () {
$(".visited_node").show();
});
//Hide visited nodes
$("#hideall").click(function () {
$(".visited_node").hide();
});
//Hide all nodes with list price less than 1s
$("#good").click(function () {
$("input[name=bad]").parent(".container").addClass("visited_node");
$("input[name=bad]").parent(".container").hide();
});
//Add short route function
$("#short").click(function () {
$("input").parent(".container").addClass("visited_node");
$("input").parent(".container").hide();
$("input[name=1hr]").parent(".container").removeClass("visited_node");
$("input[name=1hr]").parent(".container").show();
});
//Prompt user to reset all nodes
$("#uncheckall").click(function () {
$(".button").show();
$(this).hide();
});
//Actually reset all nodes if user is sure
$("#imsure").click(function () {
$(".visited_node").show();
$("input").not(".textbox").prop("checked", false);
$(".visited_node").removeClass("visited_node");
$(".button").show();
$(this).hide();
});
//Hide or show nodes by type
$("#nav a").click(function () {
var id = $(this).attr('id');
id = id.split('_');
if ($(this).is(".off")){
$("#menu #menu_" + id[1]).show();
}
else {
$("#menu #menu_" + id[1]).hide();
}
$(this).toggleClass("off");
});
//Show map to nodes when clicked
var option = 'blank';
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
$('#blank').hide();
}
The plugin also requires
<div id="header">
Default
Darkness
Colorful
</div>
to be placed in the body of the page. I've just been putting it inside my navigation div at the top of the page, but perhaps I'm making a mistake there as well/instead.
As an aside, I note that the local machine version of the demo's index.html does not save the stylesheet preferences, whereas the web version does - I assume this is normal behaviour? Edit: It is. It works fine when uploaded.

Calling a css from a js using Symfony 2

I have this gallery the designer handed to me, and I have to put it on my twig. The thing is the slider is not working. This is the code (the js with the problem):
$(function () {
var demo1 = $("#demo1").slippry({
transition: "fade",
useCSS: true,
speed: 2e3,
pause: 4e3,
auto: true,
preload: "visible"
});
$(".stop").click(function () {
demo1.stopAuto()
});
$(".start").click(function () {
demo1.startAuto()
});
$(".prev").click(function () {
demo1.goToPrevSlide();
return false
});
$(".next").click(function () {
demo1.goToNextSlide();
return false
});
$(".reset").click(function () {
demo1.destroySlider();
return false
});
$(".reload").click(function () {
demo1.reloadSlider();
return false
});
$(".init").click(function () {
demo1 = $("#demo1").slippry();
return false
})
});
The error is in the part where it includes one of my css files, the one called "slippry". The error says: "Undefined function or method". My question is: Do I have to call this css file in another way to make the slider work? Do I have to change the path?

Instead of trying to answer your question directly, I would first recommend that you use Twitter Bootstrap's Carousel (slider), as you won't have to worry about binding your click events to controls. In addition to its robust design/extensibility that includes events.
You can fully customize the css to make the slider look like whatever you want it too... Plus the bootstrap package provides a very nice responsive framework, and you should be using one of these anyways.

Cant figure how to implement following jQuery plugin into my webpage

I've been looking for something that will authorize a textbox when user types something and I found this ideal plugin:
http://james.padolsey.com/javascript/jquery-plugin-autoresize/
It seems prety straight forward, but for some reason I can't implement it on my website >.< do you guys have any ideas on how to do it? (read the post)
Thank You )))
Here is what I tried, but it doesn't work
HTML
<head>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="js/autoresize.jquery.js"></script>
<script type="text/javascript">
$('textarea.mainStatusTxt').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
</script>
</head>
<body>
<textarea class="mainStatusTxt" placeholder="Comment" style="display:block;"></textarea>
</body>

Either wrap your script with:
$(document).ready(function() {
//YOUR CODE
});
or move the entire <script> tag to the end of the document (or at least, after the <textarea>).

javascript Confirm replacement with return true/false

Since jquery UI dialog does not support returning true/false, I need some other way to replace a javascript confirm.
It has to return true/false, so that my validation processes in javascript will run:
var where_to_coupon = confirm(pm_info_msg_013);
if (where_to_coupon== true) {
doSubmit=true;
return doSubmit;

The only way I know of doing that is passing a callback to the function.
The problem you face is that JQuery UI will not block the execution like confirm to wait for user input so you need to open the dialog and when the user clicks an answer act accordingly.
If you use Jquery UI dialog you can bind the callback functions to the buttons.
For instance:
myConfirm("Are you sure?", function(){ [YES CODE] }, function(){ [NO CODE] });
Your custom confirm will look like this:
var myConfirm = function(msg, yesAction, noAction){
$.dialog{
[CODE],
buttons: {
yes: yeasAction,
no: noAction
}
};
};

jQuery UI can do what you want, you simply have to adjust your code to work in an async way. Ariel Popovosky gave an answer which attempts to wrap a dialog call into a simple function call, and would work well but would require the same basic sync/async code modifications that any change from window.confirm would require.
Using window.confirm we use a synchronous way of doing things--program halts while user makes a decision. See example: http://jsfiddle.net/9jY7E/
Using UI's dialog, we simply move the behavior which should happen on confirm into the behavior assigned to one of the UI buttons. The dialog shows, and the program continues to run. But because you moved your "ok" code into the functionality bound to the button, that code doesn't run until the user clicks it. The following link is the same example I showed with window.confirm, but has been modified to use UI dialog: http://jsfiddle.net/9jY7E/1/
I don't know of any replacement for window.confirm which works just like window.confirm but allows for your own styling. All dialog systems I know of work somewhat similar to UI.
Additional: At the following link you will find a 3rd example of the same external link confirmation using the methodology Ariel gave in his answer: http://jsfiddle.net/9jY7E/2/

This is a little convoluted, but it works for me. It sets a "global" variable and tests that value to see if the dialog should be displayed.
I know it probably isn't the most efficient method.
The confirmIt funciton returns true or false.
The reason for the setTimeout("confirmItConfirmed=false;",500); near the end is to reset the variable so the next time the function is called it won't just return true.
Some browsers do better at handling the auto height and width than others.
The notice function is a replacement for alert and confirmIt replaces confirm.
<html>
<head>
<title>jQuery Confirm & Alert Replacements</title>
<link type=text/css href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css rel=stylesheet />
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>
<script type=text/javascript>
var confirmItConfirmed = false;
var jq = $.noConflict();
function notice(message,title,height,width) {
if (!title)
var title = document.title+' says...';
jq('body').append('<span id=noticeDialogSpan style=display:none></span>');
jq('#noticeDialogSpan').html('<div id=noticeDialog title="'+title+'">'+message+'</div>');
if (!width)
var width = jq('#noticeDialogSpan').width()+40;
if (!height)
if (jq('#noticeDialogSpan').height() > jq(window).height()-100)
var height = jq(window).height()-100;
else
var height = 'auto';
jq('#navMenu').hide();
jq('#noticeDialog').dialog ({
height: height,
width: width,
modal: true,
close: function(event,ui) {
jq(this).dialog('destroy');
jq('#noticeDialog').remove();
jq('#noticeDialogSpan').remove();
jq('#navMenu').show();
},
buttons: {
'Close': function() { jq(this).dialog('close'); }
}
});
}
function confirmIt(e,message,title,height,width) {
if (!confirmItConfirmed) {
if (!title)
var title = document.title+' says...';
jq('body').append('<span id=confirmationDialogSpan style=display:none></span>');
jq('#confirmationDialogSpan').html('<div id=confirmationDialog title="'+title+'">'+message+'</div>');
if (!width)
var width = jq('#confirmationDialogSpan').width()+40;
if (!height)
if (jq('#confirmationDialogSpan').height() > jq(window).height()-100)
var height = jq(window).height()-100;
else
var height = 'auto';
jq('#navMenu').hide();
jq('#confirmationDialog').dialog ({
height: height,
width: width,
modal: true,
close: function(event,ui) {
jq('#confirmationDialog').remove();
jq('#confirmationDialogSpan').remove();
jq(this).dialog('destroy');
jq('#navMenu').show();
},
buttons: {
'Confirm': function() {
jq(this).dialog('close');
confirmItConfirmed = true;
e.click();
},
'Cancel': function() { jq(this).dialog('close'); }
}
});
}
setTimeout("confirmItConfirmed=false;",500);
return confirmItConfirmed;
}
function testIt(e) {
if (confirmIt(e,'Are you sure you want to continue?','My Title'))
notice('You clicked Confirm','My Title');
}
</script>
</head>
<body>
<br />
<br />
Click HERE to test a link.
<br />
<br />
Click this button to test it too <input value='Click Me' type=button onclick="testIt(this)" />
</body>
</html>

This could also be done using boopup + callbacks:
Boopup.confirm("This is a boopup confirm!", function(agree) {
console.log(agree);
})
https://github.com/petruisfan/boopup