Dave Burke : Freelance .NET Web Developer specializing in Online Communities

New Blog Title Mouseover Popups at dbvt.com

I haven't done anything on my website for fun since I upgraded to CS2007 and was overdue on adding a new feature.  I've been using a titles-only display for recent blog posts since CS 2.1 because I think its the most efficient way to navigate and select posts, particularly since I blog a lot.  I knew one thing would make it better, mouseover title popups to display the post category and excerpt.

I get my news from Yahoo, and one of the functions I use all the time is the news item mouseover popups that display a photo and excerpt.  Here's an example from today's news.

 


This is a very efficient way to quickly get the gist of the news item, and the basis for my mouseover popups.  The end product on dbvt.com looks like this.


 


Now for the nerdy details, those of you thinking this is an ASP.NET AJAX mod are close, but sorry, no cigar.  I used the Community Server HelpToolTip Control with a custom WeblogPostList and WeblogPostData control with custom PopupImage, PopupImageCategory and PopupPostCategory properties.




I wanted to keep this really simple and do it quickly (I coded it in a couple of hours on Sunday night), so I didn't do anything fancy like search the post contents for an image.  Instead I pulled a random photo from my photo gallery for each post in my WeblogPostList datasource.  I've got a lot of Vermont and travel pics that work beautifully as popup window dressing.

Instead of modifying the data provider or the WeblogPost object for the new properties, I simply grabbed the random photo url and its album info and placed them into available post VideoImageUrl and VideoDuration properties.  All I needed were empty strings, after all.  I was seeing browser javascript errors using the WeblogPostTagEditableList CSBlog control in a PopupContentTemplate container, so I rolled my own Post Category display method and placed that in a waiting and willing post.VideoUrl property.  Because CS caches the random photo (thus, one photo was being displayed for the entire list; economical, but not what I wanted), I added a non-cached random photo method, but that was the extent of the custom coding.

I suppose I have to start writing blog post excerpts now...

Comments (5) | Post RSS RSS comment feed

Posted on 8/28/2007 8:04:32 PM by Dave Burke
Categories: .NET | Community Server

Related posts

Comments

Comments are closed

Copyright © 2008 Dave Burke Consulting  |  All Rights reserved.