The particular division is failing to display in its designated location

Question

The particular division is failing to display in its designated location

This is quite an interesting predicament I am facing! Currently, I am in the process of coding a website and incorporating the three.js flocking birds animation on a specific div labeled 'canvas-div'. My intention is to have this animation displayed above the fold and persistently at the top of the website.

However, it seems that the exact opposite is happening. Here's what I have coded so far...

<div class="canvas-wrapper">
  <div id="canvas-div">
  </div>
</div>
<div id="home1"></div>

Here is how my CSS looks like...

.canvas-wrapper {
  height:100%
}

#canvas-div {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: static; /* fixed or static */
  top: 0;
  left: 0;
  background:width:100%; height:100%;color:grey
  overflow:hidden;
  float:left
}

#home1 {
  height:300px;
  width:100%;
  float:left
}

Upon inspecting the site using the developer tools, here is what I found instead...

<div class="canvas-wrapper"></div>
<div id="home1"></div>
<div id="canvas-div">
  <canvas></canvas>
</div>

I suspect that the JavaScript responsible for running the flocking birds animation may be causing this issue, but pinpointing the exact problem has proven challenging.

Below is the snippet of JavaScript code being utilized...

// JavaScript code goes here...

If anyone can offer any insights or assistance with resolving this dilemma, it would be greatly appreciated.

javascript css canvas three.js

Answer 1

Answer №1

A breakthrough! I finally cracked the code. Previously, the canvas was situated at the bottom right above the closing body tag. It was clearly related to the JavaScript implementation.

Here's how it used to look:

container = document.getElementById("canvas-div"),
document.body.appendChild(container), 
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1e4), 
camera.position.z = 450, scene = new THREE.Scene, birds = [], boids = [];
for (var i = 0; 30 > i; i++) {
    boid = boids[i] = new Boid,
    boid.position.x = 400 * Math.random() - 200, 
    boid.position.y = 400 * Math.random() - 200, 
    boid.position.z = 400 * Math.random() - 200,    
    boid.velocity.x = 2 * Math.random() - 1, 
    boid.velocity.y = 2 * Math.random() - 1, 
    boid.velocity.z = 2 * Math.random() - 1, 
    boid.setAvoidWalls(!0), 
    boid.setWorldSize(500, 500, 400), 
    bird = birds[i] = new THREE.Mesh(new Bird, new THREE.MeshBasicMaterial({
        color: 16777215 * Math.random(),
        side: THREE.DoubleSide
    })), 
    bird.phase = Math.floor(62.83 * Math.random()), 
    scene.add(bird);
}
renderer = new THREE.CanvasRenderer({
    alpha: !0
}), 
renderer.setClearColor(16777215, 0),   
renderer.setSize(container.offsetWidth, container.offsetHeight), 
container.appendChild(renderer.domElement),
window.addEventListener("resize", onWindowResize, !1)

The issue lay within the

document.body.appendChild(container)

line, which I've now removed. Here's the updated version:

container = document.getElementById("canvas-div"), 
//document.body.appendChild(container),
renderer = new THREE.CanvasRenderer({
    canvas: my_canvas,
    alpha: !0
}),
renderer.setClearColor(16777215, 0), 
renderer.setSize(container.offsetWidth, container.offsetHeight), 
container.appendChild(renderer.domElement), 
window.addEventListener("resize", onWindowResize, !1)
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1e4), 
camera.position.z = 450, scene = new THREE.Scene, birds = [], boids = [];
for (var i = 0; 30 > i; i++) {
    boid = boids[i] = new Boid, 
    boid.position.x = 400 * Math.random() - 200, 
    boid.position.y = 400 * Math.random() - 200, 
    boid.position.z = 400 * Math.random() - 200, 
    boid.velocity.x = 2 * Math.random() - 1, 
    boid.velocity.y = 2 * Math.random() - 1, 
    boid.velocity.z = 2 * Math.random() - 1, 
    boid.setAvoidWalls(!0),
    boid.setWorldSize(500, 500, 400),
    bird = birds[i] = new THREE.Mesh(new Bird, new THREE.MeshBasicMaterial({
        color: 16777215 * Math.random(),
        side: THREE.DoubleSide
    })), 
    bird.phase = Math.floor(62.83 * Math.random()), 
    scene.add(bird); 
}

