Transparent Iframe Scrollbars ( For Internet Explorer )

[Kushika 0]

Requirements

Internet Explorer

IFrames on your site

Perhaps a little basic HTML knowledge

 

Adding Iframes

What are Iframes?

Iframes is like an 'area' on a webpage where an external page is displaid. In other words it's where a webpage is show up in another page.

 

How do I create an Iframe on my site?

Step 1

Create two files named page1.htm and frame.htm. You can use Notepad (on Windows) to do this.

 

Step 2

Open up page1.htm, and add the following HTML code:

Here is an Iframe: <be /><!-- IFRAME CODE begin --><iframe src="frame.htm" width="NUMBER" height="NUMBER" frameborder="0" /><!-- IFRAME CODE end-->

Edit 'NUMBER' with whatever number you like. This specifies how big the Iframe should be. Save the file.

 

Step 3

Open up frame.htm and add a whole blob of text. Whatever you like -- it's just a test.

 

Then just open up page1.htm and you should see the content from frame.htm appear on the page. Save the file.

 

 

Transparent Iframe Scrollbars

This code only works with Iframes when viewed with Internet Explorer.

 

Step 1

You add the code to the page that is in the iframe, in other words, frame.htm. Delete everything in frame.htm, and just add the following code:

 

<div style="position:absolute; left:0px; top:0px; width:NUMBER px; height:NUMBER px; z-index:1;overflow: auto; FILTER:chroma(color= COLOR); overflow: auto;scrollbar-base-color:COLOR;scrollbar-track-color:COLOR;scrollbar-3dlight-color:COLOR;scrollbar-darkshadow-color:COLOR;scrollbar-shadow-color:COLOR;scrollbar-highlight-color:COLOR;scrollbar-arrow-color:COLOR;">THE MAIN STUFF GOES HERE.</div>

Step 2

Firstly, add in the width and height of teh Iframe at the very top where it says 'NUMBER'. Width and height has to be the same as it is for the Iframe in page.htm -- otherwise it won't work.

 

For Chroma(color=COLOR) put in the color you want to be invisible. For example, if you set this to green, you will need to set the base color, the track color, and everything that you want transparent green. You can leave the arrow bars a different color so that they will show up.

 

Step 3

Save teh files and open them up in Internet Explorer. They should now be transparent if you followed the tutorial carefully.

Edited March 4, 2006 by miCRoSCoPiC^eaRthLinG (see edit history)

[KDEWolf 0]

Whoa, never thought Chroma filter would work for the scrollbars as well... A long time ago, when I did use to create html pages using pure notepad, the day I saw the scrollbar coloring trick was memorable, since I've always been more into graphics than anything else, and from then on they could be stylize from that awful-looking gray bar. But I never ever thought of combining these two at same time... Was this your discovery?

 

One can accomplish neat visual effects by using that, like showing just arrows and the scrolling bar itself. I suppose this trick works in non-framed pages as well, right? Also, does this works fine with background images (fixed or not)?

 

(consider the following only in case this works fine in non-framed pages as well)

I think you could have named this just 'Transparent Scrollbars on IE' or something similar, since this tutorial is pretty useful to any page viewed in IE, independently of frames or not. The way it is named and structured right now may make this article be overlooked by many people who simply don't use or link iframes or even frames (and imagine that there are a lot of people who hate them, like me =p). All this is just a suggestion to maybe bring more people to the topic, don't get me wrong, ok?

[iGuest 3]

Scrollbars in an iframe

Transparent Iframe Scrollbars ( For Internet Explorer )

 

Replying to Kushika

Hi

Fine with the directions above. But, how does it work if the page to be in the iframe is an external url? I have few pages, which show the originators' website in an iframe, because I want the visitor to remain 'with me', at my site. He can therefore exit the visited website and continue with whatever next option he wants on my website. As the external pages are very often of different sizes, I have no option but to provide both horizontal and vertical scroll. If I have the following code in the first page, into which I import the external url, the scrollbar colour changes.

 

<!--<style type="text/css">

Body {scrollbar-3dlight-color:#ffd700;

scrollbar-arrow-color:#ff0;

scrollbar-base-color:0000a0;

scrollbar-darkshadow-color:ffa500;

scrollbar-face-color:#339966;

scrollbar-highlight-color:#ccFFFF;

scrollbar-shadow-color:#f0f}

</style>

 

When I put this code into a css file and call it 'html', as suggested semewhere, I get the coloured scrollbar, on the original page, NOT the iframe, which remains in its default colour.

 

I have tried all sorts of names, but none work. Would you by any chance have the solution to my problem, please?

 

With thanks and regards

Karl hevera, London

 

-reply by karl

[gsupport 0]

good

[FirefoxRocks 0]

Please note that this method of applying CSS is non-standard and therefore will not validate.Personally, I don't think that Internet Explorer should allow this because I think that it is wrong for the author (designer/developer) to be able to change the appearance of user interface components. Sure it may only be a scrollbar but I still think that it is weird.In fact, I think that this property only works in IE8's quirks mode, so it is not a good idea to use this because Firefox, Flock, Safari, Google Chrome, IE 8 Standards (I think) will not apply it.

[wutske 0]

Using iframes is a somewhat outdated method to embed external pagines in your website. XHTML 1.0 strict doesn't even support iframes anymore, so it's suggested not to use them any longer. Using non-valid css isn't advised too, it'll only work in IE and your website will look ulgy or even totaly messed up when viewing in other browsers like firefox, opera, safari ...