Trying to tap on canvas and nothing happens. What am I doing wrong please?
<html>
<head>
<title>canvas tap</title>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#my_canvas').bind('tap', function() {
alert("Canvas pressed!");
});
});
</script>
</head>
<body>
<div id="div1" style="width:auto;height:auto;background-color:yellow">
<canvas id="#my_canvas" width="200" height="200"></canvas>
</div>
</body>
</html>
Thanks!
The tap event is defined by jQuery Mobile while you only included the plain jQuery.
Related
I have assigned the 80% height of the viewport to my div as height. In Button click I have displayed the height of the div. This works fine in ie9, ie10. But in ie7, ie8 $("#divContainer").height() is 0. Am I doing anything wrong and how to get the height of the div in IE7, IE8(vml)
<html style="height:100%;">
<body style="height:100%;">
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<button id="button1"></button>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").height());
});
});
</script>
</body>
</html>
Thanks In Advance
For IE you may try pure javascript solution
var height = getElementById("divContainer").clientHeight;
Most importantly include jQuery Library in your Code's head section and use .css("height") instead of .height()
Modified code is as below
<html style="height:100%;">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body style="height:100%;">
<button id="button1" value="text"></button>
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
});
});
</script>
</body>
</html>
Note I have taken Button above the container.
you can use jquery - Height option
or
use jquery with css option of any properties of tag or id.
like
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
//also set the height too as
$("#divContainer").css("height", "80%");
});
});
I am new to learn JCanvas. I am trying to implement a simple JCanvas program.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src='jcanvas.min.js'></script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
<script>
var canvas = document.getElementById("drawingCanvas");
var ctx = canvas.getContext("2d");
$('canvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
</script>
</body>
</html>
But I am unable to Implement the above.
The Circle I am trying to draw here is not getting displayed on the canvas.
What Am I doing wrong?
Looks like your code is quite fine itself. Consider wrapping your code in $(document).ready(function () {});, like this:
<script>
$(document).ready(function () {
$('canvas#drawingCanvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
});
</script>
This guarantees that your code will executed when the whole DOM structure is loaded in browser memory and ready to interact with JavaScript. See jQuery docs for more details.
I've also created jsFiddle, where your code just works. I attached the jCanvas using URL from here, so it might stop working occasionally.
UPDATE: removed unused variables from the code, added id to jQuery selector.
UPDATE2: Without jsFiddle, it should look like that
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sample</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('canvas#drawingCanvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
});
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
</body>
</html>
UPDATE3: Please do not use jCanvas attaching like in the sample above, the link was grabbed from jCanvas showroom and is not supposed to be reliable CDN. It might be changed or removed, and it might not be ready to high load.
there are probably other ways, but this works. I sourced jCanvas and jQuery internally
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src='jcanvas.min.js'></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function init(){
$("canvas").drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
</body>
</html>
I created a very basic page to illustrate this...
<!DOCTYPE html>
<html> <!-- manifest="cache.manifest"-->
<head>
<title>FireFox Touch TEST</title>
<style>
body {width:100%; height:100%; background-color:green;}
div.testdiv {top:0px; left:0px; width:1in; height:1in; background-color:blue;}
</style>
</head>
<body class="body">
<div id="test" class="testdiv">Touch here</div>
<script type="text/javascript">
function tStart(event)
{
alert("Touched");
}
divid = document.getElementById("test");
divid.addEventListener('touchstart', function(){tStart(event)},false);
</script>
</body>
</html>
I seem to be either doing something fundamentally wrong or there is a problem with mobile firefox 24 on android 4.2.2
Any ideas...
Try like this:
As there is no such a variable in tStart() that calls event, the browser looks if there is an event defined in the global object. In JavaScript, the global object is called window
function tStart(event)
{
alert("Touched");
}
divid = document.getElementById("test");
divid.addEventListener('touchstart', function(){tStart(window.event)},false);
I cannot seem to get this script to work. Can anyone please help? The DIV's width is not defined. It just stretches across the whole page.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script>
document.getElementById('box').style.width="10px";
</script>
</head>
<body>
<div id="box"></div>
Your script is running before the <div> is rendered on the page. Try it like this:
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
document.getElementById('box').style.width="10px";
</script>
</body>
</html>
And don't forget to close your <body> and <html> tags.
To prove that it is, look at this example. I moved the script back to the <head> section and changed the width setting to run when the window is finished loading.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script type="text/javascript">
alert('test');
window.onload = function() {
document.getElementById('box').style.width="10px";
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
You'll see the 'test' alert message before the box is rendered.
The element does not exist on the page yet. JavaScript can not access/manipulate an element until it has been loaded in the DOM. You can overcome this by moving you <script> block to above the closing </body>. Or use an window.load event.
An example of the former using your code is here - http://jsfiddle.net/ycWxH/
if you will use jquery it is more easy to do that.
that is if you will only use jquery framework
here is the code
$('#box').height(10);
just a reminder, window.onload is fired when page fully loaded.
refer to http://www.javascriptkit.com/dhtmltutors/domready.shtml
<script>
function doMyStuff() = {};
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", doMyStuff, false );
} else if ( document ) {
document.attachEvent("onreadystatechange",function(){
if ( document.readyState === "complete" ) {doMyStuff();}
});}
</script>
Please consider this code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey"></div>
<iframe id="iView" style="width: 200px; height:70px; border: dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
var doc = document.getElementById("iView").contentWindow.document;
doc.designMode = "On"
doc.open()
doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
doc.close();
jQuery("#iView").appendTo("#dlgDiv")
})
</script>
</body>
</html>
In IE it works fine and preserves test in the frame ("Some test text") as well as it keeps it in design mode.
In FF/Chrome/Opera it wipes out all content of the iframe - if you inspect it's DOM with FireBug you can see that iframe.body lost it's class "some-class" as well as all text and it's not in design mode.
Any ideas how to overcome this problem? The original problem is that all rich text editors fail to work in a jQuery.dialog in those browsers and I tracked the problem down to the above-mentioned fact...
It's a real show stopper for me, any help would he highly appreciated!
Thank you,
Andrey
Takes to refresh the movement (appendTo) and does not locate either the iframe:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px;height:72px;border:solid 1px grey"></div>
<iframe id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#iView").appendTo("#dlgDiv");
setTimeout(function(){
var iBody = $("#dlgDiv").find('#iView').contents().find("body"); // <-----
iBody.append("<div>my bad html</div>"); // old container
iBody.empty(); // empty body in iframe
iBody.append("Some test text"); //add container
iBody.append("<div>or something right</div>"); //add container
iBody.attr("class", "some-class"); //add class to body
}, 100);
})
</script>
</body>
</html>
Edition: for it is understood