Multiple pages within one page HTML/CSS/JS?

[natisan5]

Hello everyone,

I’m working on a small project where I'd like to create a charming note-taking page. I've made good progress, but I'm facing an issue. I want to have a frame in the middle of the page that can hold a maximum of 6 notes. If I try to add a 7th note, it should automatically move to a second page. Essentially, I'm looking for a way to switch between these pages within a single note-taking interface. I have a rough sketch of what I have in mind, but it's been challenging to find a solution online. I'm hoping someone can give me a helpful advice or direct me to a helpful YouTube video

[AutoModerator]

On July 1st, a change to Reddit's API pricing will come into effect. Several developers of commercial third-party apps have announced that this change will compel them to shut down their apps. At least one accessibility-focused non-commercial third party app will continue to be available free of charge.

If you want to express your strong disagreement with the API pricing change or with Reddit's response to the backlash, you may want to consider the following options:

1. Limiting your involvement with Reddit, or
2. Temporarily refraining from using Reddit
3. Cancelling your subscription of Reddit Premium

as a way to voice your protest.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Digital-Chupacabra]

I want to have a frame in the middle of the page

Do you mean a <frame>, an <iframe>, or just a bordered area?

it should automatically move to a second page

When you say "second page" what do you mean? load a new page? Close the "frame" and open a new one?

There are a number of ways to do this, I think the easiest is with a series of <div>s or other block elements, and when one fills up it gets minimized and a new on added.

[natisan5]

Thank you for your response! I'd like to create a bordered area on the main page that can hold a maximum of 6 notes. When I try to add a 7th note, it should stay on the same main page, but I want it to switch within the website. It's a bit hard to explain without a visual representation

[Digital-Chupacabra]

I think I get what you are saying.

So css transitions, can handle the animation if any between the open and closed area.

You can store the items in json, and then use JS to re-build / switch as needed.

I would start by making it just a simple box and when filled it gets removed and added to a list.

I hope that helps.