Am trying to implement JQuery Counter Plugin but I'm getting an error:
dashboard:694 Uncaught TypeError: $(...).counterUp is not a function
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>
</head>
<body>
<div class="task-stat"><i class="icon-tasks"></i>Total tasks today<br><h2><span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">{{$tasks->count()}}</span></h2></div>
<script>
$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});
</script>
</body>
</html>
Please check this
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
</head>
<body>
<div class="task-stat"><i class="icon-tasks"></i>Total tasks today<br><h2><span class="counter">1000</span></h2></div>
<script>
$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});
</script>
</body>
</html>
Update your waypoints.min.js library version
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
If you have two calling of jquery.waypoints.min.js or jquery.counterup.min.js comment one of them in other's file's.
Related
I can't get lightweight-charts to display when I'm using my javascript file. I see some folks put the JS code into their .html files but I would like my code inside my .js file. I must be missing something or have coded something incorrectly.
Thank you...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
<!-- <link rel="stylesheet" type="text/css" href="charts.css"> -->
<script src="https://unpkg.com/lightweight-charts#3.4.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="charts.js" type="javascript"></script>
</head>
<body>
<div id="" class="">Test</div>
<div id="container"></div>
</body>
</html>
chart = LightweightCharts.createChart(document.getElementById('container'), {width: 900, height: 900,});
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
]);
Try it just moving your <script> tag inside <body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
<!-- <link rel="stylesheet" type="text/css" href="charts.css"> -->
<script src="https://unpkg.com/lightweight-charts#3.4.0/dist/lightweight-charts.standalone.production.js"></script>
</head>
<body>
<div id="" class="">Test</div>
<div id="container"></div>
<script src="charts.js"></script>
</body>
</html>
Result I am suing live server VS code.
I had this problem too.
The chart displays here when I resize the window.
So I put an
`window.dispatchEvent(new Event('resize'));`
in my javascript file.
Found this somewhere here on SO.
This example is running replica of the attached fiddle (where example is running properly). I am amazed replicating the same is throwing error. Why?
HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'body': function (element, renderer) {
return true;
}
};
$('button').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
</head>
<body>
<button>Click</button>
<div class="container">
Hello!
</div>
</body>
</html>
jSFiddle
http://jsfiddle.net/5ud8jkvf/
ERROR:
Notes:
As fiddle is running properly, this example must also run without any error.
There is no attachment of jQuery file in fiddle, so I dont think jQuery is required or missing in this example.
Even on adding jQuery files - Error is gone - but pdf is not getting downloaded.
The console doesn't lies. The fiddle has dependency to jQuery.
Your markup requires jQuery. Add jQuery to your code ...
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
The cause is that you have to add jQuery, like that:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
Try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'body': function (element, renderer) {
return true;
}
};
$(document).ready(function(){
$('button').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
</script>
</head>
<body>
<button>Click</button>
<div class="container">
Hello!
</div>
</body>
</html>
I created my first js app with canvas and it doesn't work. Code was coppied from http://fabricjs.com/ and just wrapped in jQuery.
fab.js
var $ = jQuery;
$(document).ready(function(){
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
});
html
<html>
<head>
<title>Fabric.js</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="canvasjs.min.js"></script>
<script src="fabric.min.js"></script>
<script src="fab.js"></script>
</head>
<body>
<div id="c">
</div>
</body>
</html>
Uncaught Error: Could not initialize canvas element
What is going wrong?
I came to the resolution:
just replace div attribute with canvas!
<html>
<head>
<title>Fabric.js</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="canvasjs.min.js"></script>
<script src="fabric.min.js"></script>
<script src="fab.js"></script>
</head>
<body>
<canvas id="c">
</canvas>
</body>
</html>
And it's working now.
Im working at a simple javascript.
im using the jsPDF lib but the script load a blank pdf.
this is the code :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fromHTML EX</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.22" />
<script type="text/javascript" src="/root/utils/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/js/basic.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
function PDF1(){
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("datauri");
}
PDF1()
</script>
</head>
<body>
ASDSADASDASDSA
<div>
<p id="ignorePDF">don't print this to pdf</p>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
i have tryied to put the calling function at the bottom of the page but it still don't work.
Can someone help me?
Since you are using jQuery try:
$( document ).ready(function() {
//console.log( "ready!" );
PDF1();
});
Also Note: You could use (not required):
var source = $("body")[0];
Code page used to test
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fromHTML EX</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.22" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://parall.ax/parallax/js/jspdf.js"></script>
<script type="text/javascript">
function PDF1(){
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("datauri");
}
$( document ).ready(function() {
//console.log( "ready!" );
PDF1();
});
</script>
</head>
<body>
ASDSADASDASDSA
<div>
<p id="ignorePDF">don't print this to pdf</p>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
This code can also be used for exporting to pdf using jsPDF.
var pdf = new jsPDF('p','pt','a4');
let pdfConf = {
pagesplit: true, //Adding page breaks manually using pdf.addPage();
background: '#fff' //White Background.
};
pdf.fromHTML($('#capture').get(0),20,20,{
width:500
})
pdf.save("download.pdf");
This example works, but if i create local file like this:
<script src="jquery-big.js"></script>
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
<script>
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
</script>
(removed all utf-8 bug-symbols from jsfiddle) - nothing works, and no errors in console. checked in Google Chrome 19.0.1084.46.
try like this~
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>question</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//document ready script here
$(document).ready(function() {
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
});
</script>
</head>
<body>
<!-- element below-->
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
</body>
</html>