Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
June 16, 2024 - @148.17 (what is this?)
Forum activity rating: Four Star Posts: 52/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :ozwomp: Reminder: Forum messages stay readable for years! Keep yours high quality! :ozwomp:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  HELP: Resources for making an accordion style character profile page?


« previous next »
Pages: [1] Print
Author Topic: HELP: Resources for making an accordion style character profile page?  (Read 674 times)
almostcorporeal
Jr. Member ⚓︎
**


you are a violent and irrepressible mirable

SpaceHey: Friend Me!

View Profile WWW

First 1000 Members!Cool Dude AwardJoined 2023!
« on: February 12, 2023 @913.54 »

Hey all! Sorry that this title isn't quite the clearest, I'm not really sure WHAT to call what I want to do on my page [which is why I'm trying to find resources here cuz idk what to pop into my search TT_TT ] so I've drawn it and I can explain how I want it to function to the best of my ability and maybe y'all can point me to how the heck I can get it done!

So I want it to start with a row of 4 100x100 character portraits for instance lined up like so:

[I've added lil faces so you can tell they're different characters (: ]

And then when you click on one of the 100x100 portraits, it expands the box to display a full portrait of the character along with biography, fun facts, any other information you choose, and the other 3 portraits get pushed over to the side of the expanded box like shown here?


[Apologies if these drawings aren't clear, I did them on my phone at 3am haha]

I've tried digging around to figure out how to do this on my own and found a few things like a "flex box accordion style cards" snippet but it expands the information below the initial row of images rather than adjusting the layout like I want it to do.

Is this possible? I should add that I'm on neocities [I understand they don't allow use of anything outside of HTML/CSS/JS?] if that changes anything!
Thank you for reading! :4u:
Logged

the holy inquisition finds you guilty of heresy and you and your descendants must be cleansed in blood
Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #1 on: February 13, 2023 @16.53 »

Nothing is impossible when it comes to computers - the question is how much time will it take :tongue:

I have to be candid though; to make this as a single page would be a challenging job for me (with quite a lot of knowhow) and I have no idea how Id approach it. I'd probably try to make each character box a large div that could be resized and cropped using overflow: hidden - then use some mix of flex and Javascript to animate it and switch between them.

HOWEVER, based on the fact that your asking, and looking at where your site is right now; I don't think you should take that path! You could fake this and get 90% of the way there if you split it into 2 separate pages.

Page 1: Based on your drawing is a set of profile pictures of the characters and each one is a link to page 2.
Page 2: is your second drawing - the big box is an iframe and the character buttons down the side are links like the ones on Page 1.

Depending on what character you click, it can load that characters bio into the iframe (you can do that easily using my frame script!)

The only tricky bit then is switching the profile pictures on the right of page 2 so they don't show the character your viewing.. that might need some custom JavaScript. However even if it needs custom script it would be MUCH more beginner friendly than trying to do it all as one page and a good was to learn!

I think if you just did a little looping script that hides the one you click and shows all the others - that would be super simple - but worry about that when you get there :grin:

If you do it this way; Your first step is try make the 2 pages - get the iframe and bio pages working - get links between them working - then you can come back here if you need help with that final script.
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
almostcorporeal
Jr. Member ⚓︎
**


you are a violent and irrepressible mirable

SpaceHey: Friend Me!

View Profile WWW

First 1000 Members!Cool Dude AwardJoined 2023!
« Reply #2 on: February 13, 2023 @28.51 »

Nothing is impossible when it comes to computers - the question is how much time will it take :tongue:

I have to be candid though; to make this as a single page would be a challenging job for me (with quite a lot of knowhow) and I have no idea how Id approach it. I'd probably try to make each character box a large div that could be resized and cropped using overflow: hidden - then use some mix of flex and Javascript to animate it and switch between them.

HOWEVER, based on the fact that your asking, and looking at where your site is right now; I don't think you should take that path! You could fake this and get 90% of the way there if you split it into 2 separate pages.

Page 1: Based on your drawing is a set of profile pictures of the characters and each one is a link to page 2.
Page 2: is your second drawing - the big box is an iframe and the character buttons down the side are links like the ones on Page 1.

Depending on what character you click, it can load that characters bio into the iframe (you can do that easily using my frame script!)

The only tricky bit then is switching the profile pictures on the right of page 2 so they don't show the character your viewing.. that might need some custom JavaScript. However even if it needs custom script it would be MUCH more beginner friendly than trying to do it all as one page and a good was to learn!

I think if you just did a little looping script that hides the one you click and shows all the others - that would be super simple - but worry about that when you get there :grin:

If you do it this way; Your first step is try make the 2 pages - get the iframe and bio pages working - get links between them working - then you can come back here if you need help with that final script.
I'm perfectly fine with things taking a bit of time and even a good heaping of elbow grease! :omg:k:
I'm also perfectly happy faking it if I can get something along the same lines as my silly little drawing, so thank you for that!

Looks like I've got a bit of asset creation [profile images and bios n such hehe] and fiddling to do! Thanks so much for the direction, and I'll be sure to come back if I have trouble with the script!!
Logged

the holy inquisition finds you guilty of heresy and you and your descendants must be cleansed in blood
nymphaeaphoo
Casual Poster ⚓︎
*



View Profile WWW

First 1000 Members!Joined 2022!High Speed Ozwomp!
« Reply #3 on: February 13, 2023 @148.18 »

I found a single page solution that requires no JavaScript.



Code
<section class=character-profile-wrapper>
 <!-- these divs are targeted by links as a way of specifying which character is selected -->
<!-- selectors 1 to 4 are the corresponding characters, selector 0 is used to select no one at all -->
<div id=accordion-select-0 class=accordion-selector></div>
<div id=accordion-select-1 class=accordion-selector></div>
<div id=accordion-select-2 class=accordion-selector></div>
<div id=accordion-select-3 class=accordion-selector></div>
<div id=accordion-select-4 class=accordion-selector></div>

<section class=character-profile-accordion>
<article class=character-profile>
<a href=#accordion-select-1 ><img src="hap.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-2 ><img src="sad.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-3 ><img src="meh.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-4 ><img src="poker.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
</section>
</article>
</section>

<style>
/* selector divs are fixed to the page so that when they are targeted the page doesnt scroll */
.accordion-selector {
position: fixed;
}

.character-profile {
width: 100%;
height: 100%;
overflow: hidden;
}

.character-profile img {
height: 100%;
float: left;
padding: 10px;
}

/* row of 4 */
.character-profile-accordion {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px;
}

/* make a big space for the selected character */
#accordion-select-1:target ~ .character-profile-accordion, 
#accordion-select-2:target ~ .character-profile-accordion,
#accordion-select-3:target ~ .character-profile-accordion,
#accordion-select-4:target ~ .character-profile-accordion
{
grid-template-columns: 1000px 200px;
grid-template-rows: 200px 200px 200px;
}

/* place targeted character in the big space, the rest automatically sort themselves into the free spaces */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1),
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2),
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3),
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4)
{
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 4;
overflow: auto;
}

