On Djangobook, they used to have this interesting commenting mechanism on their book’s pages:
Each paragraph in the book could have comments, by use of a JavaScript commenting system which would display the amount of comments on each paragraph when you hovered over them with the mouse. You could also click on the little bubble which displayed the count, and leave a comment of your own.
A while ago, Pádraic Brady was looking for a similar system. This got me thinking about it again… and of course I had to try implementing it myself!
The script itself is relatively simple. It uses dojo’s behavior functionality to add hovers to specific elements found by a query:
var bc = new CU.widget.BlockComments(); bc.setComments([ ['Comments for block 1'], ['Comments for block 2', 'Block 2 has two comments'] ]); //We want to make #main element's P's comments visible bc.applyTo('#main p'); |
Download the source for CU.widget.BlockComments
It also provides an event that you can connect to with dojo.connect, onCommentsCountClicked, which gets the block index and its comments as parameters. This could be used to do simply redirects to comment add pages, or ajax commenting systems.. you name it.
Also, here’s a small example of it in action. Do note the CSS styles used, as it relies on them to make it look nice. You could for example replace the declarations for the commentsbubble and make it look like a small text bubble or something nice, rather than a black box =)