What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

Help 2 questions:

baggysack

repairmanman
I want to take a crack at a custom "hider" i.e. a button that, when clicked, shows hidden content, like a tab, and when clicked again, re-hides that content. Any tips on getting that to work?

I also would like to know how to make a hidden scroll. I believe, based on what I've read, that normally text cropped by "overflow: hidden" isn't readable; you have to manually add a "hidden scroll," like hide the scroll bar with margins or whatever. When looking at other codes, though, I don't think I see anything else BUT "overflow: hidden" and the code works as intended. This hasn't worked for me.

Here's the iCheck I'm chipping at. I want the body text to have the possibility of scrolling if a few words spill over. The writing sample placeholder box is where I want the custom hider to go.
Code:
[nobr]
[class=element]left:210px; z-index:1; width: 0; height: 0; border-style: solid; border-width: 0 0 460px 250px; border-color: transparent transparent #09a1a2 transparent;[/class]
[class=body]line-height:.85em;  text-align:justify; padding:25px; padding-top:0px; letter-spacing:.75px; text-shadow:.5px 0px 0px white; width:65%;[/class]
[class=button]color:white; background: #38c0bc; height:55px;width:55px; border-radius:100px; box-shadow:2px 2px 0px #09a1a2; font-size:28px;text-align:center;line-height:50px;text-shadow:1px 1px 0px #09a1a2;[/class]
[class=header]position:relative; z-index:0; width:480px; text-align:right; padding:5px; background:#09a1a2; color:white; padding-right:15px;[/class]
[class=sample]background:#09a1a2; color:white; border-radius:15px; padding: 10px; font-size:10px; line-height:.85em; letter-spacing:.75px[/class]

