Jump to content
xisto Community
Sign in to follow this  
melancholy

Transparent Scrollbars Coding Transparent Scrollbars

Recommended Posts

Why woud someone want a Transparent scrollbars you ask? Well fist of they do not cover too much of the image like the normal scrollbars.You can use transparent scrollbars for different kinds of web layouts such as popups, iframes, or scrolling div layers. For iframes, make sure you've inserted a background image for the table cell containing the iframe. You do not need to do that for scrolling div layers. Although, you cannot make the main scrollbar transparent unless you make it appear that way by selecting the same color for everything.After you code the scrollbar colors, insert this code in the iframe or div layer tags. Replace transparent color with the color that will be transparent:allowtransparency="true" style="filter: chroma(color=#transparent color)"Allowtransparency="true" allows the background of your iframe page to be transparent. If you already defined a background image for your iframe page, you only need style="filter: chroma(color=#transparent color)".It should look something like this:Iframes: <iframe name="main" src="frame source" width=### height=### framespacing="0" frameborder="0" allowtransparency="true" style="filter: chroma(color=#transparent color)"></iframe>Div Layers: <div id="iframe" style="position: absolute; top: ###px; left: ###px; width: ###px; height: ###px; overflow: auto; filter: chroma(color=#transparent color)" allowtransparency="true"></div>Here is an example. See the scrollbar in the iframe? It is transparent!Do some experimenting for different effects with transparent scrollbars!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.