Old JS Styleswitcher not working

@blotsomeApr 18.2011

I used some code I found online years ago to switch between stylesheets when a user clicked a link. I remember it working for some time, but then it stopped working and I never figured out why. I set up a test page with most of the variables removed, and it still isn’t working. I figure it may be something in the code that I borrowed that I don’t quite understand, so I was hoping someone could assist in troubleshooting (or provide a known working style switcher as an alternative to this). Here is the problem page: ~~[url]~~http://splatteredink.net/test/test.html[/url]

to post a comment

JavaScript

4 Comments(s) _↴

@JMRKERApr 19.2011 — #For testing purposes, I put your style sheet definitions inline.

should be able to reference them with the <link...> tag with the minor change to 'body'. ?

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd"&gt;
 
 &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
 
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 
 &lt;title&gt;.SplatteredInk&lt;/title&gt;
 &lt;!--
 &lt;link rel="stylesheet" title="1" type="text/css" media="screen" href="sts.css" &gt;
 &lt;link rel="stylesheet" title="2" type="text/css" media="screen" href="sts2.css" &gt;
 &lt;script type="text/javascript" src="styleswitcher.js"&gt;&lt;/script&gt;
 --&gt;
 &lt;style type="text/css"&gt;
 .sts { 
 margin:0px 0; 
 padding:0; 
 font: 189% Helvetica, Arial, Sans-Serif; 
 color:#222;  <br/>
 background: #eee url(bg.jpg) repeat-x;
 line-height: 1.4em; 
 }
 .sts2 {
 font-size: 82%; 
 font-family: Helvetica, Arial, Sans-Serif;
 color: #666;
 background-color: #444;
 line-height: 1.5em;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 function setActiveStyleSheet(SS) {
 document.getElementById('pBody').className = SS;
 }
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;h1&gt;Headline&lt;/h1&gt;
 &lt;p id="pBody"&gt;Lorum ipsum, metal guitar talk, what are, you doing, and this is going to be something that
 will always and never will take apart ulver. Lorum ipsum, metal guitar talk, what are, you doing,
 and this is going to be something that will always and never will take apart ulver. Lorum ipsum,
 metal guitar talk, what are, you doing, and this is going to be something that will always and never
 will take apart ulver.
 &lt;/p&gt;
 
 &lt;a href="#" onclick="setActiveStyleSheet('sts'); return false;"&gt;change style to 1&lt;/a&gt;
 
 &lt;a href="#" onclick="setActiveStyleSheet('sts2'); return false;"&gt;change style to 2&lt;/a&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

I'm having trouble reading your 'sts2' style selections, but that too is changeable.

@blotsomeauthorApr 19.2011 — #The page is entirely a test. Wow, that code is so much simpler. None of the content of the test page is important. I've changed the styles below just to isolate text size and color and background color. Those stylesheets are a little odd. This is something I was working on years ago and gave up on, but now I'm trying to figure it out.

.sts {  <br/>
 font-size: 200% ; 
 color:#222;  <br/>
 background-color: #eee ;
 line-height: 2.5em; 
 }
 .sts2 {
 font-size: 75%; 
 color: #666;
 background-color: #444;
 line-height: 1.0em;

And your improvements work like a charm, but of course it is just affecting the one named element pbody. I applied that ID to the body, not the paragraph, to achieve a more global effect. This code may be usable for my application. However, there is a big issue in that the page initially loads with no stylesheet, and on reload, the page reverts back to no stylesheet. The other issue is if I add a link and click through, it doesn't remember the stylesheet choice. Thanks so much for your help!

The actual page in question is splatteredink.net. The blue and brown buttons in the masthead are supposed to switch stylesheets, but it doesn't work anymore (I also noticed sIFR isn't working any more either, so I'll need to fix that as well, but that isn't your concern). So the only way to switch stylesheets is through the view menu in the browser. But since the JS file is the same on the main page and my test, I figure I'd try to isolate the problem, and not deal with those massive html and css pages. That is why I wrote the test page.

@JMRKERApr 19.2011 — #

1. You can initialize a particular style with:

<i>
 </i>&lt;p id="pBody" class="sts"&gt;Lorum ipsum, metal guitar talk, what are, you doing, and this is going to be something that
 will always and never will take apart ulver. Lorum ipsum, metal guitar talk, what are, you doing,
 and this is going to be something that will always and never will take apart ulver. Lorum ipsum,
 metal guitar talk, what are, you doing, and this is going to be something that will always and never
 will take apart ulver.
 &lt;/p&gt;

Same can be done for every element you want as all will change with the "setActivity()" function.

2. If you are leaving the page with a link, you would need to save the current style in a cookie and reload it when you return to you calling page.

(That's a whole other topic you can peruse using a forum search).

@blotsomeauthorApr 19.2011 — #Well, the script I was using has all the cookie stuff written into it. It's this script: http://www.alistapart.com/d/alternate/styleswitcher.js And I got it from here. I was hoping someone could just read through the script and identify what, if anything was the problem. Or if that isn't the case, does anyone know of another pre-made styleswitcher that has cookies and works?

Also in #JavaScript _↴

[RESOLVED] Set default code Calendar for website?Dynamic Image Slideshow - Please Help

Success!

Help @blotsome spread the word by sharing this article on Twitter...

Tweet This

Old JS Styleswitcher not working

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Old JS Styleswitcher not working

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