JavaScript, or CSS?

[LizAE]

Hi! Just a quick question:

I am using "Website Tonight" to redo a site for my boss.
He wants a "floating TOC" on one page. So, when you scroll down the ridiculously long page, the categories on the righthand side move with you.
(I wouldn't mind that, but I'd prefer to have the TOC just stay static, almost attached to the stop of the screen, no pauses as it plays catchup)

However, I don't know anything about website design / code. I am willing to learn, but I just need to know WHAT I need to learn :)

Is it JavaScript? Or CSS? I've been reading about "jquery" too. Or are they all interchangable? Many of the sites I've googled have complicated links. I'm a serious newb but have patience to learn.

Many thanks in advance,
Liz

[SolidSolutions]

CSS

Is the TOC in a div or table?

What you want is a style of position: fixed.

For example:

<div style="position: fixed" id="theTOC">
- section 1
- section 2
...
</div>

[LizAE]

The table of contents is just a bunch of links on the right hand side of the page.
There's no code written up so far.

Should I write up a toc using code?
Can I just do an unordered list? <ul> ?
I read about that last week, I think I can do it.

Thanks for your help, this is awesome.

[stultuske]

well, you can add a layout and css (or javascript) code to your html elements,
for instance:
<ul class="ulClass">

</ul>

now you can use this 'ulClass' to link this ul block to css and/or javascript.

well, you can use them both, and jQuery is a javascript library, but when it's about layout, you'll end up using css anyway (even if you don't realize it, you might be changing the css through javascript code)
javascript is more ment to add functionality.

[johnsteve.bravo]

Just do some google search and you would find the already developed solution. Such solutions are available on the internet.

[fluffybunny69]

It can be achieved either by CSS or Javascript with slightly different effects.

CSS would leave the TOC in the same place on the page whether you scroll up or down

Javascript would animate the menu so it seems to slide up or down depending on whether you scroll within the browser window.

For CSS (as pointed out before), wrap it in a div and give it a fixed position:

HTML: <div class="fixedtoc">TOC Content</div>
CSS: .fixedtoc {position: fixed; }

For javascript, do a Google search and I'm sure there will be lots of examples with code for you.

[LizAE]

Just do some google search and you would find the already developed solution. Such solutions are available on the internet.

Oh, trust me, I've been doing that for two weeks. :)
Like I said, I need things explained much simpler.

I think I can narrow down the google search terms now though.
I'll work on it a bit today and get back to you guys.

Cloud 9,
Liz

[LizAE]

Got it!
Now onto other issues.

Thanks a lot, this has given me tons of confidence to push forward and keep improving things.

TGIF,
Liz