[div=padding-top:0px; padding-bottom:7px; color:#161817; background:#bef7ed; margin:auto; width:460px]  
[div class="header"][SIZE=7][font=Crete Round]This is a header.[/font][/SIZE][/div]

[div=display:flex; flex-flow:row;]

[div=position:relative; z-index:1; align-items:center; padding-left:20px; padding-right:20px; width:35%; height:385px;][div=margin-top:-30px][img]https://framapic.org/MkqOdwqfTvYR/G5KChmHsfKGF.png[/img][/div]

[div class="button", style="z-index:4; position:relative; margin-left:46px; margin-top:10px;"][fa]fa-user[/fa][/div]
[div=z-index:3; position:relative; width:100%; bottom:16px; padding:12px; padding-top:25px; font-size:12px; line-height:1em; border:1px solid black; overflow:hidden; height:75px;]
[font=Pridi]Nicknames: Baggy, Sack(y) [br][/br]
Age: 19 [br][/br]
Personality: ISTP-T [br][/br]
Average Word Count: 450-700 [br][/br]
Listening To: "My Generation: 80's" (playlist) [br][/br]
Cravings: Slice-of-life w/ a touch of whimsy[/font][/div][/div] [br][/br]

[div class="body", style="height:338px; overflow:hidden;"]
[br][/br]
[font=Pridi]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.[/font][/div]  
[/div] 

[div class="sample"; style="margin:25px; margin-top:0px"]Writing samples go here.[/div]

[/div]
[/nobr]
 

Ayama

Enthusiast
Hey, so for the hidden scrollbar, there are several ways of doing it. My preference has always been for the following, because I find it simple/elegant/easy to use and understand.
Code:
[div=width: 350px; height: 180px; box-sizing: border-box; overflow: hidden; background-color: #fdf9f7; padding: 10px;][div=width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][/div][/div][/font][/CENTER]
If you have any questions on how it works, feel free to ask ^^

For the hidden content button, it's pretty straightforward to make one that displays hidden content, but I'm not sure about making the content disappear when you click it again- it's my understanding that it's quite involved/difficult to do. As a workaround, the accordion tabs that RPN has have that functionality built into them, and they are customizable, so for your purposes perhaps that would suffice? ouo
 

fated

𝐛𝐚𝐛𝐲 𝐛𝐥𝐮𝐞 𝐛𝐮𝐭𝐭𝐞𝐫𝐟𝐥𝐲
hey there sack! so, as ayama here said, scrolls are pretty easy, and i love to source mine from pasta's resource here. again, ayama pretty much said the same thing. now, for your second question, the only way i know how to do that is by adding a second button after clicking the first (currently, if you tell a button to show and hide the same class, it just cancels out and i don't know a way around this). see this janky example:

click me !
here


Code:
[nobr]
[nobr]

[class=bkg]
position: relative;
margin: auto;
height: 100px;
width: 300px;
background: #EDEDED;
border-radius: 13px;
[/class]

[class=bar]
height: 30px;
width: 120px;
left: 100px;
top: 50px;
background: black;
color: white;
font-size: 10px;
align: center;
border-radius: 13px 0px 13px 0px;
[/class]

[class=txt]
position: absolute;
height: 10px;
top: 10px;
left: 30px;
width: 100%;
color: white;
font-size: 10px;
text-align: left;
[/class]

[class=circ]
height: 20px;
width: 20px;
border-radius: 50px;
background: black;
left: 130px;
top: 5px;
[/class]

[class=content]
left: 10px;
top: 30px;
font-size: 10px;
color: black;
[/class]
[class=hidden]
position: absolute;
display: none;
[/class]

[script class=bar on=click]
fadeIn 0900 content
fadeIn 0900 circ
[/script]

[script class=circ on=click]
fadeOut 0900 content
fadeOut 0900 circ
[/script]

[div class=bkg]
[div class=bar][div class=txt]click me [i]![/i][/div][/div]
[div class="content hidden"]here[/div]
[div class="circ hidden"][/div]

[/div][/nobr]

there, what you really need to focus on are the two script classes and the hidden class. the script class tell the code to bring things in / out on a certain action, and the hidden class (when it's added to an existing class like "classname hidden") makes it so they're not visible until the script classes are activated. now, for your code (which is actually lovely btw), we can try something like this:

This is a header.
Nicknames: Baggy, Sack(y)
Age: 19
Personality: ISTP-T
Average Word Count: 450-700
Listening To: "My Generation: 80's" (playlist)
Cravings: Slice-of-life w/ a touch of whimsy


There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Writing samples go here.


Code:
[nobr]

[class=element]
left:210px; 
z-index:1;
width: 0; 
height: 0; 
border-style: solid; 
border-width: 0 0 460px 250px; 
border-color: transparent transparent #09a1a2 transparent;
[/class]

[class=body]
line-height:.85em;  
text-align:justify; 
padding:25px; 
padding-top:0px; 
letter-spacing:.75px; 
text-shadow:.5px 0px 0px white; 
width:65%;
[/class]

[class=button]
color:white; 
background: #38c0bc; 
height:55px;
width:55px; 
border-radius:100px; 
box-shadow:2px 2px 0px #09a1a2; 
font-size:28px;
text-align:center;
line-height:50px;
text-shadow:1px 1px 0px #09a1a2;
[/class]

[class=header]
position:relative; 
z-index:0; 
width:480px; 
text-align:right; 
padding:5px; 
background:#09a1a2; 
color:white; 
padding-right:15px;
[/class]

[class=sample]
background:#09a1a2; 
color:white; 
width: 200px;
border-radius:15px;
padding: 10px; 
font-size:10px; 
line-height:.85em; 
letter-spacing:.75px;
text-align: center;
[/class]

[class=back]
position: absolute;
top: 4px;
background: #09a1a2;
border-radius: 50px;
width: 17px;
height: 17px;
left: 127px;
text-align: right;
color: white;
[/class]

[class=hidden]
display: none;
[/class]

[script class=button on=click]
fadeIn 0900 sample
fadeIn 0900 back
[/script]

[script class=back on=click]
fadeOut 0900 back
fadeOut 0900 sample
[/script]

[div=padding-top:0px; padding-bottom:7px; color:#161817; background:#bef7ed; margin:auto; width:460px]  

[div class="header"][SIZE=7][font=Crete Round]This is a header.[/font][/SIZE][/div]

[div=display:flex; flex-flow:row;]

[div=position:relative; z-index:1; align-items:center; padding-left:20px; padding-right:20px; width:35%; height:385px;][div=margin-top:-30px][img]https://framapic.org/MkqOdwqfTvYR/G5KChmHsfKGF.png[/img][/div]

[div class="button", style="z-index:4; position:relative; margin-left:46px; margin-top:10px;"][fa]fa-user[/fa][/div]

[div=z-index:3; position:relative; width:100%; bottom:16px; padding:12px; padding-top:25px; font-size:12px; line-height:1em; border:1px solid black; overflow:hidden; height:75px;]
[div class="back hidden"][/div]

[font=Pridi]Nicknames: Baggy, Sack(y) [br][/br]
Age: 19 [br][/br]
Personality: ISTP-T [br][/br]
Average Word Count: 450-700 [br][/br]
Listening To: "My Generation: 80's" (playlist) [br][/br]
Cravings: Slice-of-life w/ a touch of whimsy[/font][/div][/div]

[br][/br]

[div class="body", style="height:338px; overflow:hidden;"]
[br][/br]
[font=Pridi]

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
[/font][/div] [/div]

[div class="sample hidden"; style="margin:25px; margin-top:0px;top:780px;left:630px;"]Writing samples go here.[/div]

[/div] [br][/br]


[/nobr]

there ya go! i will say that you had some open divs at the end, so just remember the russian doll rule; any [/div] applies to the nearest open div, so overlying divs like the background need to be closed at the end. i also went and spaced things out for you to make it easier to deal with, but again, all i really did was add the "back" class and add scripts so that the button would display the sample class on click. tell me if you need any more help!
 

ShadyAce

♥ memes ♥
i'm not sure if this is the effect you intended (as in, the correct button) but the principle should work for whatever aspect you want to act as your button to hide or show content!

This is a header.
Nicknames: Baggy, Sack(y)
Age: 19
Personality: ISTP-T
Average Word Count: 450-700
Listening To: "My Generation: 80's" (playlist)
Cravings: Slice-of-life w/ a touch of whimsy


There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Writing samples go here.


this is the piece of code i've used to achieve the effect you see:

[script class=button on=click]
if (eq ${button} 0) (show sample) (hide sample)
if (eq ${button} 0) (set button 1) (set button 0)
[/script]


it is a very simple 'if x then y else z' statement. so in this case, if the 'button' variable is detected to be '0' when the button is clicked, then the script will 'show sample'. if it is not detected as '0', then it hides the sample. this in conjunction with the second line of code, toggling between the '0' and '1' setting when clicked results in alternation of effect whenever the button is clicked. i hope that sort of makes sense! i'm happy to try to explain in more depth if it doesn't.

what @Ayama said is the most common way of achieving hidden scrolling to my knowledge! i use the same system for the most part. ( i just borrowed your code @Ayama , hope you don't mind! ) for a visual representation of what the effect is doing, you're essentially pushing the scrollbar outside of the outer container, like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Code:
[div=width: 350px; height: 180px; box-sizing: border-box; background-color: #fdf9f7; padding: 10px;][div=width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][/div]

and by adding 'overflow: hidden;' to the outer container, this scroll bar that's floating outside will not show

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Code:
[div=width: 350px; height: 180px; box-sizing: border-box; background-color: #fdf9f7; padding: 10px; overflow: hidden;][div=width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][/div]

and so putting that altogether, your code comes together like so:

This is a header.
Nicknames: Baggy, Sack(y)
Age: 19
Personality: ISTP-T
Average Word Count: 450-700
Listening To: "My Generation: 80's" (playlist)
Cravings: Slice-of-life w/ a touch of whimsy


There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Writing samples go here.


Code:
[nobr]
[script class=button on=click]
if (eq ${button} 0) (show sample) (hide sample)

if (eq ${button} 0) (set button 1) (set button 0)
[/script]

[class=element]left:210px; z-index:1; width: 0; height: 0; border-style: solid; border-width: 0 0 460px 250px; border-color: transparent transparent #09a1a2 transparent;[/class]
[class=body]line-height:.85em;  text-align:justify; padding:25px; padding-top:0px; letter-spacing:.75px; text-shadow:.5px 0px 0px white; width:65%;[/class]
[class=button]color:white; background: #38c0bc; height:55px;width:55px; border-radius:100px; box-shadow:2px 2px 0px #09a1a2; font-size:28px;text-align:center;line-height:50px;text-shadow:1px 1px 0px #09a1a2;[/class]
[class=header]position:relative; z-index:0; width:480px; text-align:right; padding:5px; background:#09a1a2; color:white; padding-right:15px;[/class]
[class=sample]background:#09a1a2; color:white; border-radius:15px; padding: 10px; font-size:10px; line-height:.85em; letter-spacing:.75px; display: none;[/class]

[div=padding-top:0px; padding-bottom:7px; color:#161817; background:#bef7ed; margin:auto; width:460px]  
[div class="header"][SIZE=7][font=Crete Round]This is a header.[/font][/SIZE][/div]

[div=display:flex; flex-flow:row;]

[div=position:relative; z-index:1; align-items:center; padding-left:20px; padding-right:20px; width:35%; height:385px;][div=margin-top:-30px][img]https://framapic.org/MkqOdwqfTvYR/G5KChmHsfKGF.png[/img][/div]

[div class="button", style="z-index:4; position:relative; margin-left:46px; margin-top:10px;"][fa]fa-user[/fa][/div]
[div=z-index:1; position:relative; width:100%; bottom:16px; padding:12px; padding-top:25px; font-size:12px; line-height:1em; border:1px solid black; overflow: hidden; height:75px;]
[div=width: 100%; height: 100%; padding-right: 30px; overflow-y: scroll;]
[font=Pridi]Nicknames: Baggy, Sack(y) [br][/br]
Age: 19 [br][/br]
Personality: ISTP-T [br][/br]
Average Word Count: 450-700 [br][/br]
Listening To: "My Generation: 80's" (playlist) [br][/br]
Cravings: Slice-of-life w/ a touch of whimsy[/font][/div][/div][/div] [br][/br]

[div class="body", style="height:338px; overflow:hidden;"]
[br][/br]
[div=width: 100%; height: 100%; padding-right: 60px; overflow-y: scroll;]
[font=Pridi]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.[/font]
[/div]
[/div]  
[/div] 

[div class="sample"; style="margin:25px; margin-top:0px"]Writing samples go here.[/div]

[/div]
[/nobr]

i hope that cover everything, this ended up being a lot longer than i intended (oops)!
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top