Style Switcher Problems

[Lord Shyguy]

I have been trying to make a style switcher; I think I have all the right code, but when the link to change the style is clicked, all it does is open the CSS file for that style! What am I doing wrong? Someone help me, please! :sad:

[Faltzer]

Let's see your code for the styleswitcher and the code you used for when clicked.

[Lord Shyguy]

Here is the styleswitcher.js file:

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);

Here is the code in the header:

<link rel="stylesheet" type="text/css"
href="Original.css"/>

<link rel="stylesheet" type="text/css" href="Original.css">
<link rel="alternate stylesheet" type="text/css" href="Space.css" title="Space Style">
<link rel="alternate stylesheet" type="text/css" href="STYLE2.css" title="STYLE2TITLE">
<script type="text/javascript" src="styleswitcher.js"></script>

And here is the code when you change it:

<li><a href="C:\Documents and Settings\Pappa Bear\My Documents\Original.css" onclick="setActiveStyleSheet('Original'); return false;">Original Style</a></li>
<li><a href="#" onclick="setActiveStyleSheet('Time'); return false;">Time Style</a></li>
<li><a href="C:\Documents and Settings\Pappa Bear\My Documents\Space.css" onclick="setActiveStyleSheet('Space'); return false;">Space Style</a></li>

A few questions:

1. Do I need to use a Change button to make it work (like the one here on the main site)?

2. Does the styleswitcher.js file use ASP?

[Butterfree]

Okay, firstly, you've got <link rel="stylesheet" type="text/css" href="Original.css"> in there twice. Secondly, you're missing the title="Original" attribute that needs to be on it in order for setActiveStyleSheet('Original') to actually switch the style to it. Thirdly, the title attribute of your "space style" is "Space Style"; this means you should be using setActiveStyleSheet('Space Style') to switch to it (not setActiveStyleSheet('Space')). Fourthly, there is no stylesheet with the title "Time" (and you've got an extraneous stylesheet in the header called STYLE2TITLE which looks like a remnant of whatever instructions you followed while making your styleswitcher). Fifthly, the reason the links are taking you to the stylesheet files is that, well, you're linking them to the stylesheet files. (As a note, you're not supposed to write links using precise paths on your personal computer; use relative paths.) Use href="#" in order to make the links not take the user anywhere.

And no to both questions. My styleswitcher is completely different and has a drop-down instead of links like yours does, and styleswitcher.js is simply an external Javascript file, run in the browser like any other Javascript, that has nothing to do with ASP.

[Lord Shyguy]

Where would I put the title attributes though?

[Faltzer]

You tack it on to your <link>:


<link rel="stylesheet" type="text/css" href="Original.css" title="Original">

[Lord Shyguy]

But the text that is supposed to change the style doesn't appear as a link. It's just plain text.

[Sandstone-Shadow]

How are you writing the links? They should look like this:

<a href="#" onclick="setActiveStyleSheet('Title'); return false;">Link Text Here</a>

[Lord Shyguy]

That's what I'm doing, except without the a in a href, because Butterfree said that that would be directly linking it to the css document.

[James]

... you need the a.

[Lord Shyguy]

Okay, I think the problem is that my website isn't actually up yet, and my computer isn't running the Javascript file. Or my computer is being a piece of crap. Either way.

[Yenaa]

No, that wouldn't have anything to do with it, unless the styleswitcher.js file is in a separate folder.

[Sandstone-Shadow]

Hmm... well, it could. I'm not sure how javascript works in a case like that, so you could be right, Yenaa, but when I was making a website on my computer, SSI didn't work. Unless I was just doing something wrong.

[James]

That's because you probably don't have SSI installed on your computer. SSI is server-side; Javascript is not.

[Sandstone-Shadow]

Ah...! Okay then, ignore what I said. xD

[Yenaa]

That's because you probably don't have SSI installed on your computer. SSI is server-side; Javascript is not.

Yeah, I would think so, seeing as some host don't support PHP, but mostly all of them support Javascript.

And XD, Shadow, it's fine. You learn from your mistakes.

[Butterfree]

There is no way for a host to not support Javascript. Javascript quite simply has nothing to do with the server. It's run in the user's browser. The browser can support or not support Javascript; the host can't.

[Lord Shyguy]

No, that wouldn't have anything to do with it, unless the styleswitcher.js file is in a separate folder.
That might be it. Would putting everything in one file help at all?

By the way, I can't actually open styleswitcher.js. My coputer just gives me some 'Error, cannot read' kind of message. I have Windows XP Home Edition if that helps at all.

[Kratos Aurion]

Don't put them all in one file if that's not what the instructions told you to do; just put them in the same folder if they aren't already.

I don't believe Windows has a default application for opening .js files. Right click on it, choose Open With and use Notepad or something.

[Lord Shyguy]

Thanks, Kratos. Now, since all the current possiblities are eliminated, I'm stuck wondering why the heck it won't work.

[Terry. T.]

When doing ProBoards, like me, you can simply edit through Admin Profile and change them through Profile Edit. If you make forums.

[PichuK]

/facepalm
He's not making a forum.

[Yenaa]

/facepalm
He's not making a forum.

XD. Terry, he's not making a forum, like he said. Serious webhosts don't even come with click and done widgets in like forum hosts. It's all coding.

Well, it would make a difference if they're in different files. Seeing as if you the styleswitcher code like this:
<script type="text/javascript" src="styleswitcher.js"></script>
and the styleswitcher.js file is off in another folder, you'd need to change the src="styleswitcher.js" to src="../foldername/styleswitcher.js", while changing foldername to the name of the folder.

[Lord Shyguy]

Hmm, that doesn't do anything either...