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>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to go back to when I learned javascript to make a game of pong. I am trying to get the "left" value to see how far the playArea is from the left to set the position of the ball in the middle.
The script is located at the bottom of the body tag.
Where I am trying to call the resetGame function just to test to see if I can change the balls position to be in the center of the play area. I am trying to log the value of the playArea's left value and it is returning it as if it is nothing. (See below)
It should say "Value of playArea's left: 150px" or maybe just the 150 but it is just empty
The live server is just so i can run it on my browser. Any help would be great as to why this is not returning anything. Thanks!
var ball = document.getElementById('ball');
function resetGame() {
var box = document.getElementById('playArea');
console.log("Value of playArea's left: " + getStyle('playArea',
'left'));
ball.style.left = ((box.style.left + (box.style.left +
box.style.width)) / 2) + "px";
// ball.style.left = 0 + "px";
}
function getStyle(id, property) {
// console.log(id);
// console.log(tmp.style.left);
return document.getElementById(id).style[property];
}
#playArea{
background-color: #000000;
border: 2px solid white;
width: 1000px;
height: 75%;
position: fixed;
left: 150px;
top: 20px;
}
body{
background-color: black;
}
#ball{
background-color: white;
border-radius: 100%;
height: 30px;
width: 30px;
position: relative;
left: 50%;
top: 50%;
}
#start{
height: 50px;
width: 100px;
background-color: white;
position: fixed;
top: 80%;
left: 500px;
}
#reset{
height: 50px;
width: 100px;
background-color: white;
position: fixed;
top: 80%;
left: 700px;
}
.insidebuttons{
font-size: 20px;
padding: 13px;
text-align: center;
font-family: sans-serif;
}
.insidebuttons:hover{
cursor: pointer;
}
.paddle{
width: 30px;
height: 100px;
position: fixed;
background-color: white;
top: 33%
}
#paddleLeft{
left: 170px;
}
#paddleRight{
left: 1105px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pong</title>
</head>
<body>
<div class="outer" id="playArea">
<div class="inner" id="ball"></div>
<div class="paddle" id="paddleLeft"></div>
<div class="paddle" id="paddleRight"></div>
</div>
<div type="button" name="start" id="start" onclick="startGame()">
<div class="insidebuttons">Start</div>
</div>
<div type="button" name="reset" id="reset" onclick="resetGame()">
<div class="insidebuttons">Reset</div>
</div>
<div class="overlay" id="overlay"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
You cannot get the value directly from the style of the element. For values coming from external css stylesheets, you need to use getComputedStyle() function to get the actual value coming from the stylesheet. The returned value of getStyle() will be in px value.
var ball = document.getElementById('ball');
function resetGame() {
var box = document.getElementById('playArea');
console.log("Value of playArea's left: " + getStyle('playArea',
'left'));
ball.style.left = ((box.style.left + (box.style.left +
box.style.width)) / 2) + "px";
// ball.style.left = 0 + "px";
}
function getStyle(id, property) {
// console.log(id);
// console.log(tmp.style.left);
//return document.getElementById(id).style[property];
let el = document.getElementById(id);
return getComputedStyle(el).getPropertyValue(property); // getComputedStyle will get the actual value from the stylesheet
}
#playArea {
background-color: #000000;
border: 2px solid white;
width: 1000px;
height: 75%;
position: fixed;
left: 150px;
top: 20px;
}
body {
background-color: black;
}
#ball {
background-color: white;
border-radius: 100%;
height: 30px;
width: 30px;
position: relative;
left: 50%;
top: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pong</title>
</head>
<body>
<div class="outer" id="playArea">
<div class="inner" id="ball"></div>
<div class="paddle" id="paddleLeft"></div>
<div class="paddle" id="paddleRight"></div>
</div>
<div type="button" name="start" id="start" onclick="startGame()">
<div class="insidebuttons">Start</div>
</div>
<div type="button" name="reset" id="reset" onclick="resetGame()">
<div class="insidebuttons">Reset</div>
</div>
<div class="overlay" id="overlay"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
I have input in div and I wanna draw line center and underneath till the point where div ends.Like below.
I couldnt find anything to implement this.So I expect your help.
Here sample fiddle
<html>
<body>
<div style="border:1px solid black;height:200px">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
</div>
</body>
</html>
Try like this:
.lineLabel {
vertical-align: top;
line-height: 1.5em;
}
.line {
position: relative;
height: 100%;
display: inline-block;
}
.line:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
border-right: 1px solid black;
z-index: 0;
}
.line > input {
position: relative;
z-index: 1;
}
<html>
<body>
<div style="border:1px solid black;height:200px">
<label class="lineLabel" for="fname">First name:</label>
<div class="line">
<input type="text" id="fname" name="fname"><br><br>
</div>
</div>
</body>
</html>
The input needs another div around it so that its size can be used to find the centre. A pseudo-element is then used to draw the line.
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:
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 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>