[Synotic]

Hi, I'm working on a minor site design and part of it uses style-switching. I've used a script I borrowed from another guy and it works well enough... except I need to be able to switch between stylesheet A and stylesheet B with one one button/link. As opposed to having two buttons/links for each stylesheet. I've rigged up a page that shows my current version which you can see here. I'm hoping that I can just use one link and have it toggle between the two.

Now the problem is that my JavaScript experience is next to nil I was hoping that some kind soul might be able to modify the script for my needs. I'll be using the code for at least one site that provides free Mac services and possibly two.

I can somewhat understand the code and if I'm correct I just need to set a variable for whichever stylesheet I want (there'll just be two) and then choose the opposite of whatever is chosen. But I'm not versed in JavaScript well enough, or at all, to do what I want. Speaking of that, if anyone wants to suggest a good JavaScript book that I can read later, that'd be helpful.

Thanks for any help

P.S. If someone does help could you tell me how getPreferredStylesheet gets the preferred stylesheet? It doesn't seem to be alphabetical or order in the HTML document...

[Chris O'Brien]

Taking straight from the JavaScript you already have and modifying it a little bit:

Code:
var curStyleSheet = "standard";
function setActiveStyleSheet() {
  var i, a, main;

(curStyleSheet == "standard") ? curStyleSheet = "nonstandard" : curStyleSheet = "standard";

  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") == curStyleSheet) a.disabled = false;
    }
  }
}

Note that this modified function only switches between 'standard' and 'nonstandard'. The function (which you were already using) just goes thoruhg all you stylesheet tags (link ones) and disables them, and enables the one matching the one you specify (the title argument of the setActiveStyleSheet function. There are easier ways of doing, but this way is nice if you have loads of stylesheets (more than 2) and want to switch between them with dif links etc...)

Anyhoo - just use

Code:
<a href="#" onclick="setActiveStyleSheet(); return false;">change stylesheet</a>

and it should switch between the two.

<edit>can't bleeding spell </edit>

[Chris O'Brien]

Oh, and getPreferredStyleSheet works by finding the link tag which doesn't include the string "alt".

In more detail:

Code:
<link rel="stylesheet" href="styles/standard.css" type="text/css" />

Is your default stylesheet (or preferred one) and link tags with "alternate stylesheet" in them:

Code:
<link rel="alternate stylesheet" href="styles/nonstandard.css" type="text/css" title="nonstandard" />

are other stylesheets that can be chosen from the view->Use Style menu in Mozilla based browsers... These are alternate sylesheets, i.e. ones that aren't your default one...

So, to reiterate, the function just looks to see which of your link tags doesn't have "alt" in it, that is, isn't an alternate stylesheet, bt your default one. (handled in this part:

Code:
a.getAttribute("rel").indexOf("alt") == -1

- the value of -1 is returned when there is no match, i.e. if the string "alt" isn't within the rel attribute of the tag).

Sorry for taking so long to explain something another person could've done in a couple of lines - that's just me

Oh, and in my first post, you should probably give

Code:
<link rel="stylesheet" href="styles/standard.css" type="text/css" />

a title attribute of "standard" i.e.

Code:
<link rel="stylesheet" href="styles/standard.css" type="text/css" title="standard"/>

[James L]

...sorry to jump in, but I had a question. Does this work in all browsers that support the W3 DOM, and does it dynamically redisplay the page once it rewrites the stylesheet link?

[Sage]

Dunno if this helps, but here's a really good ALA article on stylesheet switching w/ Javascript, and they even bundled everything into one downloadable .js file.

[Synotic]

Originally posted by Black Book:
Taking straight from the JavaScript you already have and modifying it a little bit:

Code:
var curStyleSheet = "standard";
function setActiveStyleSheet() {
  var i, a, main;

(curStyleSheet == "standard") ? curStyleSheet = "nonstandard" : curStyleSheet = "standard";

  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") == curStyleSheet) a.disabled = false;
    }
  }
}

Note that this modified function only switches between 'standard' and 'nonstandard'. The function (which you were already using) just goes thoruhg all you stylesheet tags (link ones) and disables them, and enables the one matching the one you specify (the title argument of the setActiveStyleSheet function. There are easier ways of doing, but this way is nice if you have loads of stylesheets (more than 2) and want to switch between them with dif links etc...)

Anyhoo - just use

Code:
<a href="#" onclick="setActiveStyleSheet(); return false;">change stylesheet</a>

and it should switch between the two.

<edit>can't bleeding spell </edit>

