Remembering Last Comment Read on Movable Type

| | 1 Comment

Here is another javascript blogging trick for you. We’ve been using it for many years on the Panda’s Thumb, and we recently debugged a problem some browsers had with it. Like my previous ones, this one was recently updated to work with the jQuery javascript library.

In this trick, whenever your users read an entry via the ‘#comments-new’ anchor, their browser will jump them to the last comment that they read. The browser knows which comment to jump to because it store a cookie last time they visited the page. To get this to work with Movable Type 4 you will need to first upload jquery.js and modify your header template module. Insert the following line between the <head></head> tags.

 <script type="text/javascript" src="/URL/TO/jquery.js"></script>

At same time it might be best to replace MovableType’s use of the onload command with a call to jQuery’s ready event. Simply add the following lines before the </head> tag:

<MTIf name="body_onload">
<script type="text/javascript" language="javascript">
//<![CDATA[
$(function(){<$MTGetVar name="body_onload"$>});
//]]>
</script>
</MTIf>

Also remove the <MTIf name="body_onload">... tag from the <body> tag. This should provide better performance and compatibility with the rest of my javascript tips.

Now for the magic. Edit your Comments template module and add the following text before the first <MTComments> tag.

<mt:Unless name="comment_preview_template">
<div id="comments-new"></div>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(function(){
	var now = new Date();
	fixDate(now);
	var cook = getCookie('last_comments_a');
	var hid = (cook) ? eval(cook) : new Object();
	for(var k in hid)
	{
		if(hid[k][1] < now )
			delete hid[k];
	}
	now.setTime(now.getTime() + 7*24*60*60*1000);
	var cid = 0;
<mt:Comments lastn="1">
	cid = hid[<mt:EntryID/>];
	hid[<mt:EntryID/>] = [<mt:commentid>, now.getTime()];
</mt:Comments>
	var src = (!Object.prototype.toSource) ? objSource(hid) : hid.toSource();
	setCookie('last_comments_a', src, now,'/','','');
	if( window.location.hash == '#comments-new')
		window.location.hash = (cid) ? '#comment-' + cid[0] : '#comments';
});
//]]>
</script>
</mt:Unless>

And finally, edit your Entry Metadata template module and replace #comments with #comments-new.

So now whenever someone clicks the comments tag, it will direct them to #comments-new which will trigger the script to jump them to the last comment read or the first comment on the page.

I was recently made aware of the fact that this solution was broken on Opera and maybe other browsers. Therefore, you may want to add the following lines to your Javascript index template to work around limitations of such browsers.

function objSource(obj) {
	switch (typeof obj) {
	case 'number':
	case 'string':
		return obj.toString();
		break;
	case 'object':
		var str = [];
		switch(obj.constructor) {
		case Function:
			return 'null';
		case String:
		case Number:
			return obj.toString();
		case Array:
			var i=0,j=obj.length;
			while(i<j) {
				str.push(objSource(obj[i++]));
			}
			str=['[',str.join(', '),']'];
			break;
		default:
			for(var i in obj){
				var v = objSource(obj[i]);
				if(typeof(v) != 'undefined') {
					str.push(objSource(i)+':'+v);
				}
			}
			str=['({',str.join(', '),'})'];
		}
		return str.join('');
	default:
		break;
	}
	return 'null';
}

And knowing is half the battle.

1 Comment

Finally I found this continuation. Very thanks for posting it!

About this Entry

This page contains a single entry by Reed A. Cartwright published on March 6, 2008 8:00 AM.

New Toy was the previous entry in this blog.

What's that Saying? is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Archives

Powered by Movable Type 4.37