Blogger Hints: What are Rollover Comments

Tuesday, February 17, 2009

What are Rollover Comments

At the bottom of this post you can see some examples of Rollover Comments. If you put your mouse on top of the user name the comment will appear below. If you click on the user name the comment will stay on the page when you move the mouse. Go ahead and give it a try!

3 comments:

Brian said...: See now you can read the comments people leave on your blog without changing the page. This invites much more interaction and discussion.; February 17, 2009 at 8:56:00 PM PST
Anonymous said...: It even works with OpenID comments!; February 17, 2009 at 8:57:00 PM PST
Brian said...: This comment has been removed by the author.; November 9, 2009 at 12:54:00 PM PST

Post a Comment

Get Rollover Comments Now!

Brought to you by 
<a href="http://bloggerhints.blogspot.com">Blogger Hints</a>

<div id="bcDebug" style="display:none">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function showElement(a) { a = this.id || a.srcElement.id; a = "c" + a.substring(1); $("#" + a).show() } function returnElement(a) { a = this.id || a.srcElement.id; a = "c" + a.substring(1); a = document.getElementById(a); a.style.display = a.vState } function toggleElement(a) { a = this.id || a.srcElement.id; a = "c" + a.substring(1); a = document.getElementById(a); if(a.vState == "none") { a.style.display = "block"; a.vState = "block" }else { a.style.display = "none"; a.vState = "none" } } $(document).ready(function() { $("#bcDebug").append("<p>The document is now ready</p>"); if(document.location.pathname == "/") { var a = [], d = $("a.timestamp-link"); $(".post-comment-link:not(.post-backlinks) > a").each(function(e) { a[e] = this.innerHTML.match(/(\d+)/)[0]; if(a[e] > 0) { var b = document.createElement("p"); b.className = "comment-footer"; b.id = "cf" + this.href.match(/postID=(\d+)/)[1]; b.innerHTML = "Comments By: <span>Loading...</span>"; this.parentNode.parentNode.parentNode.parentNode.appendChild(b); $('<iframe style="display:none" src="' + d[e].href + '" class="commenthide"></iframe>').appendTo(document.body) } }) }else try { parent.$("#bcDebug").append("<p>From Frame</p>"); var f = document.documentElement.innerHTML.match(/postID=(\d+)/)[1], c = new function() { this.authors = []; this.ids = []; this.comments = [] }; $(".comment-author>a[rel=nofollow]").each(function() { c.authors.push(this.innerHTML) }); $("dt.comment-author").each(function() { c.ids.push(this.id) }); $(".comment-body").each(function() { c.comments.push(this.innerHTML) }); parent.processAjax(parent.$("#cf" + f)[0], c) }catch(g) { } }); function processAjax(a, d) { a.innerHTML = "Comments By: "; var f = document.createElement("p"); a.parentNode.appendChild(f); for(var c = 0;c < d.authors.length;c++) {  var g = document.createElement("span"); g.innerHTML = ", "; var e = document.createElement("span"), b = $(e); e.id = "a" + d.ids[c]; b.css({"text-decoration":"underline", cursor:"pointer"}); e.innerHTML = "" + d.authors[c] + ""; b.bind("click", toggleElement); b.bind("mouseover", showElement); b.bind("mouseout", returnElement); b = document.createElement("div"); b.className = "comment-box"; b.id = "c" + d.ids[c]; b.innerHTML = "<i>" + d.authors[c] + " said</i><br/>" + d.comments[c]; b.vState = "none"; b.style.display = "none"; c > 0 && a.appendChild(g); a.appendChild(e); f.appendChild(b) } } function ajaxBad(a, d, f) { $("#bcDebug").append("<p>Failed Attempt</p>"); if(f < 3) { $(d).html("Network Error! Will retry in 2 seconds"); a = $('<iframe style="display:none" src="' + a + '" class="commenthide"></iframe>').appendTo(document.body) }else $(d).html("Network Error! Unable to update comments") } ;
</script>