Black Book, thanks a lot for the speedy response! I really appreciate it It appears to work perfectly but I just have one little problem... it seems that the cookie isn't being set. So once they choose an option, it doesn't stick. Is it possible to maintain this feature while keeping the toggle?

Originally posted by James L:
...sorry to jump in, but I had a question. Does this work in all browsers that support the W3 DOM, and does it dynamically redisplay the page once it rewrites the stylesheet link?

I don't know offhand the browsers that officially support the W3 DOM... but it works in all browsers I've tested... IE 5:mac, IE 6 for windows, Mozilla based browsers and Safari. As for the redisplaying... yes, the switch is pretty much instantaneous No page reloading involved, which is why I like it over other methods which involve PHP and reloading the page.

Originally posted by Sage:
Dunno if this helps, but here's a really good ALA article on stylesheet switching w/ Javascript, and they even bundled everything into one downloadable .js file.

Thanks for the link! It appears that this is where the code originally originated from. The bit about "persistent" and "preferred" stylesheets was rather enlightening. As was the bit about grouping together preferred stylesheets. I'll have to reexamine it later once I'm more comfortable with JavaScript.

[Chris O'Brien]

Originally posted by James L:
...sorry to jump in, but I had a question. Does this work in all browsers that support the W3 DOM, and does it dynamically redisplay the page once it rewrites the stylesheet link?

Works in Mozilla (and it's derivatives - Netscape, Firebird and Camnio) as well as Safari and IE Mac. Dunno about IE/Win and it doesn't work in Opera 6.

And yes. It updates dynamically. I wrote it off the top of my head and then wondered which browsers it would work with after you asked. Anyway, in order to check, I set it up at http://chrisobr.no-ip.com (it's only up for about 12 hours a day). Click on the link in the top right.

[Synotic]

Originally posted by Black Book:
Oh, and getPreferredStyleSheet works by finding the link tag which doesn't include the string "alt".

In more detail:

Code:
<link rel="stylesheet" href="styles/standard.css" type="text/css" />

Is your default stylesheet (or preferred one) and link tags with "alternate stylesheet" in them:

Code:
<link rel="alternate stylesheet" href="styles/nonstandard.css" type="text/css" title="nonstandard" />

are other stylesheets that can be chosen from the view->Use Style menu in Mozilla based browsers... These are alternate sylesheets, i.e. ones that aren't your default one...

So, to reiterate, the function just looks to see which of your link tags doesn't have "alt" in it, that is, isn't an alternate stylesheet, bt your default one. (handled in this part:

Code:
a.getAttribute("rel").indexOf("alt") == -1

- the value of -1 is returned when there is no match, i.e. if the string "alt" isn't within the rel attribute of the tag).

Sorry for taking so long to explain something another person could've done in a couple of lines - that's just me

Oh, and in my first post, you should probably give

Code:
<link rel="stylesheet" href="styles/standard.css" type="text/css" />

a title attribute of "standard" i.e.

Code:
<link rel="stylesheet" href="styles/standard.css" type="text/css" title="standard"/>

Oops, I forgot to reply to this. Thanks for your explanation, it seems obvious but I think it was working with my design earlier... in that it was selecting the stylesheet explicitly marked alternate. It might have been related to the persistant vs. preferred stylesheet mentioned in the ALA article... Either way it seems like it shouldn't be a problem now.

[Chris O'Brien]

Ah, Synotic, you beat me to answering James L's question.

Anyhoo - the reason why the cookie part doesn't work any more is because I removed the title argument of the setActiveStyleSheet function. To get round this, change

Code:
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

to

Code:
var cookie = readCookie("style");
var curStyleSheet = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet();

at the end of the scripts and also in the window.onload part.

If it doesn't work, I'll have a proper look for ya

Note, that I'm assuming you'll be using what I wrote rather doing it your own way...

[Synotic]

Originally posted by Black Book:
Ah, Synotic, you beat me to answering James L's question.

Anyhoo - the reason why the cookie part doesn't work any more is because I removed the title argument of the setActiveStyleSheet function. To get round this, change

Code:
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

to

Code:
var cookie = readCookie("style");
var curStyleSheet = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet();

at the end of the scripts and also in the window.onload part.

If it doesn't work, I'll have a proper look for ya

Note, that I'm assuming you'll be using what I wrote rather doing it your own way...

Thanks a lot! I just popped it into the site I am working on and it works beautifully!

I've also updated the original site I posted just in case anyone wants to use it.

Again thanks a lot, I really appreciate it!

[Chris O'Brien]

My pleasure