Iframe scrollbar color script & new pages

[Andrew]

I'm using this script to color the scrollbars of an iframe which contains a .txt file:

<script language="JScript">
<!--
window.onload = ifr;
function ifr()
{
	if (!document.fireEvent) return;
	var a = document.frames['miframe'].document.body;
	a.style.scrollbarArrowColor='white';
	a.style.scrollbarBaseColor='black';
	a.style.scrollbarDarkShadowColor='#3F3F3F';
	a.style.scrollbarTrackColor='black';
	a.style.scrollbarFaceColor='black';
	a.style.scrollbarShadowColor='#3F3F3F';
	a.style.scrollbarHighlightColor='#3F3F3F';
	a.style.scrollbar3dLightColor='black';
}
//-->
</script>

It works as expected when the page loads but if a link is used to open a different .txt file in the iframe it reverts to the default scrollbar colors. Is it possible to somehow combine a call to the script with the link that's targeted to the iframe - or perhaps there's some other way to do it..?

[jscheuer1]

Let's say you have a link:

<a href="some.txt" target="miframe">Some Text</a>

You could:

<a href="some.txt" target="miframe" onmouseup="ifr();">Some Text</a>

But that might have problems if the text file doesn't load fast enough into the iframe. It might work fine locally, but probably not on a slow live connection.

Here's something that would probably work out though:

<script language="JScript">
<!--
window.onload = function(){
ifr();
if (window.attachEvent)
document.getElementsByName('miframe')[0].attachEvent('onload', ifr);
}
var ifr = function()
{
	if (!document.fireEvent) return;
	var a = document.frames['miframe'].document.body;
	a.style.scrollbarArrowColor='white';
	a.style.scrollbarBaseColor='black';
	a.style.scrollbarDarkShadowColor='#3F3F3F';
	a.style.scrollbarTrackColor='black';
	a.style.scrollbarFaceColor='black';
	a.style.scrollbarShadowColor='#3F3F3F';
	a.style.scrollbarHighlightColor='#3F3F3F';
	a.style.scrollbar3dLightColor='black';
}
//-->
</script>

[Andrew]

Perfect, thanks a lot, John.

[big-dog1965]

how would you make Johns script work if you have 2 iframes on the page

<script language="JScript">
<!--
window.onload = function(){
ifr();
if (window.attachEvent)
document.getElementsByName('miframe')[0].attachEvent('onload', ifr);
}
var ifr = function()
{
if (!document.fireEvent) return;
var a = document.frames['miframe'].document.body;
a.style.scrollbarArrowColor='white';
a.style.scrollbarBaseColor='black';
a.style.scrollbarDarkShadowColor='#3F3F3F';
a.style.scrollbarTrackColor='black';
a.style.scrollbarFaceColor='black';
a.style.scrollbarShadowColor='#3F3F3F';
a.style.scrollbarHighlightColor='#3F3F3F';
a.style.scrollbar3dLightColor='black';
}
//-->
</script>[/CODE]

[jscheuer1]

how would you make Johns script work if you have 2 iframes on the page

Well, that script actually had a few problems with it, but would still work. Here is a cleaned up version that should work out with two iframes (untested):

<script type="text/javascript">

window.onload = function(){
if (!window.attachEvent)
return;
ifr();
document.getElementsByName('miframe')[0].attachEvent('onload', ifr);
document.getElementsByName('mi_other_frame')[0].attachEvent('onload', ifr);
}
var ifr = function()
{
	if (!document.fireEvent)
	return;
	var a = {
	a:document.frames['miframe'].document.body,
	b:document.frames['mi_other_frame'].document.body
	};
	for (var i in a){
	a[i].style.scrollbarArrowColor='white';
	a[i].style.scrollbarBaseColor='black';
	a[i].style.scrollbarDarkShadowColor='#3F3F3F';
	a[i].style.scrollbarTrackColor='black';
	a[i].style.scrollbarFaceColor='black';
	a[i].style.scrollbarShadowColor='#3F3F3F';
	a[i].style.scrollbarHighlightColor='#3F3F3F';
	a[i].style.scrollbar3dLightColor='black';
	}
}

</script>

[big-dog1965]

Thanks it seems to work just fine

[jscheuer1]

Well, there still is a minor problem, documents in an iframe cannot have a DOCTYPE which triggers compliance mode. With this version, that problem is taken care of, and I cleaned things up a bit more code wise:

<script type="text/javascript">

window.onload = function(){
if (!window.attachEvent||!document.fireEvent)
return;
ifr();
var iframeElements = {
a:document.getElementsByName('miframe')[0],
b:document.getElementsByName('mi_other_frame')[0]
};
for (var i in iframeElements)
iframeElements[i].attachEvent('onload', ifr);
}
var ifr = function(){
var iecompattest = function(docObj){
return docObj.compatMode && docObj.compatMode!="BackCompat"? docObj.body.parentNode : docObj.body;
}
	var iframeDocs = {
	a:iecompattest(document.frames['miframe'].document),
	b:iecompattest(document.frames['mi_other_frame'].document)
	};
	for (var i in iframeDocs){
		with (iframeDocs[i].style){
			scrollbarArrowColor='white';
			scrollbarBaseColor='black';
			scrollbarDarkShadowColor='#3F3F3F';
			scrollbarTrackColor='black';
			scrollbarFaceColor='black';
			scrollbarShadowColor='#3F3F3F';
			scrollbarHighlightColor='#3F3F3F';
			scrollbar3dLightColor='black';
		}
	}
}

</script>

[big-dog1965]

Ok that works to
THANKS
Checkout my post about a photo gallery I tried it from the site and dont work.