Some enhancement to Brians Threaded Comments for WordPress

(本文暂无中文版)

Well, Brians Threaded Comments(BTC) from Brian Meidell is really a great plugin. Many famous WordPress blogger such as John Chow is a user of BTC.

I am going to integrate it into another blog ( actually a pure English blog with Chinese authors ). And this blog has already got BTC installed.

However, After installing and using it, there seems to be something strange. Or I may say, some bugs found 😦

First, in IE6, the collapse icon is not shown. I am sure it’s due to the foolish,old IE6, but we must know that lots of people are still using IE6.

Then, once you click “Reply to this comments”, the collapse icon doesn’t display correctly. I guess it’s due to the JavaScript code that handles the implementation of “class” related jobs.

So, I’ve just made some simple change to Brian’s code, and it seems working correctly now.

I even made some further changes to get some more improvement, for example, I killed the code that fix IE’s CSS bugs by using the “clearfix-solution”, I make the whole “title” be clickable to make the “collapse-job” more easy. You can see the Demo @ ifgogo.com (English) or just this blog (Chinese)

I will lately pub all these code with my WordPress Theme “TES” if you want it 🙂

( Attention: It needs jQuery, so if you don’t like jQuery, I am sorry that i cannot help )

Here is the changes:

  1. Use an image-file instead of Brian’s PNG-binary-output by PHP.
    First, download this image to your current-theme’s image folder ( we assume it’s called “image”, in fact, you can put it anywhere you want)
    Then, remove the CSS declaration from briansthreadedcomments.php and add them into your current theme’ CSS file:

    .comment .collapseicon, .collapsed .collapseicon
    {
    width:      11px;
    height:     11px;
    overflow:   hidden;
    background: transparent url(image/icons.png) no-repeat scroll 0 0;
    cursor:     pointer;
    margin:     4px 6px 0 0;
    }
    .collapsed .collapseicon
    {
    background: transparent url(image/icons.png) no-repeat scroll 0 -11px;
    }
  2. Use jQuery to handle all the JavaScript works. Here is the new functions rewritten with jQuery by me, you just need to include a jQuery.js(1.2.1) and then overwrite the old code between and in briansthreadedcomments.php
    function collapseThread(theId) {$("#"+theId).toggleClass("collapsed")}
    function expandThread(theId)   {$("#"+theId).removeClass("collapsed")}
    function onAddComment() {
    if (checkDocumentIntegrity()) $("#commentform").submit();
    }
    function moveAddCommentBelow(theId, threadId, collapse)
    {
    expandThread(theId);
    var $addComment = $("#addcomment");
    var $comment = $("#"+theId);
    if(!$addComment.length){alert("Sorry, the comment is currently closed"); return}
    if(collapse)
    $comment.children(".comment").addClass("collapsed");
    $addComment.appendTo($comment);
    $("#comment_reply_ID").val(threadId);
    $("#reroot").show();
    $("#comment").focus();
    }
    function checkDocumentIntegrity()
    {
    if($("#reroot").length &&
    $("#addcomment").length &&
    $("#comment_reply_ID").length &&
    $(".commentlist").length &&
    $("#comment").length &&
    $("#addcommentanchor").length)
    {
    return true
    }
    return false;
    }
    function reRoot()
    {
    $("#reroot").hide();
    $("#addcomment").appendTo($(".commentlist"));
    document.location.href="#addcommentanchor";
    $("#comment").focus();
    $("#comment_reply_ID").val("0");
    }
Advertisements

19 thoughts on “Some enhancement to Brians Threaded Comments for WordPress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.