Welcome to Gaia! :: [GUIDE] Hidden Scrollbars | Forum

Register FaceBook Login Login

 

 
GST

Welcome to Gaia's forums, where millions of members gather to discuss random stuff, make new friends,
complain about life, argue about nothing, laugh at dumb pictures, discuss serious issues and/or curse like sailors.

Lurking is creepy. Quit skulking in the shadows and join the conversation!

Register to reply

Advertisement
Share:  
forum:170, topic:43863509
1 2 3 ... 16 17 18 >
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:

http://tinyurl.com/6bxrff
 
     
 










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.
 
 
 
 
     
 
 
Kaori-San3
Does this work for FF and Safari?

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


    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
     
     






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




 
     


iluBoxyTaintyShiniFECariKazue+more!
 
     
 
 
 
 
Kayley FC
Kaori-San3
Does this work for FF and Safari?

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


    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


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.


    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


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
 
     
 
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)
     
http://tinyurl.com/yjogj9q
tweet tweet
lolcrush

http://tinyurl.com/ygtr26y
Great Guide. <3. Finally someone clears up the scrollbar issues
 
     
 
     
 
 
 
 
Graceful 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.
 
     
 

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... .__.





我愛東方神起
     
Mule account.

Real account: Luffle Duffle
 
     
 
 
 
Tsuki Le Strange

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?
 
 
 
 
     
 

- - - - -
Doodle Avatar Artz? Plzkthx?
- - - - -

Galux is not happy her B.O.O skin shall be permanently poofed.
Therefore, she is not changing her avatar. So there.
 
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)
     
http://th06.deviantart.net/fs44/150/f/2009/118/f/4/f49025bea2add708d9728ba7b2c00a90.png

Working on new shop...

-- For without art, there would be nothing --
-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

 
     
Click the "x" to visit my guide on coding v2/Current profiles!
[x]

Note: I've canceled trades with artists who have not contacted me in the last six months! Just PM me if you want me to reinstate the trade.
1 2 3 ... 16 17 18 >

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

We will be phasing out support for your browser soon.

Please upgrade to one of these more modern browsers.