Back to blog

How to reverse the order of comments on Confluence pages

January 24, 2012 - Posted in Uncategorized Posted by:

Tags: , , ,

From a recent comment on Atlassian Answers, Norman Hills asked “Is it possible to reverse the order in which comments appear?

This is straightforward if done client-side, so I’ve written it up here.

If you just want to reverse the order for good, browse to Confluence Admin | Look & Feel | Custom HTML

Add this to At the end of the HEAD:

<script>
  AJS.toInit(function(){
    $comments = AJS.$('#page-comments'); 
    $comments.children().each(function(i,li){$comments.prepend(li)});
  });
</script>

Job done.

For extra points

If you want to be able to reverse the order, then it’s slightly more effort.

Browse to Confluence Admin | Look & Feel | Custom HTML

Add this to At the end of the HEAD:

<script>
  function reverseCommentOrder(){
    $comments = AJS.$('#page-comments'); 
    $comments.children().each(function(i,li){$comments.prepend(li)});
  }
  
  AJS.toInit(function(){
    // reverse the comment order
    reverseCommentOrder();
  
    // add a link to reverse the order
    AJS.$('#comments-section-title').append('<a id="page-comments-reverse" href="#">(Reverse Order)</a>');
    AJS.$('#page-comments-reverse').css({ 'color':'#999','font-size':'0.65em'})
                                   .click(function(e){
      reverseCommentOrder();
      e.preventDefault();
    });
  });
</script>

That’s all. Have fun.

David is a senior developer and solutions architect at AppFusions based in Nottingham, England.

AppFusions solves mixed-technology integration problems. We bring engineering and business workflows together, you can work better, faster and smooter.

AppFusions is headquartered in San Francisco, California and works with enterprise vendors and partners such as IBM, Jive, DropBox, Box and Atlassian.

9 Comments

Aviram 2 years ago

Hi,

I just tried this on confluence 3.5.13 but this appears to break the rich text editor when replying a comment.
also, posted here:
https://answers.atlassian.com/questions/28999/is-it-possible-to-reverse-the-order-in-which-comments-appear?page=1#43385

Reply

kevin 2 years ago

hi David,
I tried this on confluence 4.17 ,while reply a comment,it don’t work,it cann’t type a word in the text editor~~is there a solution for this ?

Reply

David 2 years ago

Hmm. The best thing to do then is to prevent the reversal when editing comments. This seems to do the trick on Confluence 4.1:

<script>
  AJS.toInit(function(){
    if (AJS.$('meta[name=ajs-form-name]').attr("content") != "editcommentform"){
      $comments = AJS.$('#page-comments');
      $comments.children().each(function(i,li){$comments.prepend(li)});
    }
  });
</script>
Reply

sander 2 years ago

Hi David! Their is not solution yet for Confluence ondemand that you know?
Thanks,

Sander

Reply

David 2 years ago

No, sorry — there’s no solution for OnDemand I’m afraid.

Reply

Scott Brown 2 years ago

How can you put the comment box on top of the actual comments? With the reversal, it seems more natural to have them up top.

Reply

David 2 years ago

@Scott: Try adding this before e.preventDefault();

AJS.$('#comments-section').prepend(AJS.$('#comments-actions'))
Reply

Chris 2 years ago

Hi David,
I’d like to do the same as Scott, move the comments box to the top. The descending order snippet works great, but I’m afraid I’m having trouble with the comment-box-at-the-top snippet. Here’s what I put in:

function reverseCommentOrder(){
$comments = AJS.$(‘#page-comments’);
$comments.children().each(function(i,li){$comments.prepend(li)});
}

AJS.toInit(function(){
// reverse the comment order
reverseCommentOrder();

// add a link to reverse the order
AJS.$(‘#comments-section-title’).append(‘(Reverse Order)‘);
AJS.$(‘#page-comments-reverse’).css({ ‘color’:'#999′,’font-size’:’0.65em’})
.click(function(e){
reverseCommentOrder();
AJS.$(‘#comments-section’).prepend(AJS.$(‘#comments-actions’))
e.preventDefault();
});
});

Descending order still works, but the comment box remains stubbornly at the bottom.

Reply

David 2 years ago

OK, I’ve just tried it on Confluence 4.3. This moves the edit box to the top of the comments:

AJS.$('#comments-section .section-header ').after(AJS.$('.bottom-comment-panels.comment-panels'))

Have a look in Firebug or similar and if this fails for your version.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>