/* biography is hidden... */
.character-profile-biography
{
display: none;
}

/* ...unless its character is selected */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1) .character-profile-biography,
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2) .character-profile-biography,
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3) .character-profile-biography,
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4) .character-profile-biography
{
display: unset;
}

/* trivial styles */
.character-profile a  {
font-size: 30px;
}
.character-profile {
background-color: magenta;
}
.character-profile-accordion .character-profile:nth-child(2) {
background-color: blue;
}
.character-profile-accordion .character-profile:nth-child(3) {
background-color: yellow;
}
.character-profile-accordion .character-profile:nth-child(4) {
background-color: lime;
}
body {
background-color: #000000;
}
</style>
</section>


The images I used in the demo are 120x120 pixels. when you supply your images, depending on their size,  you may have to adjust the sizes of the css grid.


I have made a similar thing on my website before, using more or less the same techniques

If you have any questions let me know!

attached below is the video demo
v

* ca.webm (437.66 kB - downloaded 18 times.)
« Last Edit: February 13, 2023 @166.37 by nymphaeaphoo » Logged

-
almostcorporeal
Jr. Member ⚓︎
**


you are a violent and irrepressible mirable

SpaceHey: Friend Me!

View Profile WWW

First 1000 Members!Cool Dude AwardJoined 2023!
« Reply #4 on: February 13, 2023 @237.67 »

