Log In · Register

 
Scroll Bar?, A transparent scroll bar?
Lightner
post Jun 9 2005, 02:55 PM
Post #1


Im Gavin HI!!
*****

Group: Member
Posts: 802
Joined: Mar 2005
Member No: 111,644



anyone got any clue how to make a scroll bar thats invisible on the computer but it will scroll and i should be able to adjust its height and width? im sure if i spent time with div i could easily figure out how to input a scroll bar but i dont have time cause im leaving soon so help plz lol im sure u all know 0_o tell me ur secret
 
 
Start new topic
Replies
Eryi
post Jun 9 2005, 03:21 PM
Post #2


Senior Member
*******

Group: Official Designer
Posts: 4,591
Joined: Dec 2004
Member No: 77,305



I got this from Celestial Star. Not sure if it'll work though.
QUOTE
This should be pretty simple: we apply a color that is NOT contained anywhere in our layout (let's say for example, very bright green or magenta color) to the tags of the scrollbar we want to make transparent, and then we make that color transparent.

This effect only applies on certain browsers, like Internet Explorer 5.5 and superior. Scrollbars can't be even coloured in Netscape, so make sure you would view it properly before starting with this tutorial.

Let's consider you want all the scrollbar to be transparent except from the border and arrows. You write on your CSS:
body { scrollbar-track-color: #FF00FF; scrollbar-face-color: #FF00FF; scrollbar-highlight-color: #FF00FF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FF00FF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color:#FFFFFF; }

Let's take a look at this bit of code:
All those are the different tags that define the scrollbar colours. I used two colors: #FF00FF (bright magenta) and #FFFFFF (white). The magenta color will be made transparent, and white will remain visible.

Now, to make the magenta color transparent we add this bit of code in the body css tag:
filter: chroma(#FF00FF); height: 0px;

The chroma filter makes that certain color between the brackets transparent, but we need to define the height so that the filter works.
This is slightly different in iframes, because the height is already defined, and instead of putting the filter code in the body tag, we put it on the iframe directly, like this:
<iframe src="frame.htm" height="400" width="400" name="frame" style="filter: chroma(#FF00FF);"></iframe>
 

Posts in this topic
Lightner   Scroll Bar?   Jun 9 2005, 02:55 PM
Szeh   I got this from Celestial Star. Not sure if it...   Jun 9 2005, 03:21 PM
Lightner   what?!?! thats confusing..... i just need ...   Jun 9 2005, 03:27 PM
Szeh   Maybe somebody can translate that for you then.   Jun 9 2005, 03:43 PM
Lightner   ya ^_^ im dum   Jun 9 2005, 03:44 PM
fishcake-y   I find this to be a lot simplier to understand. [ ...   Jun 9 2005, 06:17 PM


Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: