Page content index?

I would like to implement a automatic Contents menu at the top of the page, but I don’t like the look and feel of the way wiki does their. It’s very obtrusive.

The functionality on the other hand is perfect. H2s being main, with H3s and H4s being contained as subs under the headers. The link building structure I’m building will be very similar to that.

… but the blocky obtrusive ugly nature of the way the box is setup is something I don’t like and I’m have a very hard time thinking outside the box on this one. I see the way wiki did it and I can’t come up with any ideas of my own. I’ve toyed around with the idea of doing it more horizontally, but that leads into other issues.

Another thing is, I can’t get too fancy with the design as this needs to work with IE8 and I won’t have the time to completely redesign it for more modern browsers. It doesn’t necessarily need to be good in IE8, but it needs to function 100% without the need for a complete redesign.

Can anyone offer me any help with this situation? Maybe some examples or other things to look at?

Personally I don’t find that TOC bad at all, but that’s me.

Anyway, instead of having it display and giving the option to hide, would not displaying it and giving the option to show work?

I think that’s the way I’m leaning currently, but I would still like it to be better somehow. I really feel this would be better if it was done horizontally.

h2 -> h3 -> h4
h3
h3 -> h4
…h4
…h4
h2
h2-> h3

(hopefully that translates to bb right :slight_smile: )
But, I’m not sure how that’s going to look when you have header names like:

“Filler Word Display for My Very Long Multiword Company Name and its family of companies”

As an H2. (that’s a real header someone used, minus the obfuscation of course)

I think I’m going to go ahead and implement it with a jQuery-UI Accordion, but a heavily modified UI theme specific to this and worry about the layout later.

You mean kind of like having breadcrumbs in it?

*if you wrap in [noparse]

[/noparse] bbcode tags tabs are retained

No not really breadcrumbs, just a more horizontal version of the wiki style index.

I’m still having trouble picturing what you mean by “horizontal”. In columns? Seems this could be a real pain if they’re created dynamically and have widely varying title lengths and different number of sub headings all the time.

1 Definitions					3 Modern methods
2 Predecessors					    3.1 Types of crowdsourcing
    2.1 The Oxford Dictionary			        3.1.1 Crowdsourcing typology
    2.2 Crowdsourcing in genealogy research	        3.1.2 Crowdvoting
....						....
....						....

Yeah that would get messy. I just feel that the length is too much when these pages are already very long, vertical space is already limited a little, and it just feels cumbersome.

The problem is, I don’t even know what I mean by horizontal! lol I just have some horizontal space where as vertical space is already very full.

It doesn’t really have to be horizontal necessarily, just wondering if anyone knew of or seen any other methods of accomplishing something similar.

If horizontal space is the screen real estate you have readily available it would make sense to use it.

The code logic wouldn’t be trivial but I think it could be done.

You would need to know how many rows and the width of each row, then use that to determine the number of columns that could fit in the viewport width.
Then divvy up each heading group, “breaking” them at logical places.

Not only a coding challenge but a CSS one as well.