[GUIDE] Hidden Scrollbars

[digimule]

[ » . . . (. '-')./* ]

» kayley; oou, thanks so much for making this guide! >3<;; It helped a lot; I wanted to do this originally but didn't find any guides, so I didn't think I was going to make hidden scrollbars until I stumbled across your topic~ <33

[ » - - d i g i . s p e c t r e - - « ]

[P h u n k e d]

Kayleeyyy!
Thank you!
Yet again you do something awesome for everyone.

How would you go about doing hidden scroll bars for custom sections? smile
Just asking, its not necessary.

[Elegant Death]

Ok, if you have time Kayley I'm really having some issues with building my hidden scroll bars for my about section. I'm not sure what I'm doing wrong since I was able to code the scroll bars my comments just fine. I guess it's because I have multiple custom sections. >.>

Anyway here's the problem: I got the basic code and input my numbers then added the other stuff I needed for my sections. When I checked it my profile the about section's scroll bar was gone and the text was cut off. Also one of my custom sections has been mutilated and the other has just disappeared all together. I was kind of confused about the part where it said to put all of my about section content in my list tags, since I have multiple ones I didn't know which ones to put them in. All I wanted it to do was add a hidden scroll bar to my main about section.

If you could please help me with my problem when you have time I would really appreciate it, thank you! heart

Don't worry about my previous massive wall of text. I seem to have figured out the problem on my own after some more tinkering. ^^; I should have kept going rather then giving up so easily. This guide has been really helpful though! I truly appreciate it. heart

[Milady Phoenix]

Does a hidden scrollbar allow a section to scroll without affecting the content?
A regular scroll bar forces my badges box to only display two columns of badges, rather than three.

I'd like to have a scrollbar so I can make that section shorter vertically.

P.S. I know the first selector is #id_badges, but whats the second?
I can't find it going through the source code, probably because I don't know what I'm looking for.
sweatdrop

P.P.S. Incidentally, its only in IE that I get three columns of badges (and two rows of friends)... FF displays two columns of badges and three rows of friends. Is there a way to code it so it looks the same in both browsers? I'd like my friends with FF to see what I see in IE.

Thanks 3nodding

Edit: Argh, I seem to have broken something... In one of my browsers, the "Sign Out" link in the Gaia header wraps to a second row. The other browser does not do this. How do I fix it so its all back up in the header where it belongs?

[ROBO-Type]

I have to say Kayley it was THIS one post that helped me out the most.

Kayley FC

The overflow-y: hidden; is what is causing it not to scroll.

My method of hidden scrolls involve having a bigger section contain a smaller section, then pushing the smaller section's scrollbar behind the bigger section so that it can't be seen. To do this, I disable all overflows on the bigger section, but enable the y overflow on the smaller section.

The problem with your code is that you have only the bigger section coded, and since the scrollbar isn't enabled it wouldn't scroll.

If you are applying it to a custom section, you could do something similar to this:

[list=1][list]Links section here[/list][/list]

And the coding:
#about ol{overflow: auto; overflow-x: hidden; overflow-y: hidden; height: ##px;}
#about ol ul{overflow-y: auto; padding-right: 500px; height: ##px; width: ##px;}

It was the unnoticeable [ul] tags in the highlighted coding there, that kept giving me problems. Xp
If I hadn't noticed it, I would have died from frustration.

[Profilist Pal]

Yay. [:

[Flawe]

It's (Lux).

I'm super struggeling with this. x_x

I'm trying to make my about me with an invisible scroll-bar, but it dosen't seem to be working. (a.k.a. I have screwed up the coding..)

This is whats in my theme override..

#about {overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 320px;}
#about ol{overflow-y: auto; padding-right: 5000px; height: 400px; width: 300px;}

[KayleyV2]

Lady Phoenix Fire

Does a hidden scrollbar allow a section to scroll without affecting the content?
A regular scroll bar forces my badges box to only display two columns of badges, rather than three.

I'd like to have a scrollbar so I can make that section shorter vertically.

P.S. I know the first selector is #id_badges, but whats the second?
I can't find it going through the source code, probably because I don't know what I'm looking for.
sweatdrop

P.P.S. Incidentally, its only in IE that I get three columns of badges (and two rows of friends)... FF displays two columns of badges and three rows of friends. Is there a way to code it so it looks the same in both browsers? I'd like my friends with FF to see what I see in IE.

Thanks 3nodding

Edit: Argh, I seem to have broken something... In one of my browsers, the "Sign Out" link in the Gaia header wraps to a second row. The other browser does not do this. How do I fix it so its all back up in the header where it belongs?

The second ID would be #badges. I'll add that to the front page.

To make the panel display more badges, just increase the width of #id_badges and the width of the column holding the badges (which is explained in my v2 guide).

Sorry for taking so long to answer!

Luxie, if you still need help, I can assist you if you reupload your about within the next couple of weeks.

EDIT: Lux, I've noticed one thing in your code. It would work better if the first selector (#about) had a bigger height than the second selector (#about ol). However, I don't think that would cause it to entirely not work. There might be something else in your code that is causing a problem, so if you reupload your code for me to mess around with, I could see if there is something else obstructing that section.

[Milady Phoenix]

Patience is a virtue. ^.^

Thank you for your help Kayley.

[Speciest]

Ok so i used the following code to get my friends box scrollbar to dissapear.

#id_friends{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 400px;}
#id_friends .style1{overflow-y: auto; padding-right: 93px; height: 400px; width: 93px;}

it makes the scrollbar dissapear but it also makes the right border of my friends box dissapear. Same thing goes for my comments box. Is there a way around this or am i just S.O.L? xD

[Speciest]

Speciest

Ok so i used the following code to get my friends box scrollbar to dissapear.

it makes the scrollbar dissapear but it also makes the right border of my friends box dissapear. Same thing goes for my comments box. Is there a way around this or am i just S.O.L? xD

god i feel so effing retarded xD. I just reallized EXACTLY what that code does. It only moves it over so the box next to it is overlaping the scrollbar. It doesn't necesarily make it "invisible."

[KayleyV2]

It's good that you have gotten it figured out. 3nodding

Although, technically, it's not the box next to it that overlaps it. It is the parent section that does.

[ll W E i R D - G A S M ll]

Here I Am . . .

Left Staring At You Again . . .

- - - - - - - - - - - - - - - - - - - -

Ello :3
this has infact, helped meh out whee but it seems that i am having issues with teh comments part in meh profile..
i cannot seem to get it right.. >.<"
did i type it wrong or something?

#comments scroll{overflow: auto; overflow-x: hidden; overflow-y: hidden; height:270px;}
#comments dl{overflow-y: auto; padding-right:500px; top:115px; width:215px;}

For The Answers To All Of My Questions . . .

[KayleyV2]

ll W E i R D - G A S M ll

Here I Am . . .

Left Staring At You Again . . .

- - - - - - - - - - - - - - - - - - - -

Ello :3
this has infact, helped meh out whee but it seems that i am having issues with teh comments part in meh profile..
i cannot seem to get it right.. >.<"
did i type it wrong or something?

#comments scroll{overflow: auto; overflow-x: hidden; overflow-y: hidden; height:270px;}
#comments dl{overflow-y: auto; padding-right:500px; top:115px; width:215px;}

For The Answers To All Of My Questions . . .

You have very messy coding, so that is causing a lot of your CSS to not work.

First of all, this is making everything mess up:
body { cursor: url('
http://www.cutestcursors.com/cursors/dinosaurchomp.ani'); }

It needs to be:
body { cursor: url('http://www.cutestcursors.com/cursors/dinosaurchomp.ani'); }

That one break is causing almost all of your codes to not work.

From there, you put "top" instead of "height" in #comments dl, and instead of "#comments" you put "#comments scroll".

If you fix those, your code should work.

You can just copy + paste this into your override if you'd like to:

#content #main, #about, #journal, #friends, #multimedia, #comments, #signature{height: auto;}

#content
{background:url(http://i470.photobucket.com/albums/rr62/elitesamari/012275302.jpg);}


#extendedProfileBody {background:url(http://images.shareapic.net/images2/006108555.jpg);}
#header h1
{ display:none;}
body { cursor: url('http://www.cutestcursors.com/cursors/dinosaurchomp.ani'); }

#content
{background: transparent;}

/*profile*/
#profile {display:none;}

/*Friends*/
#friends {display:none;}

/*Journal*/
#journal {display:none;}

/*Signature*/
#signature {display:none;}

/*Details*/
#details {display:none}

/*Wishlist*/
#wishlist {display:none;}

/*About*/
#about {background: transparent; position:absolute; width:415px; height:600px; left:25px; top:110px; border: none; font-family: Minya Nouvelle; font-size:14px; font-weight: normal; color: #337f2f; overflow:auto; overflow-x: hidden;text-align:center;}
#about {overflow: auto; overflow-x: hidden; overflow-y: hidden; height:600px;}
#about ul{overflow-y: auto; padding-right:500px; top:110px; width:415px;}
#about h2
{display:none;}

#about { cursor: url(http://www.cutestcursors.com/cursors/dinosaurchomp.ani); }

/*Comments*/
#comments {background:transparent; position:absolute; width:215px; height:270px; left:675px; top:115px; border:none; font-family:System; font-size:12px; color: #586684;text-align:center;}
#comments dl dd {font-family:System; font-size:12px; color: #337f2f; margin: 0 0;}
#comments .links {font-family:System; font-size:12px; color: #586684; text-align:center;}
#comments .caption {font-family:System; font-size:13px; color: #337f2f; background:transparent; border:none;}
#comments .caption2 {font-family:System; font-size:13px; color: #586684; background:transparent;border:none;}
#comments .message {font-family:System; font-size:12px; color: #337f2f; background:transparent; text-align:center}
#comments dl dt.avatar img {display:none;}
#comments dl dt.avatar2 img {display: none;}
#comments .caption
{ background:transparent; }
#comments .caption2
{ background:transparent; }
.caption:before,.caption:after,.caption2:before,.caption2:after
{display:none;}
.caption. message,.caption2 .message
{background:none;}
#comments{overflow: auto; overflow-x: hidden; overflow-y: hidden; height:270px;}
#comments dl{overflow-y: auto; padding-right:500px; height:115px; width:215px;}
#comments h2
{display:none; }

#comments { cursor: url('
http://www.cutestcursors.com/cursors/dinosaurchomp.ani'); }

/*Media*/
#multimedia embed {
height: 100px;
width: 120px;
position: absolute;
top: 120px;
left: 240px;
background: transparent;
border:0px;
}
#multimedia h2 {
display:none;
}
#multimedia
{
background: transparent;
no-repeat left bottom;
border: 0px solid #ffffff;
margin-bottom: 10px;
}
#multimedia { width: 180px; height: 160px; }
#multimedia object, #multimedia embed {width: 180px; height: 160px;}
#multimedia { position: absolute; left: -40000px; top: -40000px; }