Can Someone Help Me With Hidden Scrollies?

This is an archived version of FeralFront. While you can surf through all the content that was ever created on FeralFront, no new content can be created.
If you'd like some free FeralFront memorabilia to look back on fondly, see this thread from Dynamo (if this message is still here, we still have memorabilia): https://feralfront.com/thread/2669184-free-feralfront-memorabilia/.
  • Okay, so I've been having trouble figuring out how to make hidden scrollies work. I understand how regular ones work, and I look at a lot of coding with hidden scrollies but just can't make sense of it. Could someone please help me?

  • [justify][fancypost bgcolor=; border: 0px; width: 450px; color: black; font-family: arial; font-size: 9pt; line-height: 95%;]Here, i'll attempt to break down punki's invisible scrolling explanation ( which can be found here if you haven't seen it ) c: mind the fact that i'm horrible at explaining things


    Invisible scrolling can be achieved through 3 fancyposts. It's one inside another inside another. Does that make sense? It's sort of like:


    [fancypost 1...][fancypost 2...][fancypost 3...]Normal text here[/fancypost][/fancypost][/fancypost]


    Notice how I labeled each "fancypost"? I'll break down what goes in each one and provide examples xd ( most of this is coming from her thread either way so if looking at hers through this is clearer than go ahead c: )


    FANCYPOST 1 is the "structure" of the invisible scrolling code. It would contain the overflow: hidden code in it. In this fancypost, put in the width and height of the fancypost. This will be the same dimensions for the text box you want. ( So if you want a 200x300 text box, you would make the width 200 and height 300 ). Moving on, if you want your textbox to have padding, you would add it here. If not, it would just be padding: 0px. Lastly, you would add in the fancypost's base details here. Backgrounds, borders, etc.


    Here is an example of the first:


    [fancypost bgcolor=white; border: none; opacity: 0.75; width: 400px; height: 30px; border-radius: 5px; color: black; font-size: 11pt;][sup][fancypost bgcolor=grey; border: 1px solid white; width: 200px; height: 250px; padding: 10px; overflow: hidden;][/fancypost]


    FANCYPOST 2 would go right next to fancypost 1. Remember not to end fancypost 1 with [/fancypost] just yet! In this fancypost, you would include the same width and height as the first fancypost. You would include the default overflow: auto code within here. You would have no padding ( padding: 0px; ), but you must have a padding-right of 17px. The only exception is if your first fancypost had padding. If it did, you would only have to add 17 to the amount of padding your first fancypost had and use that new number as your padding right. I.E: my fancypost 1 had a padding of 10px, so I would add 17 to get 27. My padding-right would be 27, not 17. You would have the background, border, etc set to none since the first fancypost already covered it.


    Here is an example of the second fancypost, ADDED to the first fancypost. I bolded the second fancypost code example


    [fancypost bgcolor=white; border: none; opacity: 0.75; width: 400px; height: 50px; border-radius: 5px; color: black; font-size: 11pt;][sup][fancypost bgcolor=grey; border: 1px solid white; width: 200px; height: 250px; padding: 10px; overflow: hidden;][[b]fancypost bgcolor=; border: 0px; width: 200px; height: 250px; padding-right: 27px; overflow: auto;]
    [/fancypost]


    FANCYPOST 3 is very important to correctly establish invisible scrolling. This will -- again -- be directly after the second fancypost. The width and height will be the same numbers as the previous 2 fancyposts, BUT instead of using the default height: #px, you will use min-height: #px (So if my height was 250px, I would use min-height: 250px instead of height: 250px; ). This fancypost will have no padding or overflow code in it ( after some error and trial again, I found out that you should/must have the padding: 0px; code in it ). It will, however, be where you can customize other features of your text and the such (color, font, line-height, etc etc). Inside of this fancypost will be where your text resides in. After this fancypost, you can end all of the fancyposts by using [/fancypost] three times (^:


    Here's an example of the ending code. I bolded the third fancypost code example for easier navigation xx


    [fancypost bgcolor=white; border: none; opacity: 0.75; width: 400px; height: 100px; border-radius: 5px; color: black; font-size: 11pt;][sup][fancypost bgcolor=grey; border: 1px solid white; width: 200px; height: 250px; padding: 10px; overflow: hidden;][fancypost bgcolor=; border: 0px; width: 200px; height: 250px; padding-right: 27px; overflow: auto;][[b]fancypost bgcolor=; border: 0px; width: 200px; min-height: 250px; padding: 0px; color: white; font-family: georgia; font-size: 9pt; line-height: 95%; text-align: justify;]TEXT HERE![/fancypost][/fancypost][/fancypost][/fancypost]


    Annnd this is the final product for the example fancypost!


    [fancypost bgcolor=grey; border: 1px solid white; width: 200px; height: 250px; padding: 10px; overflow: hidden;][fancypost bgcolor=; border: 0px; width: 200px; height: 250px; padding: 0px; padding-right: 27px; overflow: auto;][fancypost bgcolor=; border: 0px; width: 200px; min-height: 250px; color: white; font-family: georgia; font-size: 9pt; line-height: 95%; text-align: justify; padding: 0px;]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.[/fancypost][/fancypost][/fancypost]


    Is there anything unclear or the sort? I can walk you through the steps if you want as well xd
    [/fancypost]

    The post was edited 1 time, last by axxie . ().

  • Thank you SO much! This really cleared up a lot of my confusion and I now understand how it works. Thanks for helping me. I would be completely fine with paying you in silver if you wanted me to. If it's more than I have on this account, I can pay with my main.

  • [justify][fancypost bgcolor=; border: 0px; width: 400px; color: black; font-family: georgia; font-size: 9pt; line-height: 95%;]It's no problem! I'm glad I could help ^^ ( although I realized that I should have done bullet points so it would be easier to navigate ahah.. oops )


    And it's completely fine, I don't have much use for silver so there's no need to pay me (^: thanks for offering anyways!
    [/fancypost]