Is switch content script for me?

[Crea]

DD Switch Content Script

I think it is, but I'm a little confused. I'm not sure if I can say this right, so please bare with me. I'm new to this, and the site.

I'm using css external style sheet and going for xhtml strict.

I'm working on a base template for my site, which I've uploaded at a temporary free host found here.

If you notice the Legend off to the right of the page, it's basically a css ul li vertical menu/list (that I'm pretty sure I'd only have to add the onClick event and class to). But menus aside, even if I were to just have a h1 or whatever that acts upon onClick that's located in the div id #bg-slice-18. When I click on one of the four options, I'd like the content that is and also found within the div id #bg-slice-20 to be switched to a different background-image and content, which will either be #bg-slice-20-links or #bg-slice-20-clear, depending on what I'd need. And then have the new div id filled with specific content related to whichever was clicked.

As is right now, I'll only be working with 4 different contents to be loaded into the same space. And each of the four so far, will only be using the #bg-slice-20-links background-image. But as I build, the sites main content section will have a story with footnotes using the same one character symbols found in the legend which will be used to do either #bg-slice-20-links or #bg-slice-20-clear throughtout the story, and loaded into the same space.

I know I don't want to have the expand (+/-) symbols next to it.

Is this script right for me? if not could you please direct me to a script that may fit my needs more? However if it is, could someone please be kind enough to walk me through it? I don't mean just for you to do it for me, but explain a bit more so I can understand and learn from it for later use?

Thanks for your time, crea

[Crea]

DD Switch Content Script

Oh and while trying to validate the header script it tells me that the last line of...

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

... won't validate. I was wondering, since I'm using an external style sheet, is that last line / document.write('</style>') really needed?

Also along the same lines... if not needed, would I have to add any of the following code into the first document.write() ...

<link rel="stylesheet" type="text/css" media="all" href="styles/layout.css" />

Or is that already handled because that info is already in the header?

[Crea]

DD Switch Content Script

Actually, since I've had more time to tinker with it... I took out that last document.write I was curious about, and FF1.04 surprisingly enough understood it, but lol IE loaded the page but with a complete white wash. So, so far as it seems, I'm stuck with one line of unvalidated xhtml.

edit // Decided to bypass the whole validate by making it an external .js file.

Anyways, When I click on the Legend (first three are the standard s1, s2, and s3 descriptions), and I've added the div id #bg-slice-20-links within the div id #bg-slice-20... however, it doesn't position it properly and ends up a a lot of lines down and a few lines over to the right creating the x-scroll). While the sc4 (c.f.a.q.) onclick is without that seperate div #bg-slice-20-links, and only contains s1's onclick text content DOES load into the proper place within the div id #bg-slice-20.

I've uploaded what I've done so far... so you can see where I'm stuck at now. I was wondering if anybody could tell me what I'm doing wrong. Its got to be a simple mistake or an improper code on my part.

[Crea]

nevermind...

after hours of looking at it I finally got fed up and printed out the html and css code, and 10 minutes later I realized my mistake. The div id's #bg-slice-20-links and #bg-slice-20-clear had the wrong top left properties.

All in working order now! *go me!*

Great script by the way!

But I'm still curious if there's a way to make this script xhtml strict compliant?