0

In my project I am focused right now on the frontend implementation of a series of buttons. Once loading the page, buttons will render on the screen, one after the other, starting from the top-left of the screen. Right now, I'm trying to get each preceding button to print lower and to the right of the previous button, with a fade in effect.

It seems like regardless of what I try, the buttons will print horizontally in rows, when that's not what I am trying to accomplish. For example, if I declare 200 hexagon buttons, I will get 3.5 horizontal rows of hexagons as opposed to them presenting at an angle. I thought it may have been due to screen-size, so I tried fixing the screen size but no change. Attached is an image of the shape I want to accomplish. My buttons are hexagon-shaped, so my goal is to create a honeycomb structure in a staircase or diagonal-like format/ pattern.

I attached a rough image on what I'm trying to accomplish, along with snippets of the relevant code. The image isn't perfect, so anything along the lines of a staircase/ diagonal structure is what I'm trying to accomplish. Any feedback is much appreciated; thank you.

What I'm trying to accomplish:

A diagonal honeycomb shape of buttons with two other functional buttons on each side of it

I have tried different logics in my for-loop. I have not tried adding logic in a separate JavaScript file yet, but I was thinking I could utilize a for-loop within my html page and utilize some algorithm to render buttons that are lower and to the right of the previous button.

I have tried declaring new row/ col variables, that gets manipulated within the for loop but no change.

const hexagonContainer = document.querySelector(".hexagon-container");
const numHexagons = 200;
const numCols = 50; //37 vertial rows

for (let i = 0; i < numHexagons; i++) {
  const hexagon = document.createElement("div");
  hexagon.classList.add("hexagon-button");

  const row = Math.floor(i / numCols);
  const col = i % numCols;

  const xPosition = col * 100; //adding more xPosition seems to make it spread further vertically
  const yPosition = row * 25;

  hexagon.style.animationDelay = `${(row + col) * 0.1}s`; // Adding a delay for a staggered appearance
  hexagon.style.transform = `translate(${xPosition}px, ${yPosition}px)`;
  hexagonContainer.appendChild(hexagon);
}
window.addEventListener('load', function() {
  hexagonContainer.classList.add('show');
});
corn on the cob
  • 2,093
  • 3
  • 18
  • 29
Christian
  • 1
  • Firstly it's a little crazy but I've once done something extremely similiar, even with hexagons! You need to make sure `hexagon-button` class has `position: absolute` with `top: 0; left: 0` and the container of all those hexagons has `position: relative`. The container though will need a set height. At the moment I think the general flow of a webpage (one elements starting position is defined as being after the previous) is hindering your logic. However there's a sense of "wrong tool for the job" also here. I think you should be doing this inside an SVG (not via tag, but embedded). – adsy Aug 27 '23 at 06:40
  • SVG can also deal with scaling to maintain aspect ratio which is crucial here if needing to deal with different screen widths. In fact, the way you are thinking about this works lot better in SVG world where all offsets are relative to the overall image and not the page. BTW something like D3 library is kinda perfect for this stuff. In fact, I was just now amazed to see they have hexagons on their homepage . – adsy Aug 27 '23 at 06:48
  • Running your code I see a 'staircase'. Could you create a runnable snippet which shows the problem because there must be something in CSS which you haven't shown us which is causing the error. See https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Aug 27 '23 at 11:04
  • @adsy This was a great suggestion. I have been able to implement what I want using D3 SVG. Thank you! – Christian Aug 27 '23 at 21:21

0 Answers0