Transparent Scrollbars - Coding Transparent Scrollbars

free web hosting
Free Web Hosting, No Ads > CONTRIBUTE > Tutorials

Transparent Scrollbars - Coding Transparent Scrollbars

melancholy
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!

 

 

 


Reply

Saint_Michael
wheres the example a link maybe would help out

Reply

NeXDesigns
seems like a useful tutorial but i want to see an example for it before i even go to try this. also what browsers does it work on? ie, firefox, netscape, etc.

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. transparent div scrollbar - 6.86 hr back. (1)
  2. neopets css make your scrollbar transparent - 10.81 hr back. (1)
  3. html transparent scrollbar - 16.39 hr back. (1)
  4. create transparent scrollbar - 17.76 hr back. (1)
  5. neopet module vertical css - 21.09 hr back. (2)
  6. make your scrollbar transparent - 25.48 hr back. (1)
  7. transparent scrollbar in firefox - 25.95 hr back. (1)
  8. transparent scrollbar - 1.46 hr back. (5)
  9. transparent scrollbar code - 9.00 hr back. (2)
  10. transparent scrollbars - 39.70 hr back. (1)
  11. download free transparent scroll bars - 47.30 hr back. (1)
  12. css scrollbar transparent div - 53.67 hr back. (1)
  13. "transparent scrollbars" - 59.19 hr back. (1)
  14. using images to make scrollbars - 70.88 hr back. (1)
Similar Topics

Keywords : transparent, scrollbars, coding, transparent, scrollbars

  1. Nice Clean Php Layout Coding.
    Learn a nice neat way to code your layouts with php (7)
  2. Make A Transparent Picture
    (4)
    Ok. I'm gonna use a free program called paint.NET. It's a really good program to use. This
    can be done with other *expensive* programs, but if you wanna make your own and don't have paint
    shop pro or anything like that then I recommend using this! Link to download paint.NET: click
    this link If you play neopets or anything this a cool thing! So you can use it for your
    userlookup, your shop, gallery etc... Ok...so enough about that. Let's start! /tongue.gif"
    style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" /> 1. FIND ....
  3. Image Gallery Tutorial Using Hoverbox
    A php solution to coding the Hoverbox Image Gallery (14)
    As reported in another posting , there is an Image Gallery named Hoverbox from the Sonspring site
    which is a pretty cool display method using CSS to have Thumbnail pictures double their size by
    hovering over them. I liked the css included in the original Tutorial as found on the Sonspring
    site , but I knew there was more than one use for the Hoverbox and took it upon myself to explore
    the use of the Hoverbox on a site I webmaster. One thing that wasn't right was having to
    hardcode the image tags, so the first version I wrote used php to fill the Hoverbox by rea....
  4. Php Installed Modules Dynamic Reference Tool
    An effective tool for coding in PHP (4)
    PHP Installed Modules Dynamic Reference Tool A dynamic tool for referencing PHP modules and
    their associated routines, which are installed on your web-server. **Note: Uses only 2 functions
    built-in to PHPs core and should be easy to convert to a later version of PHP. This current version
    uses PHP4. Example: PHP Installed Modules Dynamic Reference Tool Abstract : As a PHP
    Developer, it is nice to know what functionality is available to you, and what you would have to
    implement yourself. Some of this functionality is provided for you by the PHP core,....

    1. Looking for transparent, scrollbars, coding, transparent, scrollbars

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for transparent, scrollbars, coding, transparent, scrollbars

*MORE FROM TRAP17.COM*
advertisement



Transparent Scrollbars - Coding Transparent Scrollbars



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE