Can anyone tell me why this canvas won't show up? I just don't get it, it doesn't even display the tag. I'm on crunchbang 10 using chromium. All other canvases work, but this one doesn't.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="An HTML5 Test">
<meta name="author" content="William Starkovich">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="800px" height="100px">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
The problem is a syntax error in your JavaScript code. You're missing a ); on the closing } of the main function
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
});
There's an error in your JavaScript syntax:
}) // you are missing this parenthesis
</script>
Other than that the canvas absolutely shows up. Add:
<canvas id="canvas" width="800px" height="100px" style="border: 1px solid black">
To see a border around it.
Example:
http://jsfiddle.net/RmVs4/8/
Related
How to change the alert box size?
I use the following coding.
In Firefox the alert box resize automatically but it not change in chrome?
Kindly give a solution.
window.alert("You answered all questions. Press OK to continue.");
You can't change the size/formatting/title (default settings) of the Javascript Alert Box. Instead you should check out JQuery Alert Box.
The Resizable JQuery Alert Box
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
To clarify: When you use window.alert() you are using resources of your browser, not of your web page. It's the browser then who is responsible for creating the alert box, and thus you cannot influence its properties (like size etc.)
I placed a single space in a new line at the end of my string which increased the length to a standard Windows message box.
Alert ("Hello World\n ");
I have got a blog and I would like youtube and vimeo videos to load after the page is loaded, because as of now these videos block the loading of the rest of the content.
This is the code I generate for each post:
public function generateVimeoVideo($class){
return "<iframe class='".$class."' src='//player.vimeo.com/video/".$this->vimeo_video_id."' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
}
How do I load this after onload ?
Basically capture the values returned by generateVimeoVideo($class)() in a javascript variable and create the iframe element on the page you are displaying it only once your dom has loaded.
It's Very simple .
Please make the function on the click event.
function change_frame(){
document.getElementById("captchaDiv").src='http://www.domain.com/captcha.php?'+(new Date()).getMilliseconds();
return true;
}
<a href='#' onClick="change_frame();return false" />
Hope it Work !!!
it should work like this HTML please check it and give me reply .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function loadFrame(){
document.getElementById('theframe').innerHTML='<iframe src="http://www.w3schools.com/" width="500" height="300" frameborder="0" scrolling="auto"></iframe>';
}
//-->
</script>
</head>
<body>
<span id="theframe"><noscript><iframe src="http://www.w3schools.com/" width="500" height="300" frameborder="0" scrolling="auto"></iframe></noscript></span><br>
The rest of your page here.
<script type="text/javascript">
<!--
onload=loadFrame;
//-->
</script>
</body>
</html>
Thanks,
<?php
?>
<html>
<body>
<script>
function generateVimeoVideo($class,$vid){
var putYouTubeHere= document.getElementById('putYouTubeHere');
putYouTubeHere.innerHTML= "<iframe class='" + $class + "' src='//player.vimeo.com/video/" + $vid + "' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
}
document.addEventListener( "DOMContentLoaded", function(){ generateVimeoVideo('classname','<?php echo $this->vimeo_video_id;?>');}, false );
</script>
<div id="putYouTubeHere"></div>
</body></html>
Try this jquery bind
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
body {background-color:#222;}
#frameContainer {
background:white url('http://hompimpa.googlecode.com/svn/trunk/images/loading.gif') no-repeat 50% 50%;
margin:30px;
}
#frameContainer iframe {
display:block;
padding:5%;
border:none !important;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).bind("load", function() {
$('#frameContainer').html('<iframe src="//player.vimeo.com/video/" + $vid + " frameborder="0" width="90%" height="220px" scrolling="auto"></iframe>');
});
//]]>
</script>
</head>
<body>
<div id="frameContainer"></div>
</body>
</html>
I'm trying to load a range slider in PHP (slider like one of http://ghusse.github.io/jQRangeSlider/demo.html).
This is the slider in HTML, which works (see: http://www.leff-design.nl/websites/sliderpreview/test.html):
<html>
<head>
<meta charset="utf-8"/>
<title>example</title>
<link rel="stylesheet" href="css/iThing.css" type="text/css" />
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="jQAllRangeSliders-min.js"></script>
</head>
<body>
<h1>Hello world</h1>
<div id="slider"></div>
<script>
//<!--
$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});
//-->
</script>
</body>
</html>
Now I tried to set this to php but don't know exactly how to do this. I tried this (it's not the full php code but just a part of an Advanced custom field plugin php file):
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fields/css/iThing.css" type="text/css" media="screen" />
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/jQAllRangeSliders-min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(window).load(function() {
$('#slider').editRangeSlider();
});
})(jQuery);
</script>
<?php
function create_field( $field )
{
{
echo '<script type="text/javascript">$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});</script>';
}
}
new acf_field_number_range();
?>
Also tried to echo the slider code but it does nothing. It does not get the right css classes like in the HTML file. How do I exactly connect the #slider id with the jquery files in php?
Thanks in advance.
Never mind, I forgot the <div id="slider">. Stupid.
Who knows about rgraph and HTML5? ( http://www.rgraph.net )
The code of my chart is the following and my problem is that I can't save the canvas (image) on the server even following their suggestion.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Title</title>
<meta name="keywords" content="rgraph javascript charts html5 canvas basic example" />
<meta name="description" content="A basic example of an RGraph chart for implementation help" />
<meta name="googlebot" content="NOODP">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.context.js" ></script>
<script src="../libraries/RGraph.common.annotate.js" ></script>
<script src="../RGraph.common.tooltips.js" ></script>
<script src="../libraries/RGraph.common.zoom.js" ></script>
<script src="../libraries/RGraph.common.effects.js" ></script>
<script src="../libraries/RGraph.common.key.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
<script src="../libraries/RGraph.common.key.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script src="../libraries/jquery.min.js" ></script>
<script>
window.onload = function ()
{
var line1 = new RGraph.Line('line1', [3,56,22,7,84,8,34,1,1], [3,4,45,0,5,97,46,29,7]);
line1.Set('chart.background.grid', true);
line1.Set('chart.linewidth', 3);
line1.Set('chart.gutter.left', 35);
line1.Set('chart.hmargin', 5);
if (!document.all || RGraph.isIE9up()) {
line1.Set('chart.shadow', true);
}
line1.Set('chart.tickmarks', null);
line1.Set('chart.units.post', '');
line1.Set('chart.colors', ['#FA4E1D', '#2D659A']);
line1.Set('chart.background.grid.autofit', true);
line1.Set('chart.background.grid.autofit.numhlines', 10);
line1.Set('chart.background.grid.autofit.numvlines', 29);
line1.Set('chart.curvy', 0);
line1.Set('chart.curvy.factor', 0.25);
line1.Set('chart.labels',['1','2','3','4','5','6','7','8','9']);
line1.Set('chart.title','Title of the Chart');
line1.Set('chart.key.text.size',7);
line1.Set('chart.key',['A','B']);
line1.Set('chart.key.shadow','shadow');
line1.Set('chart.key.position','graph');
line1.Set('chart.ymax',200);
line1.Draw();
}
</script>
</head>
<body>
<center><h2>My title</h2><center>
<!-- 2/3. This is the canvas that the graph is drawn on -->
<div style="text-align: center">
<canvas id="line1" width="300" height="180">[Please wait...]</canvas>
</div>
</body>
</html>
The suggestion is at the end of this page: http://www.rgraph.net/docs/index.html#image at the specific paragraph "Saving the chart as an image on the server".
My only result is a 0-lenght file .png inside my server.
Could someone help me?
Thanks in advance.
Mattew
This is how I do it (you'll probably want to add some sort of validation in the PHP to prevent random uploading):
JS:
function saveImage(){
var xmlhttp;
xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//do something with the response
}
}
xmlhttp.open("POST","myImageSavingScript.php",true);
var oldCanvas = document.getElementById('line1').toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
xmlhttp.setRequestHeader("Content-type", "application/upload")
xmlhttp.send(oldCanvas);
}
PHP:
<?php
$im = imagecreatefrompng($GLOBALS["HTTP_RAW_POST_DATA"]);
imagepng($im, 'filename.png');
?>
And this is a variation if you need to pass other parameters along with it:
JS (just the mod):
var oldCanvas = document.getElementById('line1').toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
var params=oldCanvas+"&someOtherParameter=parameterValue";
xmlhttp.setRequestHeader("Content-type", "application/upload")
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
PHP:
<?php
$params=explode('&',$GLOBALS["HTTP_RAW_POST_DATA"]);
$val=split("=",$params[1]);
$someOtherParam=urldecode($val[1]);
$imgsrc=str_replace(' ','+',$params[0]);
$im = imagecreatefrompng($imgsrc);
imagepng($im, 'filename.png');
?>
Here is an HTML page where I want to load an element with a php script using ajax.
<?php require_once('connect.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php require("pagetitle.php"); ?>
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all"
/>
<!-- Portal JavaScript -->
<script type="text/javascript" src="portal.js"></script>
<script type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function LoadCalendar() {
http.abort();
http.open("GET", "calendar/index.php?cP=2", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('litcal').src = http.responseText;
}
}
http.send(null);
}
</script>
</head>
<body onload="appendTitle('Calendar');">
<div id="content-body"><a name="top"></a>
<h1>
<iframe id="litcal" onload="LoadCalendar();" style="padding: 0px 0px 0px 0px; border: 1px solid #404040;" width="690px"
height="691px"></iframe>
</h1>
</div> <!-- End CONTENT-BODY div -->
</body>
</html>
The loaded element is empty. It only has <html></html>. What error in the ajax code caused this?
maybe you need to make sure the status is 200 before assigning the src attribute to the response text
The problem was that the PHP was not returning a URL. So ajax could not assign anything to the src. See this question for the code that worked.
https://stackoverflow.com/questions/6612918/loading-an-iframe-with-ajax/6618656#6618656