Post #171

Adding in tabs, blogmarks and a blogroll

19th January 2004, early evening | Comments (19)

Amidst the madness of being inside all day, drinking tea, and tidying up my collection of pens, I’ve found time to make a few small changes on the site.

Tabs, blogroll and blogmarks

A screen shot of the tabs in action

You’ll see that I’ve added in extra content to the right hand column. I now have a list of blogmarks (links that don’t warrant a full posting here but which are interesting none the less) and a blogroll (a list of sites I read on a regular basis).

I’ve wanted to add those features in for a while now, but didn’t want to compromise the ‘clean look’ this site has.

In the end, (and after an awful lot of analyses of my own browsing habits) I decided that these new elements could happily reside behind a tabbed interface. My thinking was that when you want them, you want them, and when you don’t, you don’t need to see them at all.

Mark Wubben very kindly stepped in to rescue my feeble efforts at coding the tabs in Javascript, producing a script that seems to work perfectly in all my target browsers.

Those people without Javascript-support don’t miss out on content — they get all three blocks of content (the nav, the blogmarks, and the blogroll) in one, traditional, straight column.

This follows the rules that Peter-Paul Koch suggested in his article:

  1. The site should still work when the browser doesn’t support Javascript.
  2. The script should still work when the browser doesn’t support CSS.
  3. Styles that hide content and are meant to be overruled by a script, should be set in Javascript.

New blogmarks

A screen shot of the tabs in action, showing a new blogmark has been added

To save you wasting a mouse-click, I’ve set things up so a little asterisk appears in the blogmarks tab when new content has been posted.

A cookie is set whenever you click the b-marks tab, and the time and date of this is compared to the time and date of the latest blogmark. If the blogmark date is newer than your cookie date, you get the little *.

You might also notice that blogmarks posted since your last visited have a different colour list-dot. (If this is too subtle, can you let me know please?)

I'm looking to add the ‘*’ notification into the blogroll tab as well.

One colour for day, one for night

At the suggestion of Mark Wubben (a handy man to have around, so it would seem), I’ve altered the colour of the panorama border (and added in a little drop shadow) to take into account the time of day. At night we now have a subdued colour bar, and during the day a brighter, bluer version.

Fixes for IE

The delight that is IE gets fairly sparse service on this site, as I tend to expend my efforts on the Mozilla/Firebird front.

However, Holly Marie was kind enough to step in and offer up a few hacks that should mean things look a little prettier here in that browser. Specifically floating images and the list item numbers for comments have been fixed.

New goodies

If all goes to plan I should be unveiling some other bits and bobs soon, making the site easier to search, and letting all the kind commentors have easy and flexible access to their contributions.

I’ll let you know how it goes…

As always, any feedback (negative as well as positive) is more than welcome.

Jump up to the start of the post

Comments (19)

