I'm just trying to create a canvas in my browser with the following code :
<!DOCTYPE html>
<html lang="eng">
<head>
<title<abc</title>
<script type="text/javascript">
window.onload=canvasApp();
function canvasApp()
{
var canvas=document.getElementById("one");
if(!canvas||!canvas.getContext)
return;
}
</script>
<meta charset="utf-8">
<body>
<canvas id="one" width="400" height="500">
Your browser doesn't support canvas
</canvas>
</body>
</html>
Why i'm getting canvas=null in the following line
var canvas=document.getElementById("one");
(I'm using the latest versions of chrome and firefox)
Your HTML leaves somewhat to be desired.
Give the W3C Validator a go. Right now it reports 7 Errors and 4 warnings.
Related
I used window.print() function and saved to a .pdf file.
Inside the page I've saved there is a <a href="www.example.com"> tag. When I'm downloading the file from Chrome the link works and it opens the right page. When downloading it from Edge it won't work and stays as a simple text.
Any solution?
I tested and reproduced the issue. I think we can only use some plugins to generate the pdf to get the href link working in Edge Legacy.
You could use jsPDF to generate the PDF. Use .textWithLink() to mimic standard HTML hyperlinks:
doc.textWithLink(text, x, y, { url: url });
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<body>
<script>
var doc = new jsPDF('p', 'pt');
doc.textWithLink('link', 20, 30, { url: 'http://www.google.com' });
doc.save("info.pdf");
</script>
</body>
</html>
I am looking to create a website that compiles the HTML code that you write it in a text editor.
Here is my code:
<!DOCTYPE html>
<html>
<head><title>HTML editor</title></head>
<body>
<textarea id="textarea">
</textarea>
<iframe id="frame" srcdoc="This is where the code is interpreted. ">
</iframe>
<button onclick="run();"></button>
<script>
function run() {
var x = document.getElementById("textarea").value;
var y = document.getElementById("frame");
y.srcdoc = x;
}
</script>
</body>
</html>
Write now, I have successfully created something that compiles html code. But I want to do the syntax highliting. How do I highlight the text?
Just add the required CSS and JS for Prism.js.
<!DOCTYPE html>
<html>
<head>
...
<link href="https://myCDN.com/prism#v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="https://myCDN.com/prism#v1.x/components/prism-core.min.js"></script>
<script src="https://myCDN.com/prism#v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>
Then add below HTML element
<pre><code class="language-css">p { color: red }</code></pre>
whatever code you write in this element will have syntax highlighting. class="language-css" determines the language for hightlighting, you can change as per your requirement. You can find all supported languages here.
Note: this is a basic example you can start from here and find more info at prism.js usage
I have two HTML pages in the same application hosted in Tomcat. Inside one HTML page there is an iFrame. I need to load the other HTML page through this iFrame.
Below I have mentioned the controller.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>postMessage Demo: Controller</title>
</head>
<body>
<h1>Controller Window</h1>
<p>
This document is on the domain: http://codepen.io
</p>
<p>
<button id="send">Send Message</button>
</p>
<iframe id="receiver" src="http://localhost:8080/playground/receiver.html" width="400" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<script>
var btn=document.getElementById("send");
btn.onclick = function () {
alert("tedt")
receiver.contentWindow.postMessage("hi", "*");
alert("oop")
}
</script>
</body>
</html>
receiver.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>postMessage Demo: Receiver</title>
</head>
<body>
<h1>Receiver Window</h1>
<p>
This document is on the domain: http://demos.matt-west.com
</p>
<div id="message"></div>
<script>
message.onload = function () {
alert('It works!');
var mm=document.getElementById("message");
mm.innerHTML="asasasas";
}</script>
</body>
</html>
when the receiver gets the request it should display the alert 'It works' But it is not showing. Please help me to fix the issue.
Thanks
Google uses an X-FRAME-OPTIONS HTTP header to disallow putting their pages in iframes: https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header
Almost all modern browsers will refuse to put pages with this HTTP header in an iframe. There's nothing you can do about that.
I use the following html5 code to display a html page with an image(1.JPG). Its working fine. The image will be randomly overwritten with an another newer image in a certain interval in the same path provided. So, I use meta tag to refresh the page, so that whenever any newer image is overwritten in the path, the page will be refreshed with the updated image automatically. But, it looks like refreshing the page for every 5 secs fine, but its NOT displaying the newer image which has overwritten in the same path, it always shows with the initial image i kept. Could someone help me to fix this issue?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<meta http-equiv="refresh" content="5">
</head>
<body>
<canvas id="myCanvas" width="578" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'italic 30pt Calibri';
context.fillText('Screen sharing', 10, 50);
</script>
<p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>
</body>
</html>
Meta tag Refresh URL, please try
<meta http-equiv="refresh" content="5; ,URL=http://domain.com">
OR You can do it from javascript
<script type="text/javascript">
setInterval(function(){
window.location.reload();
},5000);
</script>
And please use SERVER url to load image instead of file url
<p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>
Change To
<p><img src = "http://domain.com/Downloads/1.JPG" /> </p>
Please can someone tell me why this isn't working before I defenestrate everything on my desk.
I have the following html document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8 />
<title>Sample Gauge using JQuery</title>
</head>
<body>
<canvas id="gauge" width="200" height="200">
Your web browser does not support HTML 5 because you fail.
</canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="gauge.js"></script>
</body>
</html>
And gauge.js:
$(document).ready(function () {
//(canvas gets assigned)
startRendering();
function startRendering() {
setInterval("render();", 1000);
}
function render() {
renderBackground();
renderNeedle(-172);
}
//(Defined functions for rendering a gauge)
});
render() does not get called, but if I change the setInterval line to just 'render()' it does.
Also, if I change setInterval() to contain something like "alert('LOL')" then it does work, it just doesn't seem to work with functions I have defined.
With or without a semicolon at the end of the function(s) to call makes no difference, nor does prefixing this. to my functions.
I'm trying to get this working so I can start using it to animate the gauge. Can anyone see why it isn't working?
I hate web development.
Change
setInterval("render();", 1000);
To
setInterval(render, 1000);
When you pass a string to setInterval(), the code inside is executed outside of the current scope. It's much more appropriate to just pass the function anyway. Functions can be passed around just like any other variable if you leave the parenthesis off.
I'm not sure why using just "render()" doesn't work but using this code will fix the problem.
function startRendering() {
setInterval(function(){
render()
}, 1000);
}