benjamingolub.com

How To: Dynamic Slide Down Disqus Comments

RSSmeme now has dynamically generated slide down Disqus comments for every story (see it in action by clicking the comment link next to “Contribute”). I had to hack around a bit with the Disqus provided embed.js to get it working, here’s how:

Copy embed.js locally and remove the document.write() where the style information is written. Dynamically calling this script with the style writing will blank out your screen for some reason (I’m not a javascript expert so don’t ask me why).
Right BEFORE you call embed.js search for any div with the id ‘dsq-content’ and rename the id to something else (I used ‘dsq-content-old’). This is because thread.js (which is called by embed.js) searches for #dsq-content to attach the thread to. Really it should be looking for #dsq-content WITHIN the user defined (defaults to ‘disqus_thread’) disqus_container_id but alas it does not. I thought about copying thread.js locally and making this enhancement but decided against it.

So here is how my code looks (the hack() function is where I locally copied embed.js):

commentLink.click(function(e) {
    $('#dsq-content').attr('id', 'dsq-content-old'); //Rename the old #dsq-content so thread.js can find the new one
    var contribute = container.find('.details .contribute');
    var thread = $('#thread_' + id);
    disqus_url = 'http://www.rssmeme.com/story/' + id + '/'; //Set the required global variables for embed.js to work
    disqus_container_id = thread.attr('id');
    contribute.slideUp('normal');
    hack(); //Call embed.js minus the document.write()
    thread.slideDown('normal');
    return false;
});

There are some side effects that need to be fixed too:

Make sure that disqus_url and disqus_container_id are global variables. Yuck, I know, but I could probably get around this too by making them arguments to hack(). For now it works for me.
You need to make a stylesheet for the comments because you removed the document.write(). I copied everything out of it and placed it into its own stylesheet.
You need to modify the stylesheet because it looks for #dsq-content but I just had you change it to #dsq-content-old after you load the next set of comments! This should be easy, just change #dsq-content to whatever the next highest div that encompasses every disqus_container_id (which you’ll need for the slide down effect anyway)

That’s it! If you have any questions feel free to ask. You can look at my complete (production) javascript here.