Welcome to Gaia! ::


IF YOU ARE ASKING FOR HELP, IT WOULD BE USEFUL IF YOU MADE SURE YOUR PROFILE WAS PUBLIC. OTHERWISE WE CAN'T ASSIST YOU BECAUSE WE DON'T KNOW WHAT YOU'RE DOING OR WHAT COULD BE CAUSING THE PROBLEM.

(lolol capslock ftw)

HIDDEN SCROLLBARS

I see so many people trying to achieve this effect; most of the time they either don't get it at all or they do it in a way that messes a bunch of stuff on the page up (like when you try to scroll down the page it scrolls only that section). This guide will explain how to make your scrollbars not visible.

Example: comments section here...
http://www.gaiaonline.com/profiles/?u=5498755

Doing this involves the padding-right property. However, if you want to do it most efficiently, you need more than that.

This is kind of advanced coding I guess.

LIST OF SELECTORS AND THEIR COUNTERPARTS ON OLD SCHOOL/CLASSIC
key: selector + selector2
#comments + #comments dl
#about + #about ol or #about ul
#friends + #friendGroup
#wishlist + #wishlist .items
#journal + #entries


LIST OF SELECTORS AND THEIR COUNTERPARTS ON V2/CURRENTkey: selector + selector2
#id_comments + #id_comments dl
#id_about + #id_about ol or #id_about ul
#id_friends + #id_friends .style1
#id_journal + #entries
#id_badges + #badges
#id_custom_#### + #id_custom_#### ol or #id_custom_#### ul
(for custom sections, the #### at the end should actually be numbers. visit my other guide to learn about finding custom section selectors)
(for custom sections, you need list tags like you would with an #about ol or #about ul (explained below))

BASE CODE
This is a base code for a hidden scrollbar:
selector{overflow: auto; overflow-x: hidden; overflow-y: hidden; height: ##px;}
selector2{overflow-y: auto; padding-right: 500px; height: ##px; width: ##px;}


PARTS EXPLAINED
selector = the selector for the section, as specified above in the "SELECTORS AND THEIR COUNTERPARTS" section.
height/width = just add how high or wide you want that specific section to be. The second selector should be smaller than the first, because it is fitting inside of the first selector. You can see sample values in the example below.
selector2 = On the "SELECTORS AND THEIR COUNTERPARTS" list, these are the counterparts. So if you used #friends as your selector, you would use #friendGroup as selector2.

EXAMPLE CODE
Here is an example of it in use:
#id_comments{overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 200px;}
#id_comments dl{overflow-y: auto; padding-right: 500px; height: 125px; width: 475px;}

This code is the exact code on the profile here.

ABOUT OL/UL
You do not automatically have an #about ol/#about ul or #id_about ol/#id_about ul. You have to format your about section a certain way to have one.

NOTE: I recommend using #about ol and #id_about ol, because the ul will affect the #about .links as well. However, if you choose ul, or need to use both, you can fix any problems by applying direct properties to #about .links that reverse any changes caused by #about ul.

For example, if your About looks like this:

[list=1]haha this is my about.
isn't that cooooool.
i'm me.
sup.[/list]


Then everything in the [list=1][/list] codes is your #about ol or #id_about ol. If you want to make a hidden scrollbar like this guide explains, then your entire about should be in those list tags.

If your About looks like this:

[list]haha this is my about.
isn't that cooooool.
i'm me.
sup.[/list]


Then everything in the [list][/list] codes is your #about ul or #id_about ul. If you want to make a hidden scrollbar like this guide explains, then your entire about should be in those list tags.

#about ul can be helpful if you have #about ol custom sections, but still want a hidden scrollbar about section. You can also use it by itself if you just like it better than ols.

CONCLUSION

Yeah. So this is my guide. It's kind of rushed because I have homework, but lots of people have been asking question, so hopefully I think this might help them.

Feel free to reply to this thread with questions or bumps (but only bump if the thread has fallen off the first page of the Profile Discussion forum). I will try to answer questions, although please don't be offended if I don't answer. My life can be hectic at times and I don't always have time to answer; it is nothing against you personally. I also don't respond to "thank you" posts usually, although I appreciate them greatly so feel free to post them if you enjoyed my guide. 3nodding

If you want to learn more about coding, you can visit my V2/Current profile coding guide:

User Image - Blocked by "Display Image" Settings. Click to show.
User Image









thanxs for the guide.
i hope it'll lessen the amount of "hidden scrollbar" topics.
Does this work for FF and Safari?

I tried it, but it didn't seem to work. User Image
Kaori-San3
Does this work for FF and Safari?

I tried it, but it didn't seem to work. User Image


    It works for sure in FF, and it should work in Safari. Can I see what code you are trying to use?

    @ Arjano ~ I do too. 3nodding
    User Image

5,450 Points
  • Signature Look 250
  • Hygienic 200
  • Entrepreneur 150



User Image


Thanks Kayley! 8DD
I've been looking for something like this. I was so confused. XD




Kayley FC
Kaori-San3
Does this work for FF and Safari?

I tried it, but it didn't seem to work. User Image


    It works for sure in FF, and it should work in Safari. Can I see what code you are trying to use?

    @ Arjano ~ I do too. 3nodding
    User Image


For the getting the scroll bar, I used fr34x0r's guide to help me.
But I added the part where you put #about ul{overflow: auto; overflow-x: hidden; overflow-y: hidden; height: ##px;}
Kaori-San3
Kayley FC
Kaori-San3
Does this work for FF and Safari?

I tried it, but it didn't seem to work. User Image


    It works for sure in FF, and it should work in Safari. Can I see what code you are trying to use?

    @ Arjano ~ I do too. 3nodding
    User Image


For the getting the scroll bar, I used fr34x0r's guide to help me.
But I added the part where you put #about ul{overflow: auto; overflow-x: hidden; overflow-y: hidden; height: ##px;}


    Did you change the ## to a value for the height, and use list tags in your About section? It might help if you turned your profile to public so I could see exactly how you did it.

    This coding requires a lot of synchronization which is why I said it was kind of advanced. There are a lot of parts of it that have to be correct and fit together in order for the whole code to work. The ## on height needs to be an actual value, not just a ##. ## stands for number. Like in my example the height for #id_comments dl is 125px.

    @ Moonie ~ I'm glad that you find it to be helpful. 3nodding
    User Image
Kayley ilu for making this guide.
So many people do hidden scrollbars grossly and I've grown to hate them ;-; (hidden scrollbars, not the people)
Great Guide. <3. Finally someone clears up the scrollbar issues

Lonely Phantom

7,300 Points
  • Somebody Likes You 100
  • Happy Birthday! 100
  • Generous 100
User ImageGraceful Assassin~

=D

When I was out this weekend I was just thinking - "Someone needs to make a hidden scrollbar tutorial". Thankyew Kayley~

[ ninja If you wanted to include it - custom panels in v2's work the same way about panels do, with regard to the hidden scrollbars. Don't know if it's a piece of knowledge in high demand, but I know I use it a bunch... sweatdrop ]
Too Epic for the second page.
User Image
X___TEHH CREAMIEE` SAYSS



i'm not sure why, but i'm still having problems. now the boxes have no scrollbars and don't scroll at all. i'm very confused... .__.





我愛東方神起

Lonely Phantom

7,300 Points
  • Somebody Likes You 100
  • Happy Birthday! 100
  • Generous 100
Tsuki Le Strange
User Image
X___TEHH CREAMIEE` SAYSS



i'm not sure why, but i'm still having problems. now the boxes have no scrollbars and don't scroll at all. i'm very confused... .__.





我愛東方神起


Did you put all of your about section text in the [list=1] [/list] tags?

Familiar Explorer

thanks for the guide

also if you have the about section like this

lots of text here
[list] more text here for custom section[/list]


i need the 'hidden' scroll for the first section. and in your codings above, you have the section2 as the ol. do i have to make my whole about section in a nested list? to make this work, or is there another way?

-edit- I've been playing with it and finding that i can't get the right thing to work. (i'm probably missing something due to my headache making things swirl around but I'm still confused)
-l Tootlez l-
thanks for the guide

also if you have the about section like this

lots of text here
[list] more text here for custom section[/list]


i need the 'hidden' scroll for the first section. and in your codings above, you have the section2 as the ol. do i have to make my whole about section in a nested list? to make this work, or is there another way?

-edit- I've been playing with it and finding that i can't get the right thing to work. (i'm probably missing something due to my headache making things swirl around but I'm still confused)


    For something like this, I would utilize both the ol and ul.

    Put the scrolling section in the custom section list tags, and put the non-scrolling section in the regular about.

    This is how I set up the About section:


    About section.
    This is the about section.

    [list=1][list]About ol.
    This is the about ol.

    a bunch of lorem[/list][/list]



    Then, in your coding, you would utilize both lists.

    Like this:
    #about ol{overflow: auto; overflow-x: hidden; overflow-y: hidden; height:200px;}
    #about ol ul{overflow-y: auto; padding-right: 500px; height: 180px; width: 400px;}


    You can see those codes on this profile:
    http://www.gaiaonline.com/profiles/5981867

    User Image

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum
//
//

Join Now

// //

Have an account? Login Now!

//
//