Problem with particles.js overlap due to dimensions of the canvas

Kindly refrain from marking this as a duplicate or invalid!

I am currently working on a project where I am trying to incorporate particle.js into a Bootstrap template. Following the body tag, I placed the particle-js div and then created a container inside it which served as the parent for the rest of my website's content. However, despite following various suggestions found at:

I have not been able to resolve the issue. I have exhaustively tried every solution mentioned on SO and yet, after two days of troubleshooting, I remain stuck. Any guidance or assistance would be highly appreciated!

Visit ayrus.org/test/ to see the problem firsthand!

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

I encountered a solution to my issue - the canvas element utilized by particle.js was inheriting dimensions from particle.min.js file. After scouring for instances of 100% within that file, I removed the line defining those values! Following this, I employed

canvas {
  display: block;
  vertical-align: bottom;
  height: 80vh;
  width: 100vw;
  background-attachment:fixed;
}

to tailor the size as per my requirements! Hopefully, this guidance proves beneficial to others!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

It appears that using Jquery's .on function in combination with AJAX is not functioning as expected

What is the reason why this code snippet below doesn't work as intended? $(function() { $('#settings').on('click', '.link', function(e) { e.preventDefault(); alert('okay'); }); }); ...

jqueryajax

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

javascriptvue.jsswiper.js

Changing the read-only property of a form input using a button click

I have designed a form with some input fields marked as Readonly along with an icon placed beside each of them. Is there a way to toggle the Readonly property of a specific field when I click on the adjacent icon? Sample Form <div class="input-group"& ...

jqueryhtmlcss

jquery toggleClass not retaining previous click event

I came across a show/hide function that seemed promising for my issue, which I found here (credit to the original author). Inspired by this, I created a demonstration on JSFiddle (https://jsfiddle.net/q7sfeju9/). However, when attempting to show rows, it d ...

javascriptjquerycssasp.net-mvc

What is the method to determine the size of a Map object in Firestore database?

I currently have two elements within a document: an empty array, and a map object containing three components. If the array is empty, it transforms into type array. In this case, I can execute console.log(vehicles.Motorcycles.length) to receive a return of ...

javascriptreactjsgoogle-cloud-firestore

Issue with Vue Checkbox not functioning properly upon being mounted in Edge browser

Currently, I am developing a Vue page with a checkbox that needs to read a value from a cookie upon mounting. However, I have observed that in the Edge browser, the checkbox does not get set correctly even though the Mounted function is definitely being ca ...

javascriptvue.jsmicrosoft-edge

unable to adjust the maximum height limit

I've been struggling to set a maximum height on the slider I'm currently using. No matter what height value I input, it doesn't seem to take effect. Additionally, I attempted setting the width for the echo img row in the PHP section but enco ...

javascripthtmlcss

Easily iterate through the <li> elements using jQuery and append them to the <datalist> dynamically

My jQuery loop seems to be malfunctioning as it's not showing the values of my li elements. Instead, I'm seeing [object HTMLElement] in my input search bar. <div id="sidebar-wrapper"> <input type="text" list="searchList" class="searc ...

javascriptjquery

Ensure that the function is invoked only a single time, whether it be in the componentDidMount or componentDidUpdate lifecycle

I need to ensure that a function is executed only once based on certain props and state conditions. class MyComponent extends Component { state = { externalInfoPresent: false, infoSaved: false, } async componentDidMount() { await this.p ...

javascriptreactjs

Ways to create a unique animation for reducing the width of a div in a specific direction?

Currently, I have managed to animate the decrease in width of a div element. However, it is currently decreasing from right to left, and I would like it to decrease from left to right instead. Can someone please provide guidance on how to achieve this? ...

htmlcssanimation

problem encountered while using jquery toggle to open/close elements

I am working on a small private messaging system where users can toggle messages open or close using buttons. When no message is open, the button displays 'lesen'. Upon clicking the button, the message opens and the text changes to 'schließ ...

javascriptphpjquery

Embed an HTML element within a DIV container

How can I add an HTML tag such as <p> to wrap around the text "Search"? <button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button> I am looki ...

jqueryhtmlcss

What is the process for mapping a texture or shape to a particular section of a mesh in Three.js?

Is there a way to project a texture or shape onto a specific part of a mesh, such as a transparent ring or circle? I want to achieve a similar effect to what we see in games when selecting an enemy or NPC, where a circle appears under the character to indi ...

javascriptthree.jsmesh

What is the process for converting a string literal into raw JSON and then storing it?

When trying to edit object values using a text input element and JSON.stringify(txt, null, 2), everything seems fine initially. However, after submitting the input, I end up with unwanted characters like "/n" and "\" within the string literal. Despite ...

javascriptjsonstringvue.js

Receiving blank response when trying to access server variable on the client side

Query: On the server side, I set the value of SessionData(EmployeeID) = "12345", which is first executed during page_load. Later, on the client side: function getEmployeeId() { return "<%# SessionData("EmployeeID")%>"; } When I use th ...

javascript.netsession

Why is my Vue application updating the route but not the router-view component?

I'm struggling to understand why the router-view in my root template of App.vue is not updating even though the route is changing correctly. My router code navigates to /:user page and updates the view as expected. However, when I try to navigate fro ...

javascriptvue.jsvuejs3

Multiple CSS styles are being employed simultaneously to render the webpage

Currently, I am utilizing JavaScript to choose different CSS styles for various accessibility options such as black on white text and larger text. The issue I am facing arises when switching the CSS sheet, as elements from previously selected sheets are st ...

javascripthtmlcss

Locate the destination URL in Fancybox

Is there a way to insert a link into the title, using the selected anchor's href but with an added prefix? I need help figuring out how to achieve this. Specifically, I am looking to access this.href on the chosen anchor element. $(".gallery-module & ...

javascriptjqueryfancyboxfancybox-2

Difficulty encountered in updating custom table in Wordpress

I am attempting to update a custom table called wp_table from the frontend. I am trying to update records on the same page that was submitted ($_SERVER['PHP_SELF']). After successfully updating, I want to redirect the user to the home page, howev ...

phpjquerymysqlwordpresswordpress-theming

Name values not appearing in dropdown list

Looking for some assistance with displaying a list of names in a dropdown menu using Angular. The dropdown is present, but the names from my array are not appearing. I think it might be a simple fix that I'm overlooking. I'm new to Angular, so an ...

htmlangulartypescript