This is a feature I've wanted to have for a long time, but until now I didn't know how to realize it. I wanted to have some kind of a notification area for new events on the blog, so that a returning visitor could immediately see what has changed since the last visit. And I definitely didn't want it on the sidebar, it had to be above the fold.
So the concept was in the back of my head for months, but I couldn't figure out how to make it look good. Then I came up with the idea of making it a popup window. Not a browser window, of course, just a layer that would show if there had been new events. Otherwise it wouldn't show up. Yes, that sounds like something. So with some digging and research, a bit of hacking and lots of debugging, here is the final result.
The window conveys quite a lot of information. It lists the three posts last to be published (or commented on). This way you have new posts and new comments in the same place. In the screenshot, the top entry is a post made recently. The bottom two are older posts that have received new comments.
In terms of appearance, I wanted to make the window active only if the user is using it, so on page load it is made partially transparent, onMouseOver it becomes more opaque, and onMouseOut it becomes more transparent again.
For a demo.. you have this blog. After 15 minutes of inactivity your session will expire and the window will go away. To bring it back delete your cookies from this domain (or use a different browser) and it reappears. The session is handled entirely with cookies, so for visitors who don't accept cookies, the window will always appear as if this were their first visit.
The opacity property is new in CSS3 and isn't uniformly supported (yet). I've tested the plugin with the following browsers.
- Firefox 1.0.1, 188.8.131.52
- Safari 3.0.3
- IE 5.0, 6.0, 7.0
Konqueror 3.5.7(opacity support is rumored to be on the way)
6.0.1, 7.0, 8.0.2, 9.0b3
In addition, there's a rather pesky layout bug in IE <7.0 that causes the height of the window (which is floating above the other content) to be added to the top of the page. If you fix it, please send a patch.
Also, I tried very hard to make sure it only consumes one query, which unfortunately made it very complicated. If you rewrite it in simpler terms, send a patch.
Required MySQL version: 4.1+
How to use
Download, unzip, install, append the css to your styles.
UPDATE: Added Netscape.
UPDATE2: MySQL compatibility.