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
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.
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
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
Lesson, check my code with a fine tooth comb as often the little things i guess