Slightly Remarkable

Floating Comment Form

In 2005, well-known designer Jonathan Snook built a floating comment form into his blog design using CSS. ~~(Editor’s note: the archives at Snook’s Web site say “2006,” but I am fairly certain that this actually occurred in May of 2005. If you have the facts, please let me know in the comments.)~~ Unfortunately, because Snook has redesigned his blog several times since then, you can no longer see this functionality in action. The short version: his old design had an empty sidebar, where a comment form floated and could easily be used to add comments without needing to scroll to the bottom of the page. Convenient, stylish, effective, and you might even say revolutionary. I do not know why Snook has not opted to maintain this feature on his blog — perhaps it was too much of a struggle to maintain, or maybe he didn’t plan for it.

And that’s just the thing: planning a design is a critical part of developing how visitors will interact with it. If Snook’s current design didn’t have in mind the option to add a floating comment form, then naturally it would not make sense for him to implement such a form — it wouldn’t fit.

Likewise, since I developed this design for Slightly Remarkable several years ago (I can’t nail down the exact date, but it was sometime in 2006), I never considered the option of creating a floating or dockable comment form. Until the other day, when I decided that Snook’s idea was too indespensible to be forgotten like so many over-hyped “web 2.0″ ideas.

Now, let me say that I am not the first to have decided that a full redesign is unnecessary simply for the purpose of implementing a floating comment form feature. In fact, I believe that many feel this way. Derek Featherstone seemed to think so, which is why he wrote about the concept and how he implemented it into his design. Clever, yes?

I thought so, but I didn’t use Featherstone’s CSS/JavaScript. I opted for a slightly different route, requiring significantly less code (very little CSS, a tad JavaScript, and jQuery), excluding the use of the JavaScript library jQuery (which is actually fairly small, and I do intend to use it later — perhaps to include Ajax in my comment form — so it will be handy to have already cached). The script that I have written allows the comment form to appear normally, at the end of the list of comments, for users without JavaScript; for JavaScript users, however, it literally detaches the comment form from the page, hides it, and displays a nice little “Join the conversation” link button that floats in the bottom right-hand corner of the page. I may add icons to it to make it a little more noticeable, but that’s how it is for the time being. Let’s dig in, shall we?

The first step: modifying the comment form.

I am using Wordpress, so I’ll go ahead and show you how to do this using Wordpress. If you use any other software, you’ll have to do a little digging to find out where you can apply this modification — it’s probably fairly easy, though, since it’s very small change. In essence, you need only encapsulate your comment form <form> element in a <div>, and of course give that <div> an id. I called mine remarksform.

In Wordpress, this file is located in your /wp-content/themes/your-theme-name/comments.php file. With minimal PHP knowledge, you should be able to see where to place your <div> tag. I put mine just before the <h3> tag that says “Leave a Remark” and immediately after the closing </form> tag.

That’s all there is to modifying your (x)HTML. Technically, you could even achieve a dockable comment form without doing this, but I find it is a better idea to detach the entire <div> element, instead of just the <form>. Choose your poison.

Here’s an example of what your HTML might look like.

<div id="remarksform">
<h3 id="respond">Leave a Remark</h3>
<form action="http://slightlyremarkable.com/blog/wp-comments-post.php" method="post" id="commentform"><fieldset>
<legend> </legend><br><br>
<label>Name (required) <input type="text" class="input_text" name="author" id="author" value="" size="22"></label>
<label>Email (required) <input type="text" class="input_text" name="email" id="email" value="" size="22"></label>
<label>Web site <input type="text" name="url" id="url" class="input_text" value="" size="22"></label>
<label>Your remarks<br> <textarea name="comment" id="comment" cols="50" rows="10"></textarea></label>
<p class="commentnotes">Note: HTML is allowed. (<strong><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </strong>).</p><br>
<label><input name="submit" type="submit" id="submit" value="Submit Comment"></label>
<input type="hidden" name="comment_post_ID" value="220" class="hide">
<div class="hide"><input type="hidden" id="_wp_unfiltered_html_comment" name="_wp_unfiltered_html_comment" value="279925c214" /></div>
</fieldset></form></div>
Download this code: formexample.html

The second step: the CSS.

I’m going to outline the CSS that added to my main style.css file. Mileage may vary; you can modify this to your own accord. This may not make sense now, but it will make sense once we get to the meat of the floating comment form feature. For now, create the following CSS (replacing “remarksform” with the id that you gave your comment form <div>).

#remarksform {
width: 60%;
margin: 0 auto;
}
#sfloatform {
border: solid 1px #333;
position: fixed;
right: 5px;
bottom:0px;
background: #000;
width: 20%;
}
a.flink {
padding: 10px;
text-decoration: none;
color: #999;
display: block;
text-align: center;
}
#remarksform a.flink {
display: inline;
font-size: small;
}
a.flink:hover {
color: #fff;
font-weight: bold;
}
Download this code: styleadditions.css

Next up: jQuery

As I mentioned before, we’re going to make all this magic happen in just a few lines of code, but it’s going to be based upon the incredible jQuery JavaScript library, so go download it, and put it on a location on your server that you can access. I put mine in a js subdirectory in my theme directory. It looks like this: /wp-content/themes/slightlyremarkable3/js/jquery.js. Be sure to include this code in the <head> tag of your header.php file in your theme directory. Here’s what it might look like.

<script src="/wp-content/themes/slightlyremarkable3/js/jquery.js" type="text/javascript"></script>

Finally: the real stuff

