24 Table of contents
May 05, 2007 /

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

24 Comments:

  1. Optimizing Han's Table of Contents :
    Hi Amanda, Just discovering your site. Amazing! A lot of cool stuff in a very original and efficient design. Looks like you’re a pro! I will need some time to explore it further. Maybe you’re the person that could help me with some questions! I’m enjoying the Table of Contents (ToC) created by Hans from Beautiful Beta that you have on your blog. I’m presently considering your slight modification of this hack. I’m not sure yet if I’m going to try it. I would like to know if it’s possible to satisfy my two following desires with Han’s amazing hack. I have already asked Hans over a month ago but I don’t have any sign that he is considering my questions.
    My two desires:
    1) Titles displayed from newest to oldest dates when loaded for the first time;
    2) Top/bottom scrolling feature
    If the list of posts is very long, when you click on a category near the bottom of the list that doesn’t have many posts in it, the long ToC shrink or collapse to a tinny ToC that gets sometimes out of sight. When this shrinking event happens, you are left somewhere on the main page. The ToC user might get the feeling that something just went wrong. (Test it on your own blog).
    I would like to know if it’s possible to add a kind of scrolling feature embedded in the Toc. The long list of posts and its related information would be displayed in a kind of ToC with a scrolling sidebar (somehow similar like the one in the “popular posts widget” in your sidebar). The ToC or the table would display only a limited number of titles, dates and categories at the time but the top/bottom scrolling feature would allow accessing all the posts easily.
    Is this scrolling feature doable? If it's possible can you show me how?
    Regards!

    ReplyDelete

  2. Hello Alain,

    Thank you for your kind comments! I do hope you enjoy the content you find here.

    I'm no expert when it comes to Javascript, and even less so regarding Ajax, though I hope I can help somehow.

    As regards your first desire: this is something I've already experimented and experienced problems with. I'm sure it is possible to do this, since the ToC uses the blog feed which is usually ordered from newest to oldest posts first. I'll need to do some more research to find the solution for this, and will get back to you as soon as I have.

    For the second desire, I can definitely help! If you take a look at the ToC above now, you'll see it's constrained in a smaller box with a scrolling sidebar.

    This is very simple to achieve, by adding some styling to the div which contains the ToC. Change this:

    <div id="toc">

    to this instead:

    <div id="toc" style="width: 400px; height: 300px; overflow: auto;">

    If you prefer, you can also adjust the width and height to better suit the width of your main posts column.

    I hope this helps, and will let you know if I have any luck with the order of the contents.

    Best wishes,

    Amanda

    ReplyDelete

  3. Alternative to the “adding styling to the div” solution?

    Bonjour splendide «mum»!,

    Thank you for taking my desires into consideration. I really like the kind of stabilizing effect that your solution brings to the ToC when I now play with its various sorting features; especially the labels.

    I’m presently displaying the ToC from a HTML/JavaScript page element over my first post like Han has suggested it. I’m not sold yet to your idea to display the ToC in a post. If I keep a HTML/JavaScript page element as the base to display the ToC, your “adding styling to the div” is not optimal. When the ToC is hidden, I now have a long empty space between the bottom of my blog’s title section and the beginning of my first post.

    Is it possible to get ride of that empty space somehow? Is it possible to use a king of “adding styling” solution similar to the one you have suggested but from inside the script itself in order to get rid of the empty space when the script or the ToC is not active for example? Is there a more optimal alternative to your “adding styling to the div” solution if I want to keep a HTML/JavaScript page element at the top of my main page as the base to display the ToC?

    Merci!

    ReplyDelete

  4. Hello again Alain,

    This poses quite a dilemma, and while I have found a makeshift solution, this is quite a messy one (as you may be able to see by testing the current ToC above).

    The problem is this: in order to make the DIV scrollable, we must specify the height. Even while this is hidden, the height of the div will still be in place in the layout. And unfortunately this cannot be overcome with simple styling: we need Javascript to change the height to match the height of the ToC.

    I have developed a makeshift Javascript function which can change the height of the DIV when the "Show Table of Contents" link is clicked, and contract the DIV when the "Hide Toc" link is clicked.

    However, after the first two functions of show and hide, the script begins acting strangely, hiding portions of the DIV which need to be hidden, and vice versa.

    If you test out the ToC above, you will get a better understanding of what I mean by this problem.

    The ideal solution would be to rewrite the whole TOC javascript to include this function, though I am not quite so experienced with scripting to be able to do this effectively.

    I'm currently working on an alternative, which I will get back to you about shortly if this works.

    ReplyDelete

  5. This comment has been removed by the author.

    ReplyDelete

  6. Tho the solution is interesting, I agree on the problem presented in a 'post ToC' solution.

    I tried alternative placements, and elected to place both the java scripts and division code in a 'long' or 'cross column' sidebar element. This minimized the distraction created by the extra height space made after clicking the 'Table of Contents' command ... But I didn't feel comfortable with the ToC displayed in the wide sidebar, and moved the 'division code' back over the first post (see http://aliasinkhorn.blogspot.com/).

    Satisfactory: the ToC content over the first post displays and behaves well.

    But I'm dissatisfied on the java script: It would be NICE (and my chief WISH) is if 1) 'Hide Table of Contents' would simple loop back to 'Table of Contents' rather than 'Show Table of Contents' (to restore display to 'Table of Contents', I must reload the page), and that 2) the display height for the java commands (Show/hide Table of Contents) would NOT rise/enlarge.

    ReplyDelete

  7. @Alain:

    Though I was working on the problem for most of the day, I was unable to construct a satisfactory solution to the problem. I think the only possible way would be to rewrite Hans' javascript to include the height differences and the scroller for the div which contains the DIV. So far my own attempts to do this resulted in the ToC not displaying at all!

    I will keep working on this when I have the time, as I need to learn much more about javascript functions to do this properly.

    @.Ink: it is certainly possible to change the values for "Show Table of Contents" in the script itself to read "Table of contents" instead. If you would like to email me, I will send you a modified version of the script which will do exactly this.

    As regards the shifting height for the java commands, do you refer to the movement on my ToC or of that on your own blog? The shifting height in the ToC above is due to the text I have also chosen to display. In your own blog, the link remains in the same place after being clicked.

    If I misunderstood your meaning, please let me know and I can help you work on a solution.

    Best wishes to you both,

    Amanda

    ReplyDelete

  8. The ToC as an essential blogging feature

    Hi Amanda,

    It looks like you firmly believe it’s possible to add a scrolling sidebar from inside the ToC’s script and that alternative would eventually solved the “redundant empty space” issue resulting from your proposed “adding styling to the div” alternative.

    I didn’t anticipate that you would invest so much efforts and time in this problem. Thanks for your dedication. But please take it easy with the ToC problem. No rush!

    I do enjoy reading your posts and comments. So far I have stumbled on different post directly related to my various preoccupations. I find your different posts and topics treatment well documented and your writing style is very seducing and effective.

    I’m a beginner blogger and I look forward for your upcoming series of posts specifically for new bloggers and on essential blogging tools. I’m curious about them.

    The ToC has become an essential blogging feature for me. Many blogs in the circle of blogs that I’m visiting regularly have this feature installed on their blogs and I really appreciate it. I like to use this feature to explore the contents of a blog.

    One thing that I don't understand about this feature is why on some blogs like yours the ToC takes so much time to load and on other blogs that have as much of posts as your site, the ToC loads almost instantly.

    Best regards!

    ReplyDelete

  9. Optimizing Hans' Table of Contents - A Collage Alternative:

    Hi Amanda,

    I have combine Hans’ Blog ToC with Singpolyma’s Peek-A-Boo Scrolling HTML Widget , PurpleMoggy’s Display Random Post Device and your information about the scrolling feature.

    I will use this collage alternative in my section entitled "Contents" until I find a more optimal alternative.

    Thanks!

    Union Point / Point d’Union
    A Point of View on Reality and Hyperthyroidism

    ReplyDelete

  10. Many Thanks Amanda, just tweaked the TOC on my blog thanks to you and Hans. I will definitely come back to get more ideas.

    ReplyDelete

  11. Hi Amanda!

    I tried to download a Pagerank button for my site but i waited for about 2 hours and the command keeps on reading "Please Wait".

    Does that mean my blog has no ranking? Pls help. My blog is at http://loveumummy.blogspot.com/

    Thanks!

    CJLavinia

    ReplyDelete

  12. For Lavinia,

    There are loads of different datacenters used to determine PageRank, and most button makers use only one of these.

    My own PR Button generator isn't working for your site at present (and this one's usually pretty reliable), so I can only assume that the datacenter it uses is temporarily down.

    In any case, I wouldn't worry too much about this. YOu can use this free tool from IwebTools to see your PR across different datacenters. I checked your sites PR here, and while a few datacenters are down or showing 0 (probably because they are being updated), your overall PageRank is currently 7!

    Perhaps if you try again later your PR button will be properly generated. I'm sure you'd love to display such a high ranking for your site :)

    Hope this helps,

    Amanda

    ReplyDelete

  13. Hi Amanda!

    Thanks a lot for helping me.

    Cheers:)

    ReplyDelete

  14. does anyone have any idea what happened to Hans and his Javascript? Seems many people depended on his javascript host for their TOC and it has been missing for some time now.

    Thanks

    ReplyDelete

  15. Hi Amanda

    I would love to have this table, but I am struggling to implement this. I got the message "just wait...the toc is loading". Here is my test blog, if it help explains. I guess I was a little lost on the "skin" part in Han's instruction.
    http://scratchtestblog.blogspot.com/2008/08/bng-mc-lc.html

    Thank you Amanda. Is there is any pointer for me.

    ReplyDelete

  16. I had to remove it from my blog. Not yours Amanda, but Hans' original which I modified. It balked at displaying more than 500 posts after I hit the 500th post and the delay in Internet Explorer was infuriating my readers. So...bye-bye toc!

    It would be nice if Blogger could just include this a choice.

    ReplyDelete

  17. I think I'm going to use that one.

    ReplyDelete

  18. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete

  19. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete

  20. Thanks a lot for helping me.

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Subscribe to: Post Comments (Atom)

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

Connect with me:

9rules Essentially Unknown
© Blogger Buster 2010 Home | About | Contact | Hire Me