Answer 2

A breakthrough! I finally cracked the code. Previously, the canvas was situated at the bottom right above the closing body tag. It was clearly related to the JavaScript implementation.

Here's how it used to look:

container = document.getElementById("canvas-div"),
document.body.appendChild(container), 
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1e4), 
camera.position.z = 450, scene = new THREE.Scene, birds = [], boids = [];
for (var i = 0; 30 > i; i++) {
    boid = boids[i] = new Boid,
    boid.position.x = 400 * Math.random() - 200, 
    boid.position.y = 400 * Math.random() - 200, 
    boid.position.z = 400 * Math.random() - 200,    
    boid.velocity.x = 2 * Math.random() - 1, 
    boid.velocity.y = 2 * Math.random() - 1, 
    boid.velocity.z = 2 * Math.random() - 1, 
    boid.setAvoidWalls(!0), 
    boid.setWorldSize(500, 500, 400), 
    bird = birds[i] = new THREE.Mesh(new Bird, new THREE.MeshBasicMaterial({
        color: 16777215 * Math.random(),
        side: THREE.DoubleSide
    })), 
    bird.phase = Math.floor(62.83 * Math.random()), 
    scene.add(bird);
}
renderer = new THREE.CanvasRenderer({
    alpha: !0
}), 
renderer.setClearColor(16777215, 0),   
renderer.setSize(container.offsetWidth, container.offsetHeight), 
container.appendChild(renderer.domElement),
window.addEventListener("resize", onWindowResize, !1)

The issue lay within the

document.body.appendChild(container)

line, which I've now removed. Here's the updated version:

container = document.getElementById("canvas-div"), 
//document.body.appendChild(container),
renderer = new THREE.CanvasRenderer({
    canvas: my_canvas,
    alpha: !0
}),
renderer.setClearColor(16777215, 0), 
renderer.setSize(container.offsetWidth, container.offsetHeight), 
container.appendChild(renderer.domElement), 
window.addEventListener("resize", onWindowResize, !1)
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1e4), 
camera.position.z = 450, scene = new THREE.Scene, birds = [], boids = [];
for (var i = 0; 30 > i; i++) {
    boid = boids[i] = new Boid, 
    boid.position.x = 400 * Math.random() - 200, 
    boid.position.y = 400 * Math.random() - 200, 
    boid.position.z = 400 * Math.random() - 200, 
    boid.velocity.x = 2 * Math.random() - 1, 
    boid.velocity.y = 2 * Math.random() - 1, 
    boid.velocity.z = 2 * Math.random() - 1, 
    boid.setAvoidWalls(!0),
    boid.setWorldSize(500, 500, 400),
    bird = birds[i] = new THREE.Mesh(new Bird, new THREE.MeshBasicMaterial({
        color: 16777215 * Math.random(),
        side: THREE.DoubleSide
    })), 
    bird.phase = Math.floor(62.83 * Math.random()), 
    scene.add(bird); 
}

The particular division is failing to display in its designated location

Answer №1

Similar questions

The issue with 'DemoCtrl' defined in Angular JS is that it does not correspond to a valid argument

What is the best way to transfer a multidimensional array from PHP to JavaScript?

Error encountered with Jquery script: "Unauthorized access"

Error in React-router: Unable to assign value to the 'props' property as it is undefined

Retrieve documents from MongoDB that were created within the last week and return a count of 0 for any days in which no documents were created

Having difficulty adding a custom library from a repository into an Ember project as a dependency

Javascript malfunctioning - exhausted all troubleshooting options

Is there a way to check for invalid string literals within a string?

When NextJS calls a dynamic page in production, it redirects to the root page

The JavaScript function is not functioning properly, whereas another function is working as intended

What is the best method for resetting a flexbox item?

Combine multiple SCSS files located in various directories into a single CSS file by using NPM

Personalized FullCalendar header title

What is the best way to efficiently load all of my web applications within the web application that I am currently developing?

Node.js file successfully establishes a database connection, but script tags fail to do so

The CSS on the maps infobox is not rendering properly when an icon is clicked

Changing json into another format

The Vue Swiper does not support inline containers in my code

Having trouble with the jQuery each function's functionality

What is the reason behind having all bindings resolved during each $digest cycle?