My purpose is show a original canvas with 400x400 (canvas1), and use a small canvas 50x50 (canvas2) to select a region, then show amplified result to canvas 200x200 (canvas3). I wish canvas2 will move with mouse but canvas3 keep at right side of canvas1.
<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
position: relative;
border: 1px solid black;
}
.inner {
border:1px solid red;
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
<div id="glass" class="inner">
<canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
<div class="inner" style="top: 25px; left: 0px; width: 50px;"/>
<div class="inner" style="top: -25px; left: 25px; height: 50px;"/>
</div>
<div id="zoomer" class="container">
<canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
<div class="inner" style="top: 100px; left: 0px; width: 200px;"/>
<div class="inner" style="top: -100px; left: 100px; height: 200px;"/>
</div>
<div class="container">
<input id="browser" type='file' ></input>
</div>
<script>
var glass = document.getElementById('glass');
var canvas2 = document.getElementById('canvas2');
var w = canvas2.width;
var h = canvas2.height;
function onMouseMove(event,thiz) {
var x = event.offsetX;
var y = event.offsetY;
glass.style.left = (x - w/2) + 'px';
glass.style.top = (y - h/2) + 'px';
}
</script>
</body>
</html>
But current result is:
canvas2 and canvas3 will move together if mouse move.
The choose file button overlapped with canvas 3.
I wish only canvas2 (and the crosshair lines) move with mouse but keep canvas1,canvas3 and chosse file button statically side by side.
The div statement is not correct.
Use inline-block display mode.
With below html file:
<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
display: inline-block;
vertical-align: top;
position: relative;
border: 1px solid black;
}
.inner {
border:1px solid red;
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
<div id="glass" class="inner">
<canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
<div class="inner" style="top: 25px; left: 0px; width: 50px;"></div>
<div class="inner" style="top: 0px; left: 25px; height: 50px;"></div>
</div>
<div id="zoomer" class="container">
<canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
<div class="inner" style="top: 100px; left: 0px; width: 200px;"></div>
<div class="inner" style="top: 0px; left: 100px; height: 200px;"></div>
</div>
<input id="browser" type='file' ></input>
<script>
var glass = document.getElementById('glass');
var canvas2 = document.getElementById('canvas2');
var w = canvas2.width;
var h = canvas2.height;
function onMouseMove(event,thiz) {
var x = event.offsetX;
var y = event.offsetY;
glass.style.left = (x - w/2) + 'px';
glass.style.top = (y - h/2) + 'px';
}
</script>
</body>
</html>
The result is below:
Related
I would like to make a program to find the third side of a right-angled rectangle based on the two others. My idea was to draw a triangle and to put input boxes next to the three diferent sides. However I'm having trouble making them stick to the sides (they move when you zoom). Here's the code:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<head>
<title>Triangle rectangle</title>
<style>
.triangle {
position: relative;
text-align: center;
}
</style>
</head>
<body align="center">
<h2> Triangle rectangle </h2>
<div class="triangle">
<form autocomplete="off">
<input style="position: absolute; top: 50%; right: 65%; width: 3%" type="text" name="a" id="a" placeholder='a' >
<input style="position: absolute; top: 260px; right: 950px; width: 3%" type="text" name="b" id="b" autofocus='on' placeholder='b' >
<input style="position: absolute; top: 100px; right: 850px; width: 5%" type="text" name="hypo" id="hypo" placeholder='Hypothénuse' >
</form>
<canvas id="myCanvas" width="500" height="250" >Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 250);
ctx.moveTo(0, 0);
ctx.lineTo(0, 250);
ctx.moveTo(0, 250);
ctx.lineTo(500, 250);
ctx.stroke();
</script>
</body>
</html>
Here's a site with the code: http://rightangledrectangleirl.bitballoon.com/
Edit: Managed to fix it:
<div style="position:relative; width:500px;height:250px; margin: 0 auto;" align="center">
<canvas id="myCanvas" width="500" height="250">Your browser does not support the HTML5 canvas tag.</canvas>
<form autocomplete="off">
<input style="position: absolute; top: 125px; left: 10px; width: 50px" type="text" name="a" id="a" autofocus='on' placeholder='a' >
<input style="position: absolute; top: 220px; right: 180px; width: 50px" type="text" name="b" id="b" autofocus='on' placeholder='b' >
<input style="position: absolute; top: 90px; right: 90px; width: 80px" type="text" name="hypo" id="hypo" autofocus='on' placeholder='Hypothénuse' >
</form>
</div>
Absolute positioning works relative to the last container which has the position attribute explicitly defined. In this case the triangle div has position:relative, so the input boxes will be absolutely positioned relative to that.
With this in mind it's important to note that when the size of the page changes, the size of your triangle div also changes, so the absolute positioning also changes. In order to fix this you should give the triangle container a fixed sized (or at least a predictable one). Making it match the size of your canvas seems like a good choice.
Giving it a fixed size unfortunately makes the way you centered it horizontally break, but that can be fixed by using margin : auto.
Lastly you should redo your top, left, bottom, right percentages. Keep in mind you can use pixels as well. I don't know exactly where you want the items positioned, but perhaps the following code will get you on track:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 250);
ctx.moveTo(0, 0);
ctx.lineTo(0, 250);
ctx.moveTo(0, 250);
ctx.lineTo(500, 250);
ctx.stroke();
.triangle {
position: relative;
text-align: center;
width : 500px;
height : 250px;
margin : auto;
}
#a {
position: absolute;
top: 50%;
left: 0px;
width: 3%;
}
#b {
position: absolute;
bottom: 0px;
right: 50%;
width: 3%
}
#hypo {
position: absolute;
top: 45%;
left: 40%;
width: 100px;
}
<body align="center">
<h2> Triangle rectangle </h2>
<div class="triangle">
<form autocomplete="off">
<input type="text" name="a" id="a" placeholder='a'>
<input type="text" name="b" id="b" autofocus='on' placeholder='b'>
<input type="text" name="hypo" id="hypo" placeholder='Hypothénuse'>
</form>
<canvas id="myCanvas" width="500" height="250">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</body>
The problem was that your .triangle div didn't have a set width or height:
.triangle {
position: relative;
text-align: center;
width: 500px;
height: 250px;
margin: 0 auto;
}
.h {
position: absolute;
top: 120px;
right: 100px;
width: 100px;
}
.b {
position: absolute;
bottom: -35px;
left: 210px;
width: 50px;
}
.a {
position: absolute;
top: 120px;
left: -70px;
width: 50px;
}
<h2> Triangle rectangle </h2>
<div class="triangle">
<form autocomplete="off">
<input class="a" type="text" name="a" id="a" placeholder='a' >
<input class="b" type="text" name="b" id="b" autofocus='on' placeholder='b' >
<input class="h" type="text" name="hypo" id="hypo" placeholder='Hypothénuse' >
</form>
<canvas id="myCanvas" width="500" height="250" >Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 250);
ctx.moveTo(0, 0);
ctx.lineTo(0, 250);
ctx.moveTo(0, 250);
ctx.lineTo(500, 250);
ctx.stroke();
</script>
how can I move the ball randomly when I click the mouse with addEventListener
I tried this code but the picture didn't move . what is wrong with this code?
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="work.js"></script>
<link type="text/css" rel="stylesheet" href="work.css">
</head>
<body>
<div id = "frame" >
<div id = "net1"> </div>
<div id = "net2"> </div>
<div id = "centerPoint"> </div>
<div id = "centerLine"> </div>
<img src="SoccerBall.png" width="40" alt="Ball" class="moveBall">
</div>
</body>
</html>
javascript code
var ball = document.querySelector('.moveBall');
function bbb(){
var ball = document.querySelector('.moveBall');
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
document.querySelector('#frame').addEventListener('click',bbb);
this is my css code:
#frame{
border:solid thick red;
border-width:3px;
padding-left:9px;
padding-top:6px;
padding-bottom:6px;
margin:2px;
width:1220px;
height:1000px;
float:right;
background-color:green;
}
.moveBall {
position:absolute;
top: 0px;
left: 0px;
}
#net1{
background-color: lightgray;
width: 400px;
padding: 40px;
margin: auto;
}
#net2{
background-color: lightgray;
width: 400px;
padding:40px;
margin:auto;
margin-top:840px;
add style position:absolute to the ball
(function() {
function bbb(){
var ball = document.querySelector('.moveBall');
console.log(ball);
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
document.querySelector('#frame').addEventListener('click',bbb);
})();
#frame{
border:solid thick red;
border-width:3px;
padding-left:9px;
padding-top:6px;
padding-bottom:6px;
margin:2px;
width:1220px;
height:1000px;
float:right;
background-color:green;
}
.moveBall {
width:40px;
height:40px;
position:absolute;
top: 0px;
left: 0px;
border-radius:50%;
border:1px solid red;
}
#net1{
background-color: lightgray;
width: 400px;
padding: 40px;
margin: auto;
}
#net2{
background-color: lightgray;
width: 400px;
padding:40px;
margin:auto;
margin-top:840px;
}
<div id = "frame" >
<div id = "net1"> </div>
<div id = "net2"> </div>
<div id = "centerPoint"> </div>
<div id = "centerLine"> </div>
<img src="http://via.placeholder.com/350x150" width="40" alt="Ball" class="moveBall">
</div>
I have this scroller with multiple images that are all inside a height:100% wrapper. But what height should my image be in order to display properly and with the correct aspect ratio? Width is fixed to 400px.
Anyone can help me out? Fiddle here: https://jsfiddle.net/45f4jztd/
HTML:
<div id="parent">
<div id="propertyThumbnails">
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
</div>
</div>
CSS:
#parent{
position:relative;
margin:0 auto;
height: 100%;
width: 100%;
background: #ddd;
}
#propertyThumbnails{
position:relative;
overflow:hidden;
background:#444;
width:100%;
height:100%;
white-space:nowrap;
}
#propertyThumbnails img{
vertical-align: middle;
height: 100%;
width:400px;
display:inline;
margin-left:-4px;
}
JavaScript:
$(function(){
$(window).load(function(){
var $gal = $("#propertyThumbnails"),
galW = $gal.outerWidth(true),
galSW = $gal[0].scrollWidth,
wDiff = (galSW/galW)-1, // widths difference ratio
mPadd = 60, // Mousemove Padding
damp = 20, // Mousemove response softness
mX = 0, // Real mouse position
mX2 = 0, // Modified mouse position
posX = 0,
mmAA = galW-(mPadd*2), // The mousemove available area
mmAAr = (galW/mmAA); // get available mousemove fidderence ratio
$gal.mousemove(function(e) {
mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
});
setInterval(function(){
posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
$gal.scrollLeft(posX*wDiff);
}, 10);
});
});
Thanks!
You set the images height to 100% of its parent, or as in my sample, the viewport, here using vh, and its width to auto.
height: 100vh;
width: auto;
Sample snippet
html,
body {
margin: 0;
}
#parent {
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
background: #ddd;
}
#propertyThumbnails {
position: relative;
overflow: hidden;
background: #444;
width: 100%;
height: 100%;
white-space: nowrap;
}
#propertyThumbnails img {
vertical-align: middle;
height: 100vh;
width: auto;
display: inline;
margin-left: -4px;
}
<div id="parent">
<div id="propertyThumbnails">
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
<img src="https://placebear.com/400/1300" />
</div>
</div>
Trying to do this with CSS only.
Have a Canvas on the left side that I want to shrink both width and height as the window is resized. Want the center and right divs to shrink in height to match the canvas. Don't want center and right divs to move under the canvas.
<div class="container">
<div class="left">
<canvas id="draw" width="250" height="300"></canvas>
</div>
<div id="center" class="center"></div>
<div id="right" class="right"></div>
</div>
Fiddle: https://jsfiddle.net/mrx6zk27/
Any help would be appreciated. Expecting I will probably need JavaScript to align the heights, but want to reduce JavaScript as much as possible.
Update: Fiddle using table layout (doesn't work): https://jsfiddle.net/mrx6zk27/2/
I sugest to use flexbox, It's required to update the center and right divs in the markup slightly for this solution. See the code snippet and demo as follows.
jsfiddle
var c = document.getElementById("draw");
ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 300);
ctx.fillStyle = "white";
ctx.font = "bold 40pt Arial";
ctx.fillText("CANVAS", 10, 100);
tmp = "";
for (var i = 0; i < 100; i++) {
tmp += "<p>" + i + "</p>";
}
document.getElementById("center").innerHTML = tmp;
document.getElementById("right").innerHTML = tmp;
.container {
max-width: 650px;
margin: 0 auto;
border: 1px solid black;
display: flex;
}
.container > div {
position: relative;
min-width: 0;
}
.left {
max-width: 250px;
width: auto;
}
.left canvas {
display: block;
max-width: 100%;
height: auto;
}
.center {
flex: 0 0 200px;
overflow-y: scroll;
background-color: blue;
}
.right {
flex: 0 0 200px;
overflow-y: scroll;
background-color: green;
}
.scroll {
position: absolute;
width: 100%;
}
<div class="container">
<div class="left">
<canvas id="draw" width="250" height="300"></canvas>
</div>
<div class="center"><div id="center" class="scroll"></div></div>
<div class="right"><div id="right" class="scroll"></div></div>
</div>
Not very sure if this is what you want, but I think you use display:table.
<div id="container" style="display: table; width:100%;">
<div style="display: table-cell; background-color: red; width:-100%; height:200px"></div>
<div style="display: table-cell; background-color: blue; width:300px;"></div>
<div style="display: table-cell; background-color: green; width: 300px;"> </div>
</div>
http://jsfiddle.net/8mpx1kok/2/
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 320px;
height: 400px;
border: 1px solid red;
}
#top {
width: 320px;
height: 80px;
border: 1px solid blue;
}
</style>
<script>
var type;
function one(){
type = One.js
}
function two(){
type = Two.js
}
</script>
</head>
<body>
<div id="top">
<button onclick="one()">One</button>
<button onclick="two()">Two</button>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="pause()">Pause</button>
</div>
<div style="position: relative;" id="container">
<canvas id="myCanvas" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="trail" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="plane" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="buildings" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="cloud" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="buildings2" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="canvas2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<script type="text/javascript" src=type> </script>
</body>
</html>
Is it possible to have a button before a script is activated to define which script is being played. So a drop down box to edit which script is being activated. I do not know how to do this what so ever.
Thank you :)
you can pass a value to your function to select which one you want to use. For example:
function select(which){
switch(which)
{
case 1:
// execute One.js
break;
case 2:
// execute Two.js
break;
default:
//
}
}
I thing this is what you're looking for something like this:
<body onload="load(0);">
<button onclick="load(0);">One</button>
<button onclick="load(1);">Two</button>
<script>
var myScripts = [
"./js/scriptOne.js", "./js/scriptTwo.js"
];
function load(i){
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", myScripts[i]);
document.getElementsByTagName("head")[0].appendChild( fileref );
}
</script>
This way you're dynamically load your scripts.