This question already has answers here:
How to put p5.js canvas in a html div
(4 answers)
Closed 4 months ago.
So far I’ve got the p5.js canvas size to react to its parent div container size using document.getElementById("divName").offsetWidth and .offsetHeight but I haven’t managed to work out why it is not sharing its position as well. Here’s a simplified version of my app.
p5.js:
var sketchWidth;
var sketchHeight;
function setup() {
sketchWidth = document.getElementById("square").offsetWidth;
sketchHeight = document.getElementById("square").offsetHeight;
createCanvas(sketchWidth, sketchHeight);
}
function draw() {
background(0,0,255);
}
function windowResized() {
sketchWidth = document.getElementById("square").offsetWidth;
sketchHeight = document.getElementById("square").offsetHeight;
resizeCanvas(sketchWidth, sketchHeight);
}
HTML:
<html>
<body>
<div id="squareContainer">
<div id="square">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="square.js"></script>
</div>
</div>
</body>
<style>
body {
background-color: black;
}
#squareContainer {
display: flex;
width: 50%;
height: 50%;
margin: 0 auto;
background-color: white;
}
#square {
box-sizing: border-box;
width: 80%;
height: 80%;
margin: auto;
background-color: red;
}
</style>
</html>
And here is a screenshot of what I’m currently rendering. As you can see, the blue square (my p5.js code) has the same dimensions as the red square (the div) but I would like it to also be overlapping at the same position.
See the documentation of createCanvas a p5.Renderer. Set the the container as the renders parent():
let renderer = createCanvas(sketchWidth, sketchHeight);
renderer.parent("square");
Related
I'm running into this problem with a program I'm working on and I can't figure out the solution. Basically I have a webapp, on initial render the entire page is height X. There is a background color, and that color covers the full height of the page.
Moments after the initial render, data is fetched asynchronously and added to the page. The data causes the total height of the page to get larger. Unfortunately, only the original height of the page shows the background color, below that the background becomes white.
On further investigation, I've discovered this is due to a parent div not resizing when the child div does. Basically, the div getting elements added to it by the asynchronous data loading grows in height, but the parent wrapping around it (and the one that has the background color) does not.
During my investigation, I have found a partial solution: set the "height" to "auto". The problem with this solution is when the page initially loads, the background color is only applied to the part of the page with actual content, rather than filling the screen. So if I have the height at "auto", the color is screwed up when the page first loads before correcting itself after the items are added, and if the height is "100%" then the color is screwed up after the items are added.
I've put together a barebones HTML file that re-creates the issue:
<!DOCTYPE html>
<html>
<head>
<title>Layout Test</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#root {
background-color: cyan;
height: 100%;
}
#root > h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="root">
<h1>Layout Test</h1>
<div id="container"></div>
</div>
<script>
setTimeout(() => {
const container = document.querySelector('#container');
for (let i = 0; i < 100; i++) {
const h1 = document.createElement('h1');
h1.textContent = 'Hello';
container.appendChild(h1);
}
}, 1000);
</script>
</body>
</html>
You could set min-height: 100vh; on the #root element CSS so that it is always at least the height of the viewport.
Setting the a min-height of 100% on the #root, instead of a height, seems to do the trick:
<!DOCTYPE html>
<html>
<head>
<title>Layout Test</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#root {
background-color: cyan;
min-height: 100%;
}
#root > h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="root">
<h1>Layout Test</h1>
<div id="container"></div>
</div>
<script>
setTimeout(() => {
const container = document.querySelector('#container');
for (let i = 0; i < 100; i++) {
const h1 = document.createElement('h1');
h1.textContent = 'Hello';
container.appendChild(h1);
}
}, 1000);
</script>
</body>
</html>
You could use height: fit-content; and width: fit-content; on the parent element
I was testing html5 canvas element, and wish my canvas to be full screen in the display area. But I found if I set the canvas height to window.innerHeight, the scroll bar will be shown up. I tried and found need to set the height to 5 pixel less, the scroll bar will disappear, but unfortunately it left a white border below the canvas. If it's a div element, everything is fine.
The code I'm using to test is:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function load() {
var o = document.getElementById('canvas');
if (o) {
o.width = window.innerWidth;
o.height = window.innerHeight - 5;
}
o = document.getElementById('div');
if (o) {
o.style.width = window.innerWidth + 'px';
o.style.height = window.innerHeight + 'px';
}
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: white;
}
#canvas {
background-color: blue;
}
#div {
background-color: green;
}
</style>
</head>
<body onload="load();">
<canvas id="canvas"></canvas>
<!--div id="div"></div-->
</body>
</html>
I've cleared the body margin and padding.
I test it on Chrome 8.0.552, and also it acts same on Firefox 3.6.13 but 4 pixel less is fine.
Anything I missed? Any suggestions will be really appreciated. Thanks a lot.
By default canvas, unlike div, is display: inline; so it gets set to vertical-align: baseline;. You can take either of the following approaches to make things naturally fill the window.innerHeight:
#canvas {
background-color: blue;
vertical-align: top;
}
Or:
#canvas {
background-color: blue;
display: block;
}
I'm trying to build a 3D viewer with three.js, that has full height but leaves space for a side panel. The vertical layout works as expected, but as soon as I append the render's dom element, a horizontal scroll bar appears.
Attached is a minimal working example. I would expect to just see the (black) canvas element and the red body. But after v.append(renderer.domElement), the page gets larger (filled with blue, html element) and a horizontal scroll bar appears. It seems the page is larger than its body.
See https://jsfiddle.net/5jnvt4jh.
Has anybody an idea, what may be happening there? I couldn't find any margin or padding with Chrome and Firefox. Thanks :).
MWE
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
html {
background-color: blue;
}
body {
margin: 0px;
height: 100vh;
background-color: red;
}
#viewer {
height: 100%;
width: 80vw;
background-color: green;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var v = document.getElementById('viewer');
var renderer = new THREE.WebGLRenderer();
v.append(renderer.domElement);
renderer.setSize(v.clientWidth, v.clientHeight);
</script>
</body>
</html>
Change style of body to:
body {
margin: 0px;
height: 100vh;
background-color: red;
overflow:hidden;
}
jsfiddle: https://jsfiddle.net/raushankumar0717/5jnvt4jh/2/
I am doing a project from The Odin Project. Basically this.
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="js/jQuery.js"></script>
<link type="text/css" rel="stylesheet" href="css/sketch.css">
<script src="js/sketch.js"></script>
</head>
<body>
<div class="grid_controls">
<button class="clear">Clear</button>
</div>
<div class="container">
</div>
</body>
</html>
CSS
/*=================
General
=================*/
body {
background: aqua;
}
/*=================
Sketchpad Holder
=================*/
.container {
width: 500px;
height: 400px;
background-color: orange;
overflow: hidden;
margin: auto;
position: relative;
top: 20px;
}
.box {
width: 16px;
height: 16px;
background: yellow;
display: inline-block;
margin: 1px 1px 1px 1px;
left: 0.5%;
right: auto;
position: relative;
}
.clear {
position: relative;
margin: auto;
text-align: center;
}
Javascript/Jquery
var default_grid_num = 435;
var div_limit = prompt("How large would you like your grid to be?");
var button_prompt = "Would you like to redraw the grids?";
/*var div_limit = prompt("number")*/
$(document).ready(function() {
for(var i = 1; i <= div_limit; i++)
$(".container").append("<div class='box'></div>");
$(".container > div").hover(function() {
$(this).css("background-color", "red");
});
$("button").click(function() {
$(".box").fadeOut();
if(confirm("Would you like to redraw the grid?"));
{
boxes_per_row = prompt("Define width of grid.");
}
});
});
What I want to do is get user input(.div_limit) and resize the divs(.box) based on the users input(.div_limit) So if the user only typed in the number one, the one div would take up the whole container box.
Here is what I have so far: http://codepen.io/zappdapper/full/epdPKb/
I know I can do this, but how?
I've made a jsfiddle that uses the mod operator % and some math to determine a percentage for the boxes.
I've included max_per_row as well to determine how many should show in a row.
UPDATE
I've taken another look at your example and your comment and come up with this:
http://jsfiddle.net/xw4cbo5n/
I edited the example slightly so that instead of asking two questions, only one is asked: "How many boxes per row of grid" (this is similar to your example).
It then goes on to draw out a grid where each row contains that number and sets each bow width and height accordingly. I also edited your CSS styles slightly.
Is that closer to what you're looking for?
I've created a JSFiddle which displays two prompts when run:
1) How many boxes would you like?
2) How many boxes should take up one row?
http://jsfiddle.net/5vg6n232/
After the responses are given, the grid is drawn.
I've edited your CSS slightly but the main functionality is driven by a couple of functions:
function drawBoxes(){
takes care of adding the correct number on divs to the page. After this is done it calls:
function restyle(numberofBoxesPerRow){
which simply reset's the CSS width of each box based on how may boxes per row the user specified.
Does this answer your question?
This question already has answers here:
Why does my image have space underneath?
(3 answers)
Closed 7 years ago.
I want to lay out a grid by appending divs to body and letting them wrap around the screen. Why am I getting spacing between the rows? It remains regardless of margin & padding; see below image.
Here is the markup:
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<style>
.square {
display: inline-block;
width: 80px;
height: 80px;
border: black thin solid;
}
</style>
<script>
$(function() {
for( var i=0; i<60; i++ ) {
$('body').append( $('<div class="square"></div>') );
}
});
</script>
</body>
</html>
Here is what it looks like:
http://dl.dropbox.com/u/257081/squares.png
Because it's inline-block, it's treated like a line of text, so it gets some space between each line. You can alter the line-height or font-size of the container to fix it (or both, to be on the safe side):
body {
font-size: 1px;
line-height: 0;
}
This should fix it nice and good
body { line-height: 0;}
Solution: Add float: left to your .square class.
Refer this fiddle: http://jsfiddle.net/techfoobar/VdJhp/1/
It's your display that's doing it. You have it set to inline-block. Try doing float: left; instead. That took care of it for me.