I’m not one to typically write about 3rd party services, and what I think of them. But folks, I believe this merits a post. As some of you may know, I have acouple of sites out there, http://www.politicalwind.net and http://www.newdgamez.com, both of which use Intensedebate as their commenting system. Along with that, I also like to use one of many widgets they offer, the “Latest Comments” widget. Now, for the longest time, I’ve just created the div that houses that script, and put a height of 200px, and overflow to auto. This as you might know, will render the OS’s default scroll bars, as seen below.
So for awhile, I was okay with this. Didn’t look the prettiest, but got the job done, until one day, a came accross a pretty cool Jquery plugin, jScrollPane. Wow, that would really help the layout and make it look a little nicer. It’s fairly easy to use, just add the css declarations to your current css file, and in the document ready function, simply apply the jScrollPane function to your selector, like so:
$('#LatestComments .CommentContainer').jScrollPane();
But this is where I ran into problems. Since the actual html markup is not inserted into the Dom until the script executes, there was no way for me to properly apply the jScrollPane function to it. Even when calling it inside the doc ready function, it wouldn’t work. I needed some way to know, when the script finished loading. So, not expecting to hear any reply whats so ever, I emailed the support teams @ IntenseDebate, and told them of my issue. Two weeks later or so, and still no reply.
Boom, I got the email last night. The first started off with an apology on how long it took them to get back to me, but on top of that, they added a new call back function to be called when the script finishes loading.
id_recent_comments_loaded
Now that their dev team added this callback function, I now know when I can apply the jScrollPane function to the comments. Side note, even with this new function, after applying the jScrollPane to my selection, which contained the comments, it would force the comments to open in the same window, with just the comments only. Weird issue here, but have an idea to what the issue was. When looking at the source via firebug, I could see that at the bottom of the IntenseDebate html markup, was a script tag. And for some reason, if I removed it, then applied the jScrollPane, it would render as one would expect. If I left the script tag in there, it would open my index page with the intense debate head and body tags.
So, here’s my solution. And remember, I’m just a amateur here folks, not an experienced jquery developer, so please, if you see something that I can optimize, let me know.
$(document).ready(function() {
id_recent_commenats_loaded = function() {
var htmlStr = $('#IDWidget2').html();
$("#LatestComments .CommentContainer").empty();
$("#LatestComments .CommentContainer").append("<div id=IDWidget2 class=idw-container></div>");
$("#IDWidget2").append(htmlStr);
$('#LatestComments .CommentContainer').jScrollPane();
}
});
Again, big thanks to the IntenseDebate team for doing this. See below on how it looks now, or shoot, just visit http://www.newdgamez.com to see it in action.