So now that all the pieces are in place — we have the HTML as we need it, the CSS for styling elements (that don’t even exist — yet!), and the JavaScript library uploaded and in our header — we need to actually write a script that will produce the feature we’re aiming for: the floating comment form.

Create a new JavaScript file — I called my “functs.js,” since I plan to use it for general functionality later in addition to the comment form, but you can calls yours whatever you want. I also placed this file alongside jQuery in my /themes/your-theme-name/js/ directory. Below is the JavaScript file that does all of the magic for my floating comment form. I’ll explain it after you get to see it.

$(document).ready(function (){
commentform = $("#remarksform");
if(commentform.is("div")){
commentform.css({
position: "fixed",
width: "40%",
left: "59%",
bottom: "1%",
background: "#000",
border: 'solid 1px #333'
});
commentform.children("h3").append("<a href=\"#\" class=\"flink\" id=\"sfloatclose\">(Close me)</a>");
commentform.hide();
$("BODY").append("<div id=\"sfloatform\"><a href=\"#\" class=\"flink\">Join the conversation!</a></div>");
sfloatform = $("#sfloatform");
sfloatclose= $("#sfloatclose");
sfloatform.click(function (){
$(this).hide();
commentform.show('fast');
return false;
});
sfloatclose.click(function(){
commentform.hide('fast');
sfloatform.show();
return false;
});
}
});
Download this code: functs.js

All right, so 30-some-odd lines of code. Not bad, huh? Let’s break it down.

Line 1 is your standard “do not execute JavaScript until the DOM has completed loading” command. This is very common and ensures that our elements are in place and actually exist before it attempts to access or otherwise manipulate them. More information about the DOMReady function is available in the jQuery Wiki.

Line 2 declares a variable, called commentform, to reference the <div> element that encapsulates our comment form. Remember earlier I told you that I called mine remarksform; be sure to change this to your <div>’s id, otherwise this will not work.

Line 4 checks to ensure that you are using a <div> element. If you are not, you will need to change this to reflect it. I recommend the <div> for semantics. The reason this line even exists is simple: this <div> element is not present on pages that do not have a comment form — you do not want this code to run on a page that does not have a comment form, so this if statement dictates that the code should only run if your comment form can be found in the (x)HTML code on the current page.

Lines 6-13 apply CSS code to the commentform object. You could alternatively change the class name and apply these CSS rules to your stylesheet (which may be faster, but I haven’t done any testing, since this seems to work fine — anyone that does test it, be sure to let me know what’s better).

Also, notice that one of the CSS rules applied is the position: fixed style. This will not work in browsers that do not support position: fixed. This naturally means that the comment form may be broken or completely unusable in Internet Explorer 6. But, really, who uses that anymore? If it becomes a problem, I’ll update the script later with IE6 support.

Lines 15-16 create a “close me” link and apply it as part of the h3 heading. If you do not have an h3 element titling your form, then you will need to change this to another element above the form that you can attach a “close me” link to. Notice that the “close me” link also has a class called “flink.” You can change this as you please, but remember that you will need to modify your CSS code as well. Line 16 uses the jQuery hide() function to render the comment form (in its entirety) invisible. This is how we have effectively “detached” the entire comment form area from the page.

Line 18 creates a link button that will be used to evoke the comment form. We don’t want to have the comment form floating around on top and in the way of everything, or hogging up screen real-estate unnecessarily, so of course we’re going to have it hidden by default, and then have a pleasant little link button that will bring it up when it’s needed. This is the opposite of the “close me” function. We have appended this link to the end of the body of our document. It has position: fixed already applied because of our CSS rules.

Lines 20-21 declare variables to identify (1) the sfloatform object (the link button we created in line 18) and (2) the sfloatclose object (the “close me” link that we attached to the h3 element earlier).

Lines 23-27 set the onClick event of the sfloatform object (the link button, line 18). Upon clicking the link button, it hides itself, shows the commentform object using jQuery’s default smooth transition (this can be controlled, by the way, and made to appear however you like!), and returns false so that the link doesn’t jump you to the top of the page (because its href is set to “#”).

Lines 29-33 set the onClick event of the sfloatclose object (the “close me” link, line 15). Upon clicking the “close me” button, the entire commentform object is hidden (once again, using jQuery’s default smooth transition, and this is customizable to different kinds of transitions such as fading out), the sfloatform object (link button, line 18) is once again revealed, and again the function returns false to avoid page-jumping.

Clean up

That’s about all there is to it. Do note that this script probably makes your comment form look terrible in Internet Explorer 6 or earlier, so if you’re aiming to continue supporting older versions of IE6, then the script will require some modifications. I’ll be happy to update the script with an IE6-compatible version if I get enough requests for it. Otherwise, enjoy the script. If you have questions, post a comment (using the notably amazing comment form). I’m also open to suggestions, such as better transitions or other, more intuitive ways of using the floating comment form idea.

Update: Jonathan Snook has imparted his wisdom by confirming April 2005 was when the floating comment form became a reality. Links updated accordingly. Thanks, Jonathan.

Update 2: I booted up VMWare for kicks, popped IE6/WinXP open to see what abomination IE6 has made of my Web site. It’s bad — real bad — but the comment form does actually show up, so besides looking like a pile of crap, the Web site actually works (with JavaScript errors). Well, at least it’s not a big deal at the moment.

Update 3: Ideas for changes to my script follow.

IE6 support (speak of the devil)
Class-based link button functionality (any (x)HTML element with a specific class-name will evoke the floating comment form)
Ajax support
Replying to specific comments (via Ajax)
A Wordpress widget/plugin

January 25th, 2009 | 8 Remarks