View Full Version : document.write()

09-28-2003, 10:04 PM
I'm building a style switcher and need to use document.write(), the problem is that whenver I use it, it gets written but nothing else appears on the page.

Am I doing something wrong?


09-28-2003, 10:12 PM
This seems like the usual DOM vs document.write situation. You see, the DOM can't be used while the document is still loading, only after it's finished loading. On the other hand, document.write can only be used while the document is loading, not after it's finished loading.

Styleswitching is kinda my speciality...(I've written a total of three style switchers)
If you tell me how you want your style switcher to appear and function, I can probably tell you how to write it. Serverside, clientside or combo, and what level of browser support do you want? (NN4 requires special care, and if you drop the demand for op support you can get far more versatile style switcher. After all, op has a built-in style switcher anyways...)

09-28-2003, 10:17 PM
Well, this is what I've got so far (nice and simple)

function foo() {

if ((document.cookie.indexOf('style=1') >= 0) || (document.cookie == '')) {
document.write('<link rel="stylesheet" type="text/css" href="normal.css">\n');
else if (document.cookie.indexOf('style=2')>= 0) {
document.write('<link rel="stylesheet" type="text/css" href="alt.css">\n');}

function switchstyle(which) {
document.cookie = 'style=' + String(which);
alert('The style has been switched. Please reload the page.');

onload = foo;

It's clientside and at the moment the style is changed with <a onclick="switchstyle(1/0)">, but I guess I could use a combo.

09-28-2003, 10:25 PM
Hmm, seems like a good situation for this link: <http://liorean.web-graphics.com/scripts/themeswitch.html>

You'll be doing this on a link click, in other words the document will have finished loading. That means you'll have to use the DOM instead of document.write. What you can do, is to include one style as default using <link ref="stylesheet" type="text/css" href="blah" title="Default"> and the other as <link ref="alternate stylesheet" type="text/css" href="blah" title="SomethingElse">

Then you use either document.styleSheets or document.getElementsByTagName('link') to go through the stylesheets, and set the disabled property to false on the stylesheets you want to apply, true on the stylesheets you want to hide, based on your cookie. That's what the Theme Switcher that I linked does. For a live example, see <http://liorean.web-graphics.com/dhtml/tabs/tabs.html>, where I'm doing a tabbed interface based on the alternate stylesheets mechanism.

09-30-2003, 06:31 PM
Thanks a lot. I'm at the last hurdle - all the DOM has been written and the correct disable properties have been set. But unfortunately my alternate stylesheet is not applying. I think I know why.

<link ... href="normal.css"> is disabled.
<link ... href="alt.css"> is not disabled, but I still have it down as 'alternate stylesheet'. I think this is why it's not applying.

Any insight?

09-30-2003, 06:33 PM
Hmm, could I have a look at your code?

09-30-2003, 06:35 PM
Well, this is what actually sets the property:

styles = document.getElementsByTagName('link');
for (var i = 0; i < styles.length; i++)
if (styles.item(i).attributes.item(1).nodeValue == which)
styles.item(i).disabled = false;
styles.item(i).disabled = true;

PS: thanks for the speedy reply :)

09-30-2003, 07:08 PM
Well, the only thing that doesn't look right is that you use item(1) to reach the disabled attribute, though that is a question of form. A DOM user agent isn't required to put the attributes in any specific order in the NamedNodeMap, so you can't know that it's actually the item 1 that you are looking for. Why don't you use getAttribute(attrName) instead?
// Try if this works:

Why don't you drop that if statement anyways, since you get your boolean from the condition and it's the boolean you want to assign.

09-30-2003, 08:00 PM
Shouldn't that be while (i-->=0)?

It goes from 0 to styles.length -1, so when i decremented is 0 then there's still one more to evaluate.

09-30-2003, 08:15 PM
Hmm, while(i-->0) should work like this:

var arr=['a','b','c'],
i=arr.length: (i=3 in other words)
(i-->0) is evalutated as 3>0==true, i=2, loop is executed
(i-->0) is evalutated as 2>0==true, i=1, loop is executed
(i-->0) is evalutated as 1>0==true, i=0, loop is executed
(i-->0) is evalutated as 0>0==false, i=-1, loop is not executed

In other words, it should work. It just goes through the array from length-1 through 0 instead of the other way. (It's faster, too)

10-01-2003, 06:43 PM
Thanks for all your help first off. Just one final problem. :rolleyes: When I click on the 'Alternate Style' link, it comes up with a style-less page.


function switchstyle(which) {
styles = document.getElementsByTagName('link');
var i = styles.length;

while(i-- > 0)
styles.item(i).disabled = (styles.item(i).getAttribute('href') != which);
Called with:

<li><a href="#" onclick="switchstyle('normal.css')">Normal Style</a></li>
<li><a href="#" onclick="switchstyle('alt.css')">Alternative Style</a></li>

10-01-2003, 06:58 PM
Hmm, have you tried to alert the href attributes to see how they look from the browser perspective? They might get resolved, you know. Besides, the title attribute is just as fine and is indeed the attribute intended for this mechanism.

(BTW, does the alternate stylesheets work through the UI menus in Moz and Op7? If not, you can find your problem in the link tags.)

10-01-2003, 07:00 PM
Both the alternate stylesheets at http://redmelon.net and www.massless.org work.

Wow! changed to title and suddenly everything works!

Incredible :)

Thanks loads for your help on this subject

10-01-2003, 07:09 PM
Yeah, through the on page provided link for massless, but not through the UI. I meant the feature avalable from the menu, View>Use Style in Moz and the stylesheet icon in op7. If it doesn't work through them, then you won't find it working through this mechanism. It worked for redmelon, though. Maybe you should have a look at how those link tags are written and compare to your own link tags. (massless works serverside and doesn't actually provide any alternate stylesheets)

10-01-2003, 07:16 PM
You're right - View->Use Style works for redmelon and my page, but not for massless (which also explains why the source didn't make any sense to me :thumbsup: ).

As for the link tag bit, what exactly do you mean? My link tags are written more or less exactly the same, rel, href, type and title attributes with an oblique at the end. What else is there?

10-01-2003, 07:26 PM
Hmm, I only read the first line and missed out on things working. Kinda a mistake you begin to do when you read pretty much every post that appear on these forums...

10-01-2003, 07:28 PM
Lol, it may also be because I edited that post after fixing it to avoid double posting.

10-01-2003, 07:32 PM
That might be it. :)
Have fun, now. I tired of these and don't use one any longer, but the original page I designed my first switcher for was nice, albeit a bit bloated. The style switcher must have been it's major feature...