JavaScript Blog Category Browser

I recently added an Accordion widget to the right panel of my blog. The accordion has the last five entries for each blog category, so the reader can preview the contents of a category without leaving the front page.
I used the Accordion Widget from the OpenRico library for this project. It took very little time to implement, and was a fun little “quick win” project. This is the kind of thing that AJAX can be great for: adding a little interactivity to a basically static page.


Anyone with AJAX inclinations should experiment with adding a little javascript to their blog layout. A blog is a nice low-risk platform to try out various scripting techniques, experiment with the different widget libraries that are available, and generally take more risks then you are allowed to on a production system. Whatever you learn will translate easily to a more high-stakes environment.
One minor irritation I encountered: the accordion data (for all categories) appeared briefly on load (in the time after the Divs containing the data arrived and before the page completed loading). This created an ugly flicker effect.
My solution was to add a line of JavaScript to make the accordion invisible until the page had completely loaded. Once I did that, I noticed that my blog page actually took a substantial amount of time to load! Some troubleshooting revealed that the Google Adsense / Adwords ads on my right sidebar were the culprit.
This is annoying, since there’s no reason the ads can’t load AFTER the page is complete. I’m going to experiment with some code that forces the ads to load at a more appropriate time (perhaps wrapping them in an iframe will work?) For now I’ve simply removed the ads.
Another annoyance: the timing of the opening / closing of the divs in the accordion is a little off. It seems to start opening a little before it starts closing, so the accordion grows longer for a split-second. This is a really disturbing artifact (every UI person I’ve showed this to has immediately pointed it out), but I haven’t been able to find a fix yet.
Like it? Hate it? Is it working in your browser? Let me know!

4 thoughts on “JavaScript Blog Category Browser

  1. Mandy January 24, 2006 / 1:13 am

    Nice! The accordion would be more intuitive if you would change the cursor to hand once hovered over the header….Just my thoughts 🙂
    BTW, in Firefox 1.5 your script doesnt work smoothly. The accordion jumps on every click.
    Checkout the implementation here:
    http://moofx.mad4milk.net/
    Pretty smooth and the code is not too much either.
    Thank you,
    Mandy.

  2. jdanylko January 24, 2006 / 4:29 am

    Jonathan,
    I love it! VERY kewl. I plan on using Open Rico for my “side” project I’m working on.
    It looks like an excellent addition to your site and adds a touch of 2.0 to it. 🙂
    L8R,
    “The Other” Jonathan 🙂

  3. Paulo Eduardo Neves January 24, 2006 / 8:32 am

    Interesting idea. You are right, the widget was really slow to load.
    I think this widget has a problem. When you open a category and click in one below, the upper one closes and the clicked one grows. If you are in the middle of the page and click in a category, it grows to the top and the category items go out of the screen bounds.

  4. Jon January 24, 2006 / 9:05 am

    Mandy,
    Good point about on-hover (actually it’s worse than you said: first header gets the arrow on hover, everythink else gets something that looks like a Unix “pipe”.
    That demo you linked to was NOT an accordion though. Accordions occupy a consistant space on the screen. That demo changed hight to accomodate content. Might be more suitable for the web though (where liquid, flowing layouts are the point, and layout can extend below the screen, unlike in an application or typical RIA).
    Paulo, thanks for the speed data. The other problem you mention seems insolvable (scrolling the page is not an option, it would seem really jarring to user). But I don’t think it’s that big a deal. ;-> The slowness of loading, however, IS a big concern.
    I cut down rico to just the stuff needed for accordion (I think). No compression though, maybe I’ll play with that next.

Comments are closed.