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
Tags:

Related posts

Comments (5) -

8/29/2007 6:16:30 AM Permalink

Cool!

JAL |

8/29/2007 1:26:35 PM Permalink

Dave, it is bee-you-tee-full !!  Fantastic job and thanks for sharing. Your CS experimentation knows no bounds.

Dan Hounshell |

8/29/2007 1:53:06 PM Permalink

Ah, Dan.  You're so sweet!  Like I said, if it was a proper post image display mod it would have pulled the image directly from the post like your cool post list mod.  Thank you for the kind words.  They mean a lot!


daveburke |

9/13/2007 2:34:32 PM Permalink

David I had not visited you site for a while – the first thing I noticed was the Blog Title Mouseover Popups,nice job. I am also glad you posted on how you did this as I just started on a clients site Monday that wanted Mouseover Popup on their navigation links.

Kevin Tunis |

9/13/2007 3:24:27 PM Permalink

Kevin, Great to hear from you.  I see you're definitely active on CS Forums.  That's great.  Let me know if you have specific questions about the popup mod.

daveburke |


Powered by BlogEngine.NET 2.0.0.36
Theme by Dave Burke