(* I know this question has been asked before on stack, but no other answers have fixed my problem *)
I am having a problem in my HTML/CSS/JS page where an image is not showing up. It's not throwing an error, and everything else still shows up when I run the code. Any help would be great.
HTML/JS code -
<HTML>
<canvas id = "canvas" width = 480 height = 480>
<head>
<link rel = 'stylesheet' type = "text/css" href = "main.css">
<script id = "jqimport" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title> New Web Page </title>
</head>
<body onload = "startGame()">
<img id = "snake" src = "block.png" height = '100' width = '100'>
<script>
function startGame() {
$(document).ready(function() {
});
}
</script>
</body>
</HTML>
CSS Code -
#canvas {
border: 1px solid black;
background-color: #888888;
position: relative;
}
#snake {
position: relative;
left: 400px;
}
Not sure exactly where you want the image to show up. However, try the following:
You should put the canvas tag within the body of the html and close it. Play around with the CSS properties of your #snake image. You can set the position absolute if you want it to show up over the canvas or change the left property.
<HTML>
<head>
<link rel = 'stylesheet' type = "text/css" href = "main.css">
<script id = "jqimport" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title> New Web Page </title>
</head>
<body onload = "startGame()">
<canvas id = "canvas" width = 480 height = 480></canvas>
<img id = "snake" src = "block.png" height = '100' width = '100'>
<script>...
You should be able to see your image then. Again, I am not fully clear as to where you want the image placed.
Related
I want to show an image on an HTML5 canvas without putting it on screen first. I've tried <noscript> but that doesn't work as then I can't include the image into my code.
Here's my HTML:
<html>
<noscript>
<img id = "tiles" src="img/tiles.png">
</noscript>
<title>Super Mario World</title>
<head>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script src="sketch.js"></script>
</body>
</html>
Here's my javascript:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var _img = document.getElementById('id1');
var newImg = new Image().src = _img;
context.drawImage(newImg,0,0);
<img id = "tiles" src="img/tiles.png" style="display:none;">
then to display it
document.getElementById("tiles").style.display = "block";
EDIT:
That was a quick answer to the question but, a far better approach would be to create a class
.hidden {
display : none;
}
then add it to elements.
<img id = "tiles" src="img/tiles.png" class="hidden">
and remove it to display
var element = document.getElementById("tiles");
element.classList.remove("hidden");
The reasoning behind this is that if the original display wasn't block, this would create issues, also it is generally discouraged to use inline style.
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>
I tried to create rectangle in canvas, i am bit confused with coordinate system of canvas
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
body{
background-color: #231F20;
}
#ribbonid{
width:90px;
height: 90px;
}
</style>
</head>
<body>
<canvas id='ribbonid' > </canvas>
<script>
$(document).ready(function(){
var $ribbonid = $('#ribbonid');
// get the canvas element using the DOM
var canvas = document.getElementById('ribbonid');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var cts = canvas.getContext('2d');
cts.fillStyle = '#f7911e';
cts.beginPath();
cts.moveTo(0, 0);
cts.lineTo(90, 0);
cts.lineTo(90, 90);
cts.lineTo(0, 90);
cts.lineTo(0, 0);
cts.fill();
cts.closePath();
}
});
</script>
</body>
</html>
http://jsfiddle.net/bkf2e/
i am aware of canvas.rect function, but i need to create some different shape for me.
I created rectangle of size (90,90)(square), but it is creating full square.
I know it may be my simple mistake, but can you please help me on that.
you need to set the size of your canvas using the width and height attributes, if you use css to size it then it will scale the default size rather than becoming the size you want, which is why it was distorted like that.
I've updated your jsfiddle with the attributes set and you'll see that it's now square.
solved problem,
it was silly mistake of width and height attribute
<canvas id='ribbonid' width='90' height='90' > </canvas>
I'm building a web page where i need to make different sections and i want the page to adjust height to the section that is beeing viewed in a certain moment.
Which is the best way to achieve this?
I was trying to do it with iframes and target opening
<a href="/example" target="myframe">
but i cant make the iframe adjust to the content beeing displayed.
Any help would be aprecciated!
Thanks in advance
What i want is a window to unfold from the bottom of the page whenever someone clicks on "more info".
I thought i could achieve it with an iframe
this works in all browsers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml 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" />
<title>auto iframe height adjust</title>
<style>
</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
An iframe capable browser is
required to view this web site.
I found this solution and it solved my problem perfectly! It even has the option to rezise width.
<script type='text/javascript'>
function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
var ifDoc, ifRef = document.getElementById( iframeId );
try
{
ifDoc = ifRef.contentWindow.document.documentElement;
}
catch( e )
{
try
{
ifDoc = ifRef.contentDocument.documentElement;
}
catch(ee)
{
}
}
if( ifDoc )
{
ifRef.height = 1;
ifRef.height = ifDoc.scrollHeight;
/* For width resize, enable below. */
// ifRef.width = 1;
// ifRef.width = ifDoc.scrollWidth;
}
}
</script>
<iframe id = "myIframe" onload = "setIframeHeight( this.id )">
I found it here: http://www.sitepoint.com/forums/showthread.php?747398-IFRAME-Auto-Height
I have a dynamic link displayed inside an input tag. How can I make the input tag resize to take the width of the link?
Thanks
You can use a body onload to determine the size....
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script type="text/javascript">
window.onload = function() {
thelink = document.getElementById('MyLink');
linksize = thelink.value.length;
if (linksize < 10) thelink.size = 10;
if (linksize > 50) thelink.size = 50;
}
</script>
</head>
<body>
<input id="MyLink" type="text" value="http://www.domain.com/this/is/a/very/long/link/example" />
</body>
</html>
jus tset your minimum and maximum size for maintaining page style....
Perhaps you can create a hidden <span> identically styled, then read its width (because it adjusts to its contents) and assign the width to the <input>.