Jan 02

New ExpressionEngine extension: Scroll to new comment

Categories:
Tags:
, , ,
Published:
8:44pm on Friday 2nd January, 2009

While developing this incarnation of The Watchmaker Project I came across one glaring omission in my new CMS of choice, the awesome ExpressionEngine.

Sure, the guys at EllisLab like to tell us how flexible their application is - how it can run multiple sites, online shops, enormous government portals - but for something that started off as a blog engine, why doesn’t it offer the ability to return to the comment you just added? It was frustrating, so I dug into the core code to see what could be done. Luckily there was a hook in just the right place for a shiny new extension. And here it is.

Update 27/01: At the prompting of Nathan Pitman of NineFour, I’m moving this and all future code posted here onto the free source control host, GitHub. It makes sense - this way I can make updates to posted code without having to update blog posts.

Scroll To Comment

Like all ExpressionEngine extensions, the steps to get this up and running are pretty simple:

  1. Download and unzip the files from the package
  2. Place the ext.scroll_to_comment.php extension file in the /system/extensions folder of your EE install
  3. Place the lang.scroll_to_comment.php language pack in the /system/languages/english folder
  4. Visit your EE Control Panel, and navigate to Admin > Utilities > Extensions Manager
  5. Enable the new extension
  6. Visit the ‘Settings’ page to change the prefix setting if necessary
  7. You’re good to go!

A few quick words on CSS id attributes

As noted a while back by Veerle, if you want your code to be 100% W3C valid you can’t start a CSS id attribute with a number. That is why this extension provides the option of including a prefix to all comment ids, which you will have to match up with your (X)HTML markup - here’s mine:

{exp:comment:entries sort=“asc”}
<li id=“c_{comment_id}”>
<h4><strong>{url_as_author}</strong> at »
{comment_date format="%g:%i%a"} on {comment_date »
format=”%j%S %F, %Y”} <a href=”#c_{comment_id}”> »
#</a></h4>
<blockquote>
{comment}
</blockquote>
</li>
{/exp:comment:entries}

All the comments on my site are prefixed with “c_” - and, as long as I also use that in my extension settings, every time anyone submits a comment the page will reload displaying their new comment.

Visit GitHub to download files

What is GitHub? GitHub is a web application that uses the version control software Git to allow its members to manage their code online. I am hosting the files for this article there so that any bugfixes or improvements I make can be found in one central location.

I'd love to hear what you think - please use the form below to leave your comments. Some HTML is permitted: b, i, em, del, ins, strong, pre, code, blockquote, abbr. URLs or email addresses will be automatically converted into links.

Commenting is not available in this weblog entry.
  1. Nathan Pitman's Gravatar

    Nathan Pitman at 9:24pm on 3rd January, 2009 #

    Great little extension Matthew, I’ll certainly be giving this some use in upcoming projects! Look forward to further extensions from you in the future! :)

  2. Luke Dorny's Gravatar

    Luke Dorny at 7:02am on 15th January, 2009 #

    the prefix idea is a handy fix.
    While creating various FAQ pages of differing styles by hand over the years, I quickly found out that classing can’t begin with numbers, but it is an obscure rule not readily known by most coders.

    Installing!

  3. Indranil's Gravatar

    Indranil at 2:42pm on 15th January, 2009 #

    This is a great extension! I’ll definitely be using this in an upcoming website.

    Thank you. :)

  4. John Faulds's Gravatar

    John Faulds at 2:48am on 18th January, 2009 #

    Maybe they could incorporate it into their forum module too - always seemed odd to me that your forum topic subscription email could point you at the latest reply, but when replying on the actual forum, you always get returned to the top of the page you’re on.

  5. Front's Gravatar

    Front at 5:27pm on 6th May, 2009 #

    Lovely stuff Matthew, many thanks for this! We <3 you ;)

  6. Craig Allen's Gravatar

    Craig Allen at 3:20am on 22nd May, 2009 #

    Top notch. Would it be possible to make it work for previewed comments as well?

  7. Matthew Pennell's Gravatar

    Matthew Pennell at 7:02am on 23rd May, 2009 #

    Hi Craig, thanks for the suggestion - I’ll get onto that as soon as I have time. I’ve also added your suggestion to a new feature requests page on the GitHub wiki:

    http://wiki.github.com/matthewpennell/mgp.ee_scroll_to_comment.ee_addon/feature-requests

  8. Laisvunas's Gravatar

    Laisvunas at 8:03am on 6th June, 2009 #

    Thanks for the great extension.

    It seems that I found a bug.

    Scroll to Comment extension does not work correctly when a user submits a second comment after just submitting the first one. Say, the first comment’s number is 190 and the page’s URL is

    http://mysite.com/index.php/blog/entry/

    then after submission the URL will be

    http://mysite.com/index.php/blog/entry/#comment190

    and after second submission URL will be

    http://mysite.com/index.php/blog/entry/#comment190#comment191

    It seems to me that when redirection URL is being created it should be checked if the last URL segment contains the prefix specified in settings and if it does, that last URL segment should be removed.

  9. Markus Stolpmann's Gravatar

    Markus Stolpmann at 10:29am on 6th June, 2009 #

    Laisvunas, I noticed some inconsistent behaviourr that might be related - had the impression that the slash before the #c_xxx may be causing some side effects. I’m not sure however if the extension is the cause or if I have to change my weblog settings somehow.

  10. Matthew Pennell's Gravatar

    Matthew Pennell at 1:17pm on 6th June, 2009 #

    @Laisvunas: From my testing, I don’t experience the bug you describe - submitting a second comment works as expected straight after submitting a first comment.

    However, I’ll update the extension to filter out any existing in-page anchor from the redirect target - that should solve your problem.

  11. Laisvunas's Gravatar

    Laisvunas at 7:37am on 7th June, 2009 #

    It would be great to have a possibility to have a possibility to form URLs without # symbol. That is, instead of forming URLs as this

    http://mysite.com/index.php/blog/entry/#comment190

    to form them as this

    http://mysite.com/index.php/blog/entry/comment190/

    Such possibility would be handy in some cases (e.g. when there are on the page elements having CSS “position” set to “fixed” or in cases when javascript onload makes some change of CSS rules). In these cases URLs having # symbol cannot scroll marked element to view correctly; only some custom javascript that parses URL can.

  12. Husker's Gravatar

    Husker at 7:10pm on 25th June, 2009 #

    Thank you! Really great!

  13. Laisvunas's Gravatar

    Laisvunas at 9:26am on 23rd August, 2009 #

    Hi Matthew,

    I published Comment Location plugin which can be used together with Scroll to comment extension to support pagination.

  14. Jules van Schaijik's Gravatar

    Jules van Schaijik at 1:50am on 10th November, 2009 #

    There seems to be a conflict between this extension and Mr. Wilson’s Weever, which enables nested comments. Very frustrating because nested comments make “scroll to comment” especially desirable.

    Is there a solution for this?

  15. Bedava Oyun indir's Gravatar

    Bedava Oyun indir at 12:21am on 17th December, 2009 #

    css code perfectly. Scroll codes beautiful. and useful. Thank you for good information.

  16. Pasquale Abate's Gravatar

    Pasquale Abate at 6:48pm on 21st June, 2010 #

    You can not believe how long ive been looking for something like this. Browsed through 10 pages of Google results without finding anything. Quick search on bing. There this is…. Really gotta start using that more often Thank you.