Member Avatar for 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

  • 5 Contributors
  • 7 Replies
  • 186 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by LizAE

Recommended Answers

All 7 Replies

Member Avatar for 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>
Edited by SolidSolutions because: n/a
commented: Exactly what I needed. Thanks! +1
Member Avatar for 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.

Member Avatar for 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.

Member Avatar for johnsteve.bravo

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

Member Avatar for 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.

Member Avatar for 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

Edited by LizAE because: n/a
Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.