Jump to content
xisto Community
Sign in to follow this  
Kushika

Transparent Iframe Scrollbars ( For Internet Explorer )

Recommended Posts

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 by miCRoSCoPiC^eaRthLinG (see edit history)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ...

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.