d’bug update — down and dirty with jQuery, part two

Previously I posted about an update I made to the books widget down the sidebar of this blog. It was a relatively minor update in order to allow users the ability to browse through a larger selection of programming books. Not satisfied with my beta, I decided to put together a more robust widget, which has previous/next functionality, tooltips, and image preloading. The XML was revamped as well.

This iteration is what I would consider a 50/50 split between jQuery and custom JavaScript. The algorithm is smart enough to allow an odd number of books, as well as any number of books to be displayed at a time. I tested it on IE 6+, Firefox 1.5+, and Safari 3 (on Windows). The image preloader has a minor side effect in Firefox, where until the specified images are preloaded, no other images on the page will display.

You are welcome to use the code as you see fit without attribution. If you want to support my efforts, click through from one of the books to Amazon.com and make a purchase. I have no plans to make this into a plugin in the immediate future. Enjoy!

[ Update ] I have decided to remove the books widget altogether, as well as Google advertising, and our hosting company referral. You could say I am eliminating the noise.

  • Posted by Brian
  • May 2nd, 2008

Leave a Comment

Comments are moderated. No profanity. Only <a>...</a>, <blockquote>...</blockquote>, and <code>...</code> are allowed.

Seperate paragraphs by pressing the "Enter" key twice, or press it once to break to a new line.

4 Comments

#01, May 03 2008

Claude

Nice work Brian.

I think the line $("#books_widget ul").empty().hide(); in appendBooks() produces a flicker* between page transitions because the widget is hidden momentarily.

This could probably be avoided by fixing the height of the widget’s container, #books_widget via CSS.

*The comments section jumps up and down. It’s more noticeable when there are comments like in part one of these jQuery posts.

Cheers.

#02, May 04 2008

Brian

Hi Claude,

Thanks for taking the time to offer up some feedback. I didn’t notice the flicker until you mentioned it, but now I see what you mean. I wanted to avoid setting a height because I wanted the widget to be flexible enough for others to use without having to change the CSS. However, it looks like I’ll have to figure out some sort of alternative.

Thanks again!

#03, May 06 2008

Claude

I know you said you were done tweaking the widget, but we all now that’s impossible since widgets are like potato chips. :)

You can wait until the first “screen” is rendered and get the DIV’s height. Then you can fix the CSS. See .height()

#04, May 06 2008

Brian

Hey Claude,

Your thinking is right in line with mine (or mine with yours) — I thought about doing the same exact thing. I noticed it more on the Mac yesterday — it seems to flicker considerably, but on the PC it is not as noticeable. Your fix suggestion will be the direction I take unless I hear of something else. Thanks!