Switching stylesheets across multiple pages using javascript

IanOLeary1

07-13-2011, 02:48 PM

I'm trying to allow the user to change the stylesheet of my website. I can change the stylesheet on a page by page basis (eg. from red style to blue style) but once the user navigates to a different page the stylesheet resets back to the original setting.

For example, when the user visits the site first its set to the red style, they can change it to blue but when they navigate to another page the style goes back to red again where as I want the style to stick across pages.

Does anybody know how I can sort this out? I assume I'll have to edit my javascript but Im not very good at javascript so any help would be great!

HTML

<html>
<head>
<link href="red.css" rel="stylesheet"
type="text/css" title="red" media="screen" />
<link href="green.css" rel="alternate stylesheet"
type="text/css" title="green" media="screen" />
<link href="blue.css" rel="alternate stylesheet"
type="text/css" title="blue" media="screen" />

<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}
</script>

</head>
<body>
<a href = "home1.html">Page 1</a>
 
 
<a href = "home2.html">Page 2</a>
 
 
<a href = "home3.html">Page 3</a>
 
 
 
 
<a href = "#" onclick="changeStyle('red')">Red Stylesheet</a>
 
 
<a href = "#" onclick="changeStyle('blue')">Blue Stylesheet</a>
 
 
<a href = "#" onclick="changeStyle('green')">Green Stylesheet</a>
</body>
</html>

CSS

body
{
background-color:red;
}

Budreaux

07-13-2011, 06:35 PM

I think the easiest way to do this would be to set a cookie for the user then have your pages check for the cookie before each loads. This will allow for the style preference to persist throughout your domain.

IanOLeary1

07-13-2011, 08:39 PM

Thanks, would you have any examples of how this could be done? I'm sorry but I'm a graphic designer whos been roped into a coding job so I don't really know what I'm doing!

Budreaux

07-13-2011, 09:20 PM

ah, the ol' double duty. I think that happens to everyone.

What you need requires quite a bit of coding. i'm not sure I can sit down and do the whole thing, but I found this and it is probably the best example with clear explanations as to what is going on and what you would need to do.

http://www.quirksmode.org/js/cookies.html

This guy is good. I actually have his book as well. I learned a lot from his site in my early years of coding. For your scenario, these are the steps you would need to take.

1. all of your pages must check for the existence of your cookie. if it exists, use the values from that cookie. If it doesn't, then load the default style.
2. when a user selects a different style, you will need to check for the existence of your cookie (you will always have to do this), if it exists, delete it and write the new cookie, if it doesn't then just write the cookie.

your cookie could be set up as follows: myStyle=blue; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/

what you would change (when a new style is selected) each time is the color after the = sign. This will all be js and you may have to piece bits together such as this cookie script with a script that changes page styles, but it can be done (even by a novice to js - it will just take some time). The alternative is to hire someone to do this for you (unless someone else has the time to whip up a script for you here). hope this helps

IanOLeary1

07-14-2011, 11:44 AM

Thanks for your help! I'll give it a crack and see how it goes.

Sciliano

07-14-2011, 12:15 PM

IanOLeary1:

See, the complete cross-browser example in the .zip file, here:

http://www.codingforums.com/showpost.php?p=1104456&postcount=13