I found a single page solution that requires no JavaScript.



Code
<section class=character-profile-wrapper>
 <!-- these divs are targeted by links as a way of specifying which character is selected -->
<!-- selectors 1 to 4 are the corresponding characters, selector 0 is used to select no one at all -->
<div id=accordion-select-0 class=accordion-selector></div>
<div id=accordion-select-1 class=accordion-selector></div>
<div id=accordion-select-2 class=accordion-selector></div>
<div id=accordion-select-3 class=accordion-selector></div>
<div id=accordion-select-4 class=accordion-selector></div>

<section class=character-profile-accordion>
<article class=character-profile>
<a href=#accordion-select-1 ><img src="hap.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-2 ><img src="sad.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-3 ><img src="meh.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-4 ><img src="poker.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
</section>
</article>
</section>

<style>
/* selector divs are fixed to the page so that when they are targeted the page doesnt scroll */
.accordion-selector {
position: fixed;
}

.character-profile {
width: 100%;
height: 100%;
overflow: hidden;
}

.character-profile img {
height: 100%;
float: left;
padding: 10px;
}

/* row of 4 */
.character-profile-accordion {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px;
}

/* make a big space for the selected character */
#accordion-select-1:target ~ .character-profile-accordion, 
#accordion-select-2:target ~ .character-profile-accordion,
#accordion-select-3:target ~ .character-profile-accordion,
#accordion-select-4:target ~ .character-profile-accordion
{
grid-template-columns: 1000px 200px;
grid-template-rows: 200px 200px 200px;
}

/* place targeted character in the big space, the rest automatically sort themselves into the free spaces */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1),
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2),
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3),
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4)
{
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 4;
overflow: auto;
}

/* biography is hidden... */
.character-profile-biography
{
display: none;
}

/* ...unless its character is selected */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1) .character-profile-biography,
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2) .character-profile-biography,
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3) .character-profile-biography,
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4) .character-profile-biography
{
display: unset;
}

/* trivial styles */
.character-profile a  {
font-size: 30px;
}
.character-profile {
background-color: magenta;
}
.character-profile-accordion .character-profile:nth-child(2) {
background-color: blue;
}
.character-profile-accordion .character-profile:nth-child(3) {
background-color: yellow;
}
.character-profile-accordion .character-profile:nth-child(4) {
background-color: lime;
}
body {
background-color: #000000;
}
</style>
</section>


The images I used in the demo are 120x120 pixels. when you supply your images, depending on their size,  you may have to adjust the sizes of the css grid.


I have made a similar thing on my website before, using more or less the same techniques

If you have any questions let me know!

attached below is the video demo
v
Wow!! Thank you so so much! I really appreciate that! I'll be sure to reach out if things get tricky but from my initial look over I think I got it!!
:transport:
Logged

the holy inquisition finds you guilty of heresy and you and your descendants must be cleansed in blood
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Forum feature requests and Ideas

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 260
Views: 24833
Last post June 15, 2024 @140.94
by emeowly
xX Welcome to the Forum & Rules Xx

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 0
Views: 5803
Last post November 14, 2021 @627.84
by Melooon
How to use a forum?! - A guide for those who have forgotten/never knew!

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 2
Views: 3601
Last post April 22, 2023 @739.62
by Aloe

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi