I'm using the following javascript code to help me draw an output screen in a .erb file which doesn't render properly. The canvas tag is unhelpful.
There is no output screen. The linking is proper and I am able to get output "hello" when I add a testing line.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programming++! Build Your Own Blocks</title>
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" src="morphic.js"></script>
<script type="text/javascript" src="widgets.js"></script>
<script type="text/javascript" src="blocks.js"></script>
<script type="text/javascript" src="threads.js"></script>
<script type="text/javascript" src="objects.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="paint.js"></script>
<script type="text/javascript" src="lists.js"></script>
<script type="text/javascript" src="byob.js"></script>
<script type="text/javascript" src="xml.js"></script>
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript" src="locale.js"></script>
<script type="text/javascript" src="cloud.js"></script>
<script type="text/javascript" src="sha512.js"></script>
<script type="text/javascript" src="FileSaver.min.js"></script>
<script type="text/javascript">
var world;
window.onload = function () {
world = new WorldMorph(document.getElementById('world'));
world.worldCanvas.focus();
new IDE_Morph().openIn(world);
loop();
};
function loop() {
requestAnimationFrame(loop);
world.doOneCycle();
}
</script>
</head>
<body style="margin: 0;">
<canvas id="world" tabindex="1" style="position: absolute;" />
</body>
</html>
Any help please ?
Related
I am trying to use Cluster Group plug-in for Leaflet, but I keep getting the "Uncaught TypeError: L.markerClusterGroup is not a function"
here is my simplified HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Brewser</title>
<link rel="stylesheet" type="text/css" href="brewser.css">
<link rel="stylesheet" type="text/css" href="leaflet.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.css"/>
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.Default.css"/>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
</body>
</html>
Here is my JS:
var myMap = L.map('map').setView([49.197060, 16.611837], 13);
var markers = L.markerClusterGroup();
Any idea what could be wrong?
plug-in files I am using are those in dist directory:
leaflet.markercluster-src.js
leaflet.markercluster.js
leaflet.markercluster-src.js.map
leaflet.markercluster.js.map
MarkerCluster.css
MarkerCluster.Default.css
Your imports are out of order:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
should be:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<!-- Notice where markercluster import is above app.js -->
<script src="dist/leaflet.markercluster-src.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
I am trying to export a Table via PDF using the js provided by Ngiriraj Table Export Demo.
The code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./js/tableExport.js"></script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/sprintf.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/base64.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<button id="export" style="height: auto; width: auto;" onClick="$('#tableID').tableExport({type:'pdf',escape:'false'});">Click Here for PDF!</button>
<table id="tableID">
<tr>
<td>ABC</td>
<td>BDE</td>
</tr>
</table>
</body>
</html>
However, when I click on the button, nothing happens. Console shows a error UNCAUGHT TYPE ERROR whenever the button is clicked.
Include any scripts reliant on jQuery after the jQuery. I'd say best practice is to put jQuery first. Let me know if this works:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/tableExport.js"></script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/sprintf.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/base64.js"></script>
I'm a new employee at a company and also new to php and jqplot. :$
I'm trying to create a simple graph using jqplot.
I followed all the instructions at http://www.jqplot.com/tests/line-charts.php
but nothing is displayed in my div :(
can someone help?
I think the problem might that its not loading the jqplot files :,(
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Capacity Report</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../../../jqplot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css"/>
<link rel="stylesheet" href="../../../css/style.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="../../../jqplot/jquery.jqplot.css"/>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../../../jqplot/jquery.js"></script>
<script type="text/javascript" src="../../../jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.ohlcRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.highlighter.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.trendline.js"></script>
</head>
<body>
<div id="chartdiv" style="height:400px;width:300px; ">graph1</div>
<div id="chart1" style="height:400px;width:300px; ">graph2</div>
</body>
</html>
<script> $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
</script>
Hello everyone i solved my error!
the problem was in the file path! after many hours of playing around i realized i was trying to open jqplot file with a wrong path!!! :P
hope this will help someone else with the same problem
this is my final working code 100% bullet proof :)
<html>
<head>
<title>Working plots functions</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.jqplot.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart2', [[3,7,9,1,5,6,8,2,5]]);
});
</script>
Here is the start of the page...<br>
<div id="chart1" style="height:400px;width:300px;">graph1</div>
<div id="chart2" style="height:400px;width:300px;">graph2</div>
</body>
</html>
I'm new with Jasmine. I would like to test a Ext JS application.
When I'm running the test, the browser throw the following:
ReferenceError: Ext is not defined over the line Ext.create('xxxx.application.store.SystemHealth');
This is my SpecRunner.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine- 1.3.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<!--include source files here... -->
<!--<script type="text/javascript" src="spec/SpecHelper.js"></script>-->
<!--<script type="text/javascript" src="specs/example.spec.js"></script>-->
<!-- include spec files here... -->
<!--<script type="text/javascript" src="src/Player.js"></script>-->
<!--<script type="text/javascript" src="src/Song.js"></script>-->
<script type="text/javascript" src="src/SystemHealth.js"></script>
<script type="text/javascript">
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
I hope it's clear enough.
Example code for writing using jasmine lib in ExtJS:
<head>
<title>Extjs - Unit testing demo</title>
<link rel="stylesheet" type="text/css" href="app-test/lib/jasmine-1.3.1/jasmine.css"></link>
<script type="text/javascript" src="../ext4.1.3/ext-debug.js"></script>
<script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine-html.js"></script>
<!-- specs test files -->
<script type="text/javascript" src="app-test/specs/example.js"></script>
<script type="text/javascript" src="app-test/specs/users.js"></script>
<!-- Extjs app launcher -->
<script type="text/javascript" src="app-test.js"></script>
</head>
<body></body>
Hope it helps!!
thanks, yes i needed to add to add the following lines:
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-
gpl/ext-all-dev.js"></script>
<script src="../../../../../../.ext-js/sencha-ext-js-4.1.1a/ext.js"
type="text/javascript"></script>
Hi
I have created a web app that uses ical. When I run it locally it works like a charm. However when I upload it to my server via ftp so as to test it online the ical script doesn't show up.
My safari inspector gives me an error--->
TypeError: Result of expression '$('#any_id').getCalendar' [undefined] is not a function.
This is my code:
<style type="text/css" media="screen">#import "jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">#import "themes/artspot/theme.css";</style>
<style type="text/css" media="screen">#import "jqt.calendar.css";</style>
<script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="extensions/jqt.calendar/jqt.calendar.js" type="application/x-javascript" charset="utf-8"></script>
<style type="text/css" media="screen">#import "../../extensions/jqt.listIndex/jqt.listIndex.css";</style>
<script src="../../jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.listIndex/jqt.listIndex.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({});
$(function() {
$('#any_id').getCalendar();
});
</script>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="jqt">
<div id="home" class="current">
<div class="toolbar">
<h1>Calendar</h1>
</div>
<div id="any_id">
<ul>
<li><time datetime="2011-01-26T14:30Z">210 mg/dl</time></li>
<li><time datetime="2011-01-26T14:30Z">100 mg/dl</time></li>
</ul>
</div>
</div>
</div>
</body>
my problematic web app is --->web app ical
Error: $("#any_id").getCalendar is not a function
Source File: http://webstore.web44.net/
Line: 20
You are loading everything twice
<script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>