Jump down to the comment form ↓

  1. David House:

    I have to say, the asterisk is a great idea!

    Posted 1 hour, 14 minutes after the fact
    Inspired: ↓ Scrivs
  2. Scrivs:

    It's all in those little details that make great sites standout.

    Posted 1 hour, 18 minutes after the fact
    Inspired by: ↑ David House
  3. David:

    The "differently-coloured list bullet" is a bit subtle -- I didn't notice it until you pointed it out. What about putting a small horizontal rule under the last one in the set of new b-marks? [Not sure if this is possible, I just thought it might be a little clearer.]

    I'd also prefer it to remember which tab I had active last time -- I seem to use your b-marks more than the links in the main tab. But perhaps that's just me?

    Oh, good luck with the Bloggie by the way -- you've got my vote! :)

    Posted 1 hour, 30 minutes after the fact
    Inspired: ↓ Dunstan, ↓ Dunstan
  4. Keith:

    Very nice work. I considered a very, very similar approach when I began to realize my sidebar was getting to long. I decided against it, not because it's not an awesome idea, just because I went if a different direction (coming soon) -- I'm glad to see someone had a similar idea and made good use of it.

    The Asterisk is a great, and very useful idea as well -- but the ususally are. ;)

    Posted 1 hour, 31 minutes after the fact
  5. Flexiblefine:

    "Collection of pens"?

    Real collection of real pens, or a pile of cheap ink sticks? :)

    Posted 1 hour, 52 minutes after the fact
    Inspired: ↓ Dunstan
  6. Dunstan:

    The pens on my desk... it's not been very exciting here recently :op

    Posted 1 hour, 55 minutes after the fact
    Inspired by: ↑ Flexiblefine
  7. Manuzhai:

    Lots of nice little features, but can we please have a feed of your b-marks? :)

    Posted 2 hours, 5 minutes after the fact
  8. Sian:

    Yeah! more feeds. I just *know* you want to add a feed to your photography site *g*

    Posted 2 hours, 47 minutes after the fact
  9. Dris:

    Ahh... I love it when you add new features to your blog. It's always so cool.

    I do agree that the bullets are a little subtle... But the color is nice. I would add a small circle outline, thicken the existing outline, or something similar, but leave the color. Just make them stand out a _tiny_ bit more.

    Posted 4 hours, 24 minutes after the fact
    Inspired: ↓ Dunstan
  10. Colin D. Devroe:

    Perhaps since I am on an LCD screen, I can see the bullets better than others, I am not sure. But I think that they are spot on.

    One thing I was hoping for clarification on, was the strike throughs?

    Posted 19 hours, 6 minutes after the fact
    Inspired: ↓ Dunstan
  11. Colin D. Devroe:

    Nevermind. A click and a refresh told me all that I needed to know. :)


    Posted 19 hours, 8 minutes after the fact
  12. KO:

    Is it allright if I use your javascript to do the same think on my weblog? Can you post a little bit more about the workings of it?

    I've been thinking about such a implementation for some months now, but I find javascript to painfull to actually code it myself...

    anyways, color me impressed!

    Posted 1 day, 3 hours after the fact
    Inspired: ↓ Dunstan
  13. Dunstan:

    I've realised that people who don't use tabbed browsing seem to want a cookie set on the tabs, so they can click to a site, then use the back button to see the lists again.

    I don't browse like that, so it never occured to me.

    I'll see what I can do though :o)

    Posted 1 day, 3 hours after the fact
    Inspired by: ↑ David
  14. Dunstan:

    Thanks guys, I'll have a play with the list-dots and try to up their visability a bit.

    'Subtle' is very difficult to achieve on more than one display :op

    Posted 1 day, 3 hours after the fact
    Inspired by: ↑ David, ↑ Dris, ↑ Colin D. Devroe
  15. Dunstan:

    KO, you know what? I'd kind of prefer it if you didn't right now, it's taken a lot of work to get it like this and the idea of giving it away immediately is a bit galling.

    I can't stop you grabbing it, obviously, but I really don't feel like explaining all its secrets away.

    I know that's not very sociable attitude... sorry :o/

    Posted 1 day, 4 hours after the fact
    Inspired by: ↑ KO
  16. KO:

    It's all right, I won't just 'grab' it!

    Earlier, in one of my blogs (click name for example) I had used some javascript (from scriptygoddess) to show hide information, and I had thought how to present it in tabs but never figured out how. So thats why I was asking.

    Posted 1 day, 10 hours after the fact
  17. Matthew:

    Wow! You've implemented it so well! It works perfectly on Opera :)

    I'm really jealous now :)

    Posted 5 days, 14 hours after the fact
  18. Scott Johnson:

    Those tabs look really nice Dunstan. Excellent work.

    Posted 1 week, 3 days after the fact
  19. Antonio:

    Very good gadget, like your site, thanks.

    Posted 2 weeks, 6 days after the fact

Jump up to the start of the post

Add your comment

I'm sorry, but comments can no longer be posted to this blog.