PDA

View Full Version : Iframe scrollbar color script & new pages



Andrew
08-04-2007, 05:40 PM
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
08-04-2007, 08:19 PM
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
08-05-2007, 01:32 PM
Perfect, thanks a lot, John. :)

big-dog1965
09-10-2007, 07:56 AM
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
09-10-2007, 03:04 PM
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
09-10-2007, 03:23 PM
Thanks it seems to work just fine

jscheuer1
09-10-2007, 04:22 PM
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
09-10-2007, 04:47 PM
Ok that works to
THANKS
Checkout my post about a photo gallery I tried it from the site and dont work.