CSS stylesheet selector on iframe

I have a javascript styleshhet

[aRojilla]

Hi ppl! Sorry for my poor english! :D

Well, I have always found in the net answers to my questions, but this time I can't find what I'm looking for... :(

I have a javascript code (I don't remember where I got it) to select different stylesheets to change the site layout. It works fine but now the problem is that the page I want to change its layout is in an iframe but the buttoms where you change the stylesheet are in the main page. What I need to know is how to change the code so it changes the layout of the current page in the iframe. I have tried several things like refreshing the page (that in the iframe, with parent.fotografia.location.reload() where fotografia is the name of the iframe).

This is the main code:

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title") &&!a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000)); 
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title); 

This is what I have in the head:

<link rel="stylesheet" href="style.css" type="text/css" title="style">
<link rel="alternate stylesheet" href="style01.css" type="text/css" title="style01">
<link rel="alternate stylesheet" href="style02.css" type="text/css" title="style02"> 

And then I have buttoms linked this way:

<a href="#" onclick="setActiveStyleSheet('style01');">Estilo 1</a>

Any ideas?

thank you so much for your time!

[orion_rus]

May be the better way not to sho iframe, but make a div container and then iframe loads copy their content to div and you can set style as always?
Good luck to you!

[aRojilla]

Well, thank you so much for your reply, but this is no what I'm looking for. Saddly, I can't use a div container right now, I need to use the iframe where all my site's pages are loaded. The script I showed you works fine, but it only changes the css stylesheet for the page where the link is (I mean the link used to select a stylesheet). What I'm looking for is for a way to apply the change to the page showed in the iframe whenever I change the stylesheet.

[aRojilla]

any idea? :(

[orion_rus]

Ok all you need as i think to change following:
var i, a, main;
function setActiveStyleSheet(a,title) {
for(i=0; a.length; i++) {
if(a[i].getAttribute("rel").indexOf("style")!= -1 && a[i].getAttribute("title")) {
a[i].disabled = true;
if(a[i].getAttribute("title") == title) a[i].disabled = false;
}
}
}

and
<a href="#" onclick="setActiveStyleSheet(document.getElementsByTagName('link'),'style01');">Estilo 1</a>

to change in iframe
<iframe name='hi' src='asdasd.html' ></iframe>
<a href="#" onclick="setActiveStyleSheet(hi.document.getElementsByTagName('link'),'style01');">Estilo 1</a>

I think all should works good luck to you

[aRojilla]

what can I say... WOW?

How easy can be things when you know the code! IT WORKS!

thank you so much! thanks a lot! danken! merci! gracias! THANK YOU!

I will credit to you in the .js file with a link to your webmasterworld profile... THANKS A LOT!

[orion_rus]

No problem)
Good luck to you!

[aRojilla]

Ops... It works just as I wanted, thanks a lot for the help, but... I now get these javascript errors in Firefox:

Error: a has no properties
Source File: wp/stylesheet.js
Line: 23

Error: a[i].getAttribute is not a function
Source File: wp/stylesheet.js
Line: 4

In IE, I get this:

'length' is null or not an object

Well, it works, I have no problems at all, so thank you again and again, but is there a way to avoid these erros?

[orion_rus]

Ok) all you need is follows
about this.
Error: a has no properties
Source File: wp/stylesheet.js
Line: 23
Make alert(a) before 23 line and post here what it says.

Error: a[i].getAttribute is not a function
Source File: wp/stylesheet.js
Line: 4

To avoid this as example if you have a[i].getAttribute('title)= you should change it to a[i].title=
All should works good luck to you!