Customisable grid for end users

Ok, i am trying to creat a page where a user can start with a basically blank page that they can then add grid lines to form boxes. Each box automatically becoming a customisable space. I am still at the stage of just adding the grid lines one by one. In this case literally just want to add a single verticle line and one horizonlal line that can both be moved up and down. Any help welcome thx

Repl link:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Neighborhood Website</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    nav {
      display: flex;
      justify-content: space-around;
      background-color: #444;
      padding: 10px;
    }

    nav a {
      color: #fff;
      text-decoration: none;
    }

    section {
      padding: 20px;
      text-align: center;
    }

    button {
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }

    .horizontal-line {
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: black;
      cursor: row-resize;
      display: none;
    }

    .vertical-line {
      position: absolute;
      width: 2px;
      height: 100%;
      background-color: black;
      cursor: col-resize;
      display: none;
    }
  </style>
</head>

<body>

  <nav>
    <a href="/index.html">Home</a>
    <a href="mkdocs.yml/Option 1.yml">Option 1</a>
    <a href="mkdocs.yml/Option 2.yml">Option 2</a>
    <a href="mkdocs.yml/Option 3">Option 3</a>
    <a href="#">Option 4</a>
    <a href="#">Option 5</a>
    <a href="#">Option 6</a>
    <!-- ... Add more options -->
  </nav>

  <section>
    <button onclick="addHorizontalGrid()">Add Horizontal Grid</button>
    <button onclick="addVerticalGrid()">Add Vertical Grid</button>
  </section>

  <div class="horizontal-line" id="horizontalLine"></div>
  <div class="vertical-line" id="verticalLine"></div>

  <script>
    let isMovingHorizontalLine = false;
    let isMovingVerticalLine = false;
    let horizontalLine = document.getElementById('horizontalLine');
    let verticalLine = document.getElementById('verticalLine');

    function addHorizontalGrid() {
      horizontalLine.style.display = 'block';
      document.addEventListener('mousemove', moveHorizontalLine);
      document.addEventListener('mouseup', () => {
        isMovingHorizontalLine = false;
        document.removeEventListener('mousemove', moveHorizontalLine);
      });
    }

    function addVerticalGrid() {
      verticalLine.style.display = 'block';
      document.addEventListener('mousemove', moveVerticalLine);
      document.addEventListener('mouseup', () => {
        isMovingVerticalLine = false;
        document.removeEventListener('mousemove', moveVerticalLine);
      });
    }

    function moveHorizontalLine(e) {
      if (!isMovingHorizontalLine) {
        isMovingHorizontalLine = true;
      }
      let mouseY = e.clientY;
      horizontalLine.style.top = mouseY + 'px';
    }

    function moveVerticalLine(e) {
      if (!isMovingVerticalLine) {
        isMovingVerticalLine = true;
      }
      let mouseX = e.clientX;
      verticalLine.style.left = mouseX + 'px';
    }
  </script>

</body>

</html>

I noticed that your moveHorizontalLine and moveVerticalLine functions only update the line positions when the mouse moves. But how do you check if the user is actively moving the line? (Like, dragging the line)

Another thing I’d suggest is to visually indicate that the lines are movable, like, change the cursor when hovering the lines or something like that so the user don’t get lost.

Ok so this is what i trying to do…. And this is only the interface for some of the pages i will need

So… the user opens the web page for the first time…. There is a single message that reads ‘please set up your first grid of boxes by pressing here’ … there is a button that they can press. When they press this a box grid line appears splitting the page horizontally. This line sets the page as two boxes. The line has a button at one end. In the lower box a message appears that says ‘ you can move and line using these buttons’ when the user presses and holds on the button that is on the line, and moves up and down the line moves with it. Once the user has moved the line say 25% of the current page hight, the message changes to ‘now set up your vertical lines by pressing here’ another button appears. When they press this a vertical line appears in the middle of the screen making 4 boxes. The message moves to the lower left box and changes to ‘press and hold here to move the line’ a button appears at the bottom end of the vertical line. When the user presses on and holds the button they can move the line left and right. Once they move the line say 25% of the the message changes to ‘You can set up as many grids as you choose and delete them by pressing and holding on the line for 3 seconds and then selecting delete, please experiment ’. The user can then add lines to make more boxes or delete lines If they hold on a line for 3seconds a button appears saying delete next to where they were pressing (holding). When they press delete the line they have selected will be deleted but only in between the nearest intersecting lines. This way they can set up a grid on the screen any way they want . If they do not do anything for 10 seconds, or once they have added, deleted or moved any lines say 15 times a new message appears… ‘you can set your workspace to whatever size you want by dragging either the lines top, bottom, left or right on the edges of your workspace off of the screen. the user can now select the edges of their screen using one of four buttons that appear on these edges but slightly indented from the edge. If the press and hold say the top button the screen if free to scroll upwards and stretches any boxes with it. The same would happen for the bottom, left or right edges of the ‘workspace’

As the code stands it does nothing. I have also made a page where a box can have multi functional options set by the use via a drop down menu. So far i have made this box be a textbox for taking note (which works) a drawing canvas ( but has no code for actually drawing) a 3d design page (that does nothing for the same reason, and a web browser. The idea being a fully customisable workspace the user can design and decide what each box does.

I have only been coding a few days, and most of the work is thx to chatbox GPT, but even AI have their limits.

Wait wait wait, you are off to a good start, and you should stick to going by parts as you are doing right now.

No need to rush the work, specially if you are new to coding.

Go by the parts that I told you:

And build your code nice and slow. Try to solve things piece by piece and build a to-do list of your own. Finish 1 thing on the list, go to the next one.

ChatGPT is limited to small projects but whenever you hit a roadblock you can ask for help as you are doing what now.

Trying to do everything at the same time will only leave you to complete madness. Finish this part, then go to the canvas, after that the 3d page, etc etc etc.

1 Like

Thanx, that is how i am trying to do. All i want is to actually see a page, not a big pair of binoculars when i go to this page, with two buttons to creat the two grid lines (one vertical one horizontal…. and move them with my finger (horizontal line up and down, and vertical line left and right

Can you please provide a link to the Repl?

1 Like

Confused, so you have been to my riple… the code i am having a problem with is Option 7…. or Making Grid on the home page

No, I have not been to your Repl. You did not send the link.

https://replit.com/@chrishg23/Index?s=app

I found the issue why i couldn’t load the page…. In the index page i had 4 spaces between the file name so it was looking for basically Option____7 (_ being spaces) instead of Option 7. Just the 7 was on a new line, and being dyslexic it makes finding these errors that bit harder i guess. Idiot mistake… now i have to check all 1 million different sets of code i generated to fix this for the page i was actually trying to run :rofl::rofl::rofl:

Lesson, check my code with a fine tooth comb as often the little things i guess

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.