I'm experimenting with using drawing function on Canvas and I was curious to see if anyone can suggest a solution as I'm new to this ;)
My main html pages have a couple of Canvases set up, in layers so that I can manipulate and erase each without interfering with the others. I have something like this:
<div>
<canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
<canvas id="layer1" width="450" height="450" style="position: absolute; left:0; top:0; z-index:1;"></canvas>
<canvas id="layer2" width="450" height="450" style="position: absolute; left:0; top:0; z-index:2;"></canvas>
<canvas id="layer3" width="450" height="450" style="position: absolute; left:0; top:0; z-index:3;"></canvas>
<canvas id="layer4" width="450" height="450" style="position: absolute; left:0; top:0; z-index:4;"></canvas>
</div>
In a bit of Javascript, I am manipulating these canvases such as:
c1=document.getElementById("layer1");
ctx1=c1.getContext("2d");
ctx1.beginPath();
ctx1.moveTo(this.xcoord, this.ycoord);
ctx1.lineTo(newx, newy);
ctx1.stroke();
Now this works; it draws the lines on screen with no problem, except that they are not being drawn on the canvas, they are being drawn relative to the main browser window (my canvases are not at the top left of the screen but a little way down due to text and other graphics).
Can anyone suggest what I am doing wrong?
It is realtive to the browser because you told it to be relative to the browser. You need to make the wrapper element's position relative.
CSS:
div.wrapper { position:relative;}
div.wrapper canvas { position : absolute; }
HTML:
<div class="wrapper">
<canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
<canvas id="layer1" width="450" height="450" style="z-index:1;background-color: red"></canvas>
<canvas id="layer2" width="450" height="450" style="z-index:2;background-color:yellow;"></canvas>
</div>
JSFiddle:
http://jsfiddle.net/X8BCp/1/
Related
I have a HTML Canvas in which I want to append couple of html canvas.
<div>
<canvas id="BackGroundImage" width="800" height="300"
style="position: absolute; z-index: 0;"></canvas>
<canvas id="canvas" width="800" height="300"
style="position: absolute; z-index: 1;"></canvas>
</div> '
Like this.
append(''<div>\
<canvas id="BackGroundImage" width="800" height="300"\
style="position: absolute; z-index: 0;"></canvas>\
<canvas id="canvas" width="800" height="300"\
style="position: absolute; z-index: 1;"></canvas\>
</div>'');
But this doesnt work the sapces after canvas give me error saying unterminated statements.
Try this.
issue 1: append(' ' // string is not properly created.
issue 2 : </canvas\>
$("body").append('<div> I am added, inspect me in dev console and found the desired html\
<canvas id="BackGroundImage" width="800" height="300"\
style="position: absolute; z-index: 0;"></canvas>\
<canvas id="canvas" width="800" height="300"\
style="position: absolute; z-index: 1;"></canvas>\
</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use like this
append('<div>'+
'<canvas id="BackGroundImage" width="800" height="300"'+
'style="position: absolute; z-index: 0;"></canvas>'+
'<canvas id="canvas" width="800" height="300"'+
'style="position: absolute; z-index: 1;"></canvas\>'+
'</div>');
try this
append('<div>'+
'<canvas id="BackGroundImage" width="800" height="300"'+
' style="position: absolute; z-index: 0;"></canvas>'+
'<canvas id="canvas" width="800" height="300"'
+' style="position: absolute; z-index: 1;"></canvas\> </div>');
You are almost right, but the problem is you used / instead of +, some other people make problems by adding ' inside '' or " inside ""
$('.here').append('<div>' +
'<canvas id="BackGroundImage" width="800" height="300"' +
'style="position: absolute; z-index: 0;"></canvas>' +
'<canvas id="canvas" width="800" height="300"' +
'style="position: absolute; z-index: 1;"></canvas\>' +
'</div>'+
'<h1>Added</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here">
</div>
I'm having hard time on figuring out how should i do in order to set a proper size to the following canvases
<div id="canvasesdiv" style="height: 100%; width: 100%; display: table-cell; position: relative; width:578px; height:415.5px">
<canvas id="c1" style="z-index: 1; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c2" style="z-index: 2; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c3" style="z-index: 3; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c4" style="z-index: 4; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c5" style="z-index: 5; position:absolute; left: 80px; width="680" height="435"></canvas>
Cleary width and height are parsed wrongly (html is expecting : and the values in px) but somehow the canvases are drawn in their full dimension. Instead if i use something like:
<canvas id="c1" style="z-index: 1; position:absolute; left: 80px; "></canvas>
<canvas id="c2" style="z-index: 2; position:absolute; left: 80px; "></canvas>
<canvas id="c3" style="z-index: 3; position:absolute; left: 80px; "></canvas>
<canvas id="c4" style="z-index: 4; position:absolute; left: 80px; "></canvas>
<canvas id="c5" style="z-index: 5; position:absolute; left: 80px; "></canvas>
or with
... width: 500px; height: 500px;"
The canvases are all cropped down to 300x150 (chrome default) no matter what.
The problem is that position:absolute is a must in order to have layers. How can i do in order to define a dimension without ruin the canvas quality and make it so it stays in the given boundary?
See this example, can you fix it so that the position is absolute but the size is whatever you want and centered? See here.
If I add position:absolute, the overlay works but it is out of the div bound, see here.
You are inserting HTML width and height attributes in the style attributes, which should hold css. If you check the dev tools, you will see the relevent rules are striked through. Just use css to style them. Even better, place them in the <style/> tag or in an external stylesheet
Not good:
<canvas style="... width="680" height="435"></canvas>
Good:
<canvas style="... width: 680px; height: 435px;"></canvas>
Or: just close the double quote, and use the attributes anyway (although css is the better solution)
I am trying to animate image from left to right and then right to left at the bottom. This is the code i am using which is working fine.
This is the Demo.
function moveRight(){
$("#b").animate({left: "+=300"}, 2000,moveLeft)
}
function moveLeft(){
$("#b").animate({left: "-=300"}, 2000,moveRight)
}
$(document).ready(function() {
moveRight();
});
<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>
</div>
I want this animation at the bottom of the screen with the transparent div background. When i am adding this line
<div id="animate" style="position:fixed; bottom:0px; right: 5px; z-index: 999">
Then the animation is not working. Any one can help me in this issue? Thanks in advance.
just remove top:50px; from your image style and use css for animate div
#animate{
position: fixed;
bottom: 0;
overflow:hidden;
left:0;
right:0;
height: 100px;
background: #eee;
}
DEMO
Try adjusting top property to calc(70%); 70% of parent element height
<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:calc(70%)"/>
</div>
jsfiddle http://jsfiddle.net/oa5pcfqe/2/ , https://jsfiddle.net/oa5pcfqe/2/embedded/result/
Try following:
<div id="animate" style="position:fixed; height:100px; bottom:0px; left: 5px; z-index: 999">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:0px"/>
</div>
Check Fiddle.
Just remove the parent "animate" div and style the image "bottom" as "0px".
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; bottom:50px"/>
Demo
https://jsfiddle.net/oa5pcfqe/5/
I have built a simple page that displays text and various formatted elements and also a photo gallery. The photo gallery has a horizontal scrollbar beneath a larger image. The scroll area contains thumbnails that are loaded into the larger image area after they are clicked on. This works fine in Chrome, Firefox, and Safari.
However, in Internet Explorer the JavaScript is blocked initially and the user must allow it to run. Prior to the JavaScript being allowed by the user the page is displayed in the background but the formatting for the photo gallery is incorrect because it relies upon the currently blocked JavaScript (the larger images that are currently hidden are displayed down the page and it looks bad). Is there a workaround where I do not display the webpage at all until after the JavaScript is unblocked or perhaps another easy solution?
<!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>
<title>index</title>
<style type="text/css">
body {
/*font-size:12px; modify this within each element*/
}
#wrapper {
width:950px;
height:800px;
margin-left:5px;
margin-top:5px;
border-top:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:5px solid #000000;
border-left:5px solid #000000;
padding:0px;
}
#topwrap {
width:950px;
height:50px;
}
#topturqsq {
float:left;
width:250px;
height:50px;
background-color:#7ECCC0;
}
#topartdeco{
float:left;
width:698px;
height:48px;
background-color:#FA8072;
padding:1px;
}
#aptname{
float:left;
width:248px;
height:149px;
border-bottom:1px solid #bbb;
vertical-align:top;
}
#contactbanner{
float:left;
width:690px;
height:29px;
border-bottom:1px solid #000000;
text-align:right;
font-size:20px;
padding-right: 10px;
padding-top:10px;
font-family:arial,helvetica,sans-serif;
}
#photogallery{
width:698px;
height:555px;
border-bottom:1px solid #bbb;
float:left;
}
#maintext{
font-size:15px;
font-family:arial,helvetica,sans-serif;
}
ul{
list-style-type:none;
margin:10;
padding:0;
vertical-align:top;
position:relative;
}
a{
display:block;
color:#000000;
text-decoration:none;
}
#leftnav{
position:relative;
width:248px;
height:600px;
font-size:20px;
float:left;
font-family:arial,helvetica,sans-serif;
}
#leftwrap{
position:relative;
float:left;
width:249px;
height:750px;
border-right: 1px solid black;
}
#linkDiv{
width:698px;
height:120px;
overflow:auto;
white-space:nowrap;
border: 1px solid black;
float:left;
padding-top:15px;
}
#divLinks{
float:left;
}
#container1,#container2,#container3,#container4,#container5,#container6,#container7,#container8{
width:500px;
height:375px;
margin:0 auto;
padding-left:95px;
padding-top:20px;
padding-bottom:20px;
}
</style>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
document.getElementById('container'+idInfo).style.display = 'block';
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="topwrap">
<div id="topturqsq">
</div>
<div id="topartdeco">
<img src="images/artdeco.png" width="349" align="left"> <img src="images/artdeco.png" width="349" align="right">
</div>
</div>
<div id="leftwrap">
<div id="aptname">
<img style="position:relative; top:15px; left:0px;" src="images/banner.png" width="248" >
</div>
<div id="leftnav">
<ul>
<li>Home</li>
<li>Amenities</li>
<li>Nearby</li>
<li>Photos</li>
<li>Lease</li>
<li>Contact US</li> <br>
<li><span style="text-align:center;display:block;text-decoration:underline">Floor Plans </span></li>
<li>2 Bedroom</li>
<li>1 Bedroom</li>
<li>Corporate</li>
<li>Efficiency</li>
</ul>
</div>
</div>
<div id="contactbanner">
<img src="images/phone.png" height="20" > Call us: (555) 555 - 5555
</div>
<div id="photogallery">
<div id="divLinks">
<div id="container1"><img src="images/Chrysanthemum.jpg" width="500" height="375" border="1"></div>
<div id="container2"><img src="images/Desert.jpg" width="500" height="375" border="1"></div>
<div id="container3"><img src="images/Hydrangeas.jpg" width="500" height="375" border="1"></div>
<div id="container4"><img src="images/Jellyfish.jpg" width="500" height="375" border="1"></div>
<div id="container5"><img src="images/Koala.jpg" width="500" height="375" border="1"></div>
<div id="container6"><img src="images/Lighthouse.jpg" width="500" height="375" border="1"></div>
<div id="container7"><img src="images/Penguins.jpg" width="500" height="375" border="1"></div>
<div id="container8"><img src="images/Tulips.jpg" width="500" height="375" border="1"></div>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
<div id="linkDiv">
<img src="images/Chrysanthemum.jpg" width="120" height="90">
<img src="images/Desert.jpg" width="120" height="90">
<img src="images/Hydrangeas.jpg" width="120" height="90">
<img src="images/Jellyfish.jpg" width="120" height="90">
<img src="images/Koala.jpg" width="120" height="90">
<img src="images/Lighthouse.jpg" width="120" height="90">
<img src="images/Penguins.jpg" width="120" height="90">
<img src="images/Tulips.jpg" width="120" height="90">
</div>
</div>
<div id="maintext">
<strong>heading</strong>
<blockquote>bunch of text</blockquote>
</div>
</div>
</body>
</html>
I guess in theory you could * { display:none; } to hide everything, then bring it back when JS is accepted.. assuming that version of IE supports the wildcard (*) in CSS.
Update: Since you're doing this with the header.. I'm just going ot assume it has an ID of header..
<div id="header" style="display:none;">CONTENT</div>
<script type="text/javacript">
window.onload = function(){
var h = document.getElementById('header');
h.style.display = 'block';
}
</script>
Sorry but I am starting with this and I would need to add some code that the mouse movement follow these gif files, for it, Could anybody help me?
<html>
<head>
</head>
<body>
<img style="position:relative; TOP:400px; LEFT:600px; WIDTH:150px;
HEIGHT:120px; margin-right:-50px" border="0" src="trail6.gif">
<img style="position:relative; TOP:330px; LEFT:465px; WIDTH:70px;
HEIGHT:70px; margin-right:-50px" border="0" src="trail4.gif">
<img style="position:relative; TOP:340px; LEFT:600px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail2.gif">
<img style="position:relative; TOP:450px; LEFT:400px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail3.gif">
<img style="position:relative; TOP:450px; LEFT:550px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail5.gif">
</body>
</html>
Could anybody help me?
thanks in advance
Alejandro Castan
Use the MouseOver function of JavaScript.
Ready-to-use examples are to be found on the W3 site.
http://www.w3schools.com/jsref/event_onmouseover.asp