Rapahel Sketchpad not working - javascript

Below is my code.I have used raphael sketchpad plugin. But I'm unable to draw,I just get blank sketchpad. Why is it so?
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="raphael.sketchpad.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var sketchpad = Raphael.sketchpad("editor", {
height: 260,
width: 260,
editing: true
});
// When the sketchpad changes, update the input field.
sketchpad.change(function() {
$("#data").val(sketchpad.json());
});
});
</script>
</head>
<body>
<input type="hidden" id="data" />
<div id="editor" style="border: 1px solid #aaa; "></div>
<h1> Testing</h1>
</body>
</html>
When I try to add a stroke,I get a diagonal line.

When I used latest version jquery and raphael,it's working for me now. I did below modification
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="raphael-2.0.1.js"></script>

Related

Using <canvas> to draw screen in .erb file

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 ?

Export HTML table to PDF, WORD, PNG using TableExport.js

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>

Code working in JSFiddle but wont work in browser

I'm trying to get this piece of code working from my browser but I can't get it to work. Here is what I am currently tying, does anyone know what I'm missing?
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
fader.js
$(document).ready(function(){
$(function() {
$('#div1').hover(function() {
$('#div2').fadeIn();
}, function() {
$('#div2').fadeOut();
});
});
});
fader.css
#div2 {
width: 200px;
height: 200px;
background: red;
display: none;
}
Original:
http://jsfiddle.net/kevinPHPkevin/4z2zq/
You haven't imported jquery in your html doc. your js code uses jquery.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
<script type="text/javascript" src="[jqueryversionrighthere]"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
please insert this code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Jquery Show() flicker

<html>
<head>
<script type="text/javascript">
var oauth = chrome.extension.getBackgroundPage().oauth;
</script>
<style type="text/css">
#note
{
display:none;
}
</style>
<script src="Task.js" type="text/javascript"></script>
<script src="Taskhandle.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<title>TaskMan</title>
</head>
<body>
<input type="text" id="title"><input type="text" id="note">
+ N
<script type="text/javascript">
window.onload=function(){
$('#anote').click(function () {
$('#note').show();
});
}
</script>
</body>
</html>
When I run this code in chrome the input flickers in and out. I need a fix.
You have to prevent default of the link (which is reloading the page):
$('#anote').click(function (E) {
E.preventdefault();
$('#note').show();
});

How come my jquery plugin is not working on my page but in the very similair sample code?

In the sample code The javascript drowdown works fine, but on link text my page it doesn't work in firefox.
sample code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>geo-autocomplete demos</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/ui.geo_autocomplete.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.from').geo_autocomplete();
});
</script>
<style type="text/css">
.ui-autocomplete { overflow-y: auto; width:300px; }
* html .ui-autocomplete { /* IE max- */height: expression( this.scrollHeight > 320 ? "320px" : "auto" ); }
.ui-autocomplete { max-height: 320px; }
.ui-autocomplete li { font-size:10pt; }
</style>
</head>
<body>
<h1>geo-autocomplete demos</h1>
<h3>Basic use</h3>
<p>Location: <input type="text" class="from" size="50" /></p>
</body>
</html>
Some of the javascript from my implementation(not working):
from my header
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ui.geo_autocomplete.js"></script>
<script src="/js/common-2.0.js" type="text/javascript"></script>
common-2.0.js
$(document).ready(function()
{
//Some other code, removed in this example
$('.from, .to').geo_autocomplete();
});
It looks to me as if your page is not successfully getting all the Google Javascript files it needs. There are errors in the console. It's hard to tell exactly what's wrong because Firebug seems confused by the fact that your page is XML.

Categories