Menu
Hi !!!
I’m sure this is a basic one, but…
Let me explain it all.
On my website, I have a css switcher ( the one from Paul Sowden, ALA ) in javascript. So far, everything is fine.
BUT : my website uses an iframe. And in the iframe, the pages used to get their css from the parent. ( in the parent page, I defined :
[code=php]var styleSheet=’bttf.css’;
and in the child pages :
[code=php]
<script language=”JavaScript1.2″>
document.write(‘<LINK REL=stylesheet HREF=”‘+parent.styleSheet+'” TYPE=”text/css”>’)
</script>
It worked really fine.
My problem is now that the stylesheet changes in the parent page, with this css switcher.
So I’d like to know if it’s possible to write seomthing in php that would write this variable accodring to which style sheet is being used. ( I also have a script which would need to be written according to the style sheet in use ).
How can I do this in php ? How can I detect which style sheet is being used ?
What I have in the header of the parent page :
[code=php]
<link rel=”stylesheet” type=”text/css” href=”css1.css” title=”blanche” />
<link rel=”alternate stylesheet” type=”text/css” href=”css2.css” title=”violet” />
<script type=”text/javascript”
src=”styleswitcher.js”></script>
the style switcher :
[code=php]
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);
and then, again in the parent page, the links to call a css or the other.
[code=php]
<div id=”version”><a href=”#” onclick=”setActiveStyleSheet(‘blanche’); return false;”>change style to white</a>
<a href=”#” onclick=”setActiveStyleSheet(‘violet’); return false;”>change style to violet</a>
</div>
I’ll use five css, but for the moment, I tested it with 2 only…
If you could give me a hand, I would be eternally gratefull. I posted in the js forum too, but I guess the solution will be part php and part js…
Thanks for all suggestions !!!
I really want to keep the child pages with only that
[code=php]
<script language=”JavaScript1.2″>
document.write(‘<LINK REL=stylesheet HREF=”‘+parent.styleSheet+'” TYPE=”text/css”>’)
</script>
in the <head>…