Okay... Javascript to redirect to a stylesheet...

[comingbackdown]

Okay. I went to a JS tutorial, I got waaaaaay farther along than the lesson that I'm thinking of, but... It said you could use Javascript to redirect to a different stylesheet depending on a conditional statement. I tried the example code, and it didn't work...

So, how do I do it? Or, more importantly, can it still be done?

[Charles]

There are a couple of ways to do it and I don't know what tutorial you are using but the one that I use I adapted from http://www.alistapart.com/stories/alternate/ . You might also want to take a look at http://www.alistapart.com/articles/bodyswitchers/ .

But do be careful of those JavaScript tutorials, quite a few are abysmal. Half the job of an engineer is to solve the immediate problem, and anybody can do that most of the time, but the other half is to avoid unwanted and unforeseen side effects. It's easy to build a great looking house that blows over in the first strong wind. And so engineers develop standards and codes. Well, web authoring is really engineering and writing JavaScript is certainly software engineering. Most of those tutorials are written with no thought to the unwanted and unforeseen side effects and no knowledge of the standards and codes.

Follow those tutorials and you'll learn a bunch of stuff that seems to work but that causes all kinds of harm. You'll just have to unlearn everything but you will have developed an emotional to the "old ways" that you have adopted. You'll end up trying to ban the messenger.

The HTML Goodies is about the worst that I've seen.

[LeeU]

And many of those tutorials are written very well. The original question was how to deal with a specific one, not the validity of all of them.

comingbackdown, if you could post a link to it then those knowledgable here can take a look at it.

[comingbackdown]

http://www.codepunk.hardwar.org.uk/bjs25.htm

There's the URL. Take a look at it. It seems like BS to me, but... What do I know?
I'm into forms on the advanced tutorial there. I'm hoping to get books on JS, and PHP, for Christmas. Books are great, IMO. But, until then, I'm stuck.

[Charles]

That tutorial is wrong about a whole lot of stuff. Best to avoid.

Go to your public library and grab JavaScript : The Definitive Guide by David Flanagan.

[comingbackdown]

That tutorial is wrong about a whole lot of stuff. Best to avoid.

Go to your public library and grab JavaScript : The Definitive Guide by David Flanagan.

The incident that I described is the only time that tutorial has ever let me down.
I put that book on my christmas list this year. I can't use it from the library even with my mom's 28 day teacher card... I can't read, absorb, and implement, those lessons.

But, can somebody help me solve the stylesheet redirect easily?
I need to use the least amount of code possible, and still get the job done.
I need to be able to do massively complex stuff like having a user swap the stylesheet, but... I also need to just be able to switch it through code, without the user knowing...

[Charles]

The incident that I described is the only time that tutorial has ever let me down.How do you know that if you don't know JavaScript in the first place? The tutorial is chock full of things that seem to work on some browsers but that have unwanted side effects. They say that what makes the Devil so wicked is that his lies are half truths. You're being let down in a way that you can't tell, yet.

Try something like:<link href="some-sheet.css" rel="stylesheet" type="text/css">
<link href="some-sheet.css" rel="alternate stylesheet" title="blue-background" type="text/css">

<script type="text/javascript">
onload = function () {
var l, i = 0
while (l = document.getElementsByTagName ('LINK')[i++]) {
l.disabled = l.title != 'blue-background'
}
}
</script>

[comingbackdown]

How do you know that if you don't know JavaScript in the first place? The tutorial is chock full of things that seem to work on some browsers but that have unwanted side effects. They say that what makes the Devil so wicked is that his lies are half truths. You're being let down in a way that you can't tell, yet.

Try something like:<link href="some-sheet.css" rel="stylesheet" type="text/css">
<link href="some-sheet.css" rel="alternate stylesheet" title="blue-background" type="text/css">

<script type="text/javascript">
onload = function () {
var l, i = 0
while (l = document.getElementsByTagName ('LINK')[i++]) {
l.disabled = l.title != 'blue-background'
}
}
</script>

I know... That tutorial isn't perfect. But, I've managed to make all the examples work, and I've checked them with a pro developer. He says I'm doing okay for what I know. I even came up with some ideas for user based testing of whether or not JS is enabled... I have yet to test my ideas though... I just tested them. They work. :D

[coppocks]

Making the examples "just" work isn't the point. Making them work with the proper code is the point Charles is trying to make. What Charles is trying to tell you is: The approach used on that site, whether they work or not, is not the path you should take when learning to code JavaScript. If you are going to go to the trouble to learn JavaScript to begin with, then why not learn to code it correctly?

Using navigator.appName for example, to fork code for specific browsers in a generic environment is considered wreckless and could come back to haunt you. A few years ago, when you only had 2 browsers (IE and Netscape) and a non-standard environment between the 2 of them, then that approach was more applicable. I mean, what if Firefox returned "FireFox" instead of "Firefox" in a minor update release? What a browser returns as it's appName is not a standard... but more of a whim, whereas getElementsByTagName or getElementById are standards.

Invariably, there can be multiple approaches to a single coding issue in JavaScript. But just because they may all produce the desired results (your desired results), by no means implies that all approaches used to get those results are desirable or correct.

G'luck to you!

[comingbackdown]

I know all about not using navigator.appName. I figured that out for myself.

Opera can identify itself as IE, remember? So, I solved that one for myself.
It may not be a perfect tutorial, but... Most of the internet tutorials I've been to have generally just sucked... Even the W3Schools tutorial wasn't great... That should not be the case, but it is...

All those who want a better web tutorial, say "I", then let's do something about it! I've looked at over thirty different sites, and most of them weren't great...

[Znupi]

<html>
<head>
<title>Swapping styleSheets</title>
<link rel="stylesheet" type="text/css" href="test1.css">
<script type="text/javascript">
function swapCss(newLink) {
i=0;
while (curLink = document.getElementsByTagName("link")[i++]) {
if (curLink.rel == "stylesheet") {
curLink.href = newLink;
break;
}
}
}
</script>
</head>
<body>
<a href="javascript:swapCss('test2.css')">Test2.css</a><br>
<a href="javascript:swapCss('test1.css')">Test1.css</a>
</body>
</html>

Is this what you are looking for...?