Comments: Behind the Scenes
Wow. My comments system has been extremely well received. As a result, a few people have asked how I did it.
Position fixed
The system was originally intended to be CSS only using position:fixed on the div that contains Post a Comment. This is great for browsers that support it and pretty much useless for any browser that doesn't. There's one caveat on using fixed positioning that I'll get to later on.
Here's the CSS snippet that started it all:
#postcomment.sidebarfixed { width: 215px; position:fixed; top: 50px; left:548px;}
* html div.sidebarfixed { width: 215px; top: 50px; left:548px; position:absolute; }The first declaration specifies a width for the container and the top and left points. When using fixed positioning, top and left are from the corner of the viewport and not the corner of the web page. This creates the "stickiness" factor.
Then I used the ol' star-html hack for Internet Explorer to give it absolute positioning. What this meant was that for Firefox and any other browser that supported fixed positioning, the comment box would stay on the page as your scrolled down. For IE, this meant it was stuck at the top of the page and it wasn't going anywhere. (My original implementation actually had the comment box staying in it's traditional spot underneath the comments.)
Since I didn't expect too much traffic or many comments, my little proof of concept was okay. But with the comments pouring in, I decided to add scroll support so that IE users didn't feel left out or wondering what everyone was talking about.
Our friend JavaScript
Enter JavaScript. I added a function to run every time the user scrolled the page to reposition the Post a Comment.
window.onscroll = window_onscroll;
function window_onscroll(){
var el = document.getElementById('postcomment');
if(typeof(document.media)=='string')
{// only do this for ie
var s;
// scrolling offset calculation via www.quirksmode.org
if (self.pageYOffset){s = self.pageYOffset;}
else if (document.documentElement &&
document.documentElement.scrollTop) {
s = document.documentElement.scrollTop; }
else if (document.body) { s = document.body.scrollTop; }
el.style.top= s + 30;
}
}The code taken from Quirks Mode will determine how much the page has scrolled. Then, I adjust the top position of my div along with an offset. That's all there was to it!
For those wondering why I'm checking the type of document media, it's a DOM-based browser check. A little more foolproof than user agent string checking.
Horiontal Scrolling with Fixed Positioning
One of the problems discovered in Firefox (and I assume any other browser supporting fixed positioning) was that if the browser was sized too small for the content and the user scrolled sideways then the div would slide along with it and out of my design. Ick.
Let's bring in our friend JavaScript again. This time, we'll have it reposition our Comment box when the user scrolls sideways.
I added the following into my window_onscroll function:
if(typeof(window.print)=='function')
{// only do if not ie
var x;
// scrolling offset calculation via www.quirksmode.org
if (self.pageXOffset){ x = self.pageXOffset;}
else if (document.documentElement &&
document.documentElement.scrollTop){
x = document.documentElement.scrollLeft; }
else if (document.body) { x = document.body.scrollLeft;}
el.style.left = (548 - x) + "px";
}Again, we use some DOM-based browser check but this time to make sure we're NOT Internet Explorer. Then we have it reposition the Post a Comment functionality. Using the scroll event in Firefox can be troublesome since it currently only fires when a user clicks on the scrollbar and drags it. Any other action doesn't seem to work (like using the scroll wheel). This ended up working well for me since it's less likely people will scroll horizontally with any other method besides the scrollbar.
That's all there is to it!
Conversation
I'm a huge fan of position: fixed and I enjoy your site :)
Is your website really supposed to be 4 columns? In Safari, it has 4 columns, where the 4th column on the right is comprised of the Favourite Posts, Syndicate, and Bookmarks link lists.
On the front page, that leaves the third column pretty much empty, except for the search bar.
Peter: Yup, it's supposed to be four columns. :) It does leave the third column on the home page a little light but with a lot of my traffic coming from RSS, links to specific articles, or search engines, the home page is no longer the focal point.
$this->normalizeEntities16bit("25105")$this->normalizeEntities16bit("26159")$this->normalizeEntities16bit("20013")$this->normalizeEntities16bit("22269")$this->normalizeEntities16bit("20154")
fine!
Hi Jonathan, you've certainly come a long way with your fixed comment design! It was cool when I saw the first prototype and now, I love it. The ability to scroll and read and refer to sections on a page will no doubt pay off for users.
BTW, how's your GainCMS coming along? I enjoyed reading all the ins an outs of your travels there, might be me but I haven't noticed an update for a while?
Anyway congrats on an excellent innovative design.
Bin beeindruckt. Das ist eine Klasse L?sung f?r das Kommentieren von blog-Eintr?gen.
I guess you're just going to have to live with it being all jiggly in Win IE. I use Firefox myself, though, so I don't care.
Very cool.
(I haven't tried this yet. Here it goes..)
No real content here, I just wanted to test out the comment system everyone is raving about... sorry!
this is cool, but doesn't work for those stuck with Mac OS 9 and IE 5. The contents of this form slip over the right column, as you scroll sideways.
I know, IE5 Mac, but you should be aware of that, if you wish to use this technique.
Kudos, anyway.
Just testing to see what the hub-bub is all about
Very nice. I've always wondered how to do something like this.
Personally, I'm no big fan of position:fixed as it has a tendency to slow down pages a great deal. Until browser support is fixed, I tend to shy away from it myself.
A nice concept though. :)
Wow! Probably the most ingenious commenting system I've seen so far...
beautiful!
Can I aim at a comment and post a reply to a certain comment like that?
wow, very nice
ads
Another method for fixing the position of an element on Internet Explorer is the the IE-only feature "expression": top:expression(body.scrollTop + "px"); position: absolute;
actually it degrades OK in IE5, which is what I am posting from. A little untidy, the text I am now typing is being written over the top of the 'name' input box above. still, nice concept and i would stick with it.
is this ajax?
seems like you are using ajax technique...is it true ?
You know what would be a REALLY cool addition? To make it possible to quote the comment the arrow points at. I think it even should be possible using some very tricky (and probably quite cross-browser-unreliable) JavaScript.
hahaha! Ajax! no, its that arcane technology called css?
this is crap, its totally distracting and I hate fixed position geocities type crap
Wow - this is the second really fabulous thing I've seen from you in the space of two weeks - first a fabulous colour tool that does the contrast testing while you're at it, and now a really interesting way to do comments.
Keep up the good work! I'll be coming back to see what else you get up to :)
I used IE7 to do some fixed positioning stuff, not to shabby I might add.
Is there a way to make it position at the bottom of the screen instead of the top? I was looking for something similar but it has to be positioned at the bottom of the screen. Nothing that I have tried works in IE and I really don't want to use frames. :(
nice!!
Just so that it's clear, there is no AJAX being used in the comments area. Just some CSS and JavaScript. (Although, I did hotwire the search functionality with it but that's another story. ;) ).
Just testing
I came across your site via 456 Berea Street. You have a very nice site!
I loved this article explaining your comments system. For the new web developer such as I this has been very valuable!
Beautiful site! Awesome way to break out of the mold. I definitely respect that.
Testing, 1,2,3
Quite neat, compliments!
Nice design, just testing to see how it works now :)
caseyg
This is great. Thanks for sharing!
Hey, your url box doesn't auto http. Not sure how, but could that be a security issue?
Good work Jonathan!
The rain in spain falls mainly on the planes.
Great job. Best I've seen. One small (very small) comment, the commentsmetadata top dotted line is one pixel lower than the comments div in both IE and FF
da bomb!
Awesome idea! People will be ripping you off for months!
The effect of position:fixed is really awesome, The comment preview is nice stuuf too.
I agree that people will use this idea all around.
I may be wrong, but to be AJAX, he would have had to use XML somewhere and use the HTTPonRequest (or something like that) function.
Then it would have been AJAX.
This is a wonderful system! Congratulations!
testing too
Very nice, how long before it is everywhere?
damn cool! well done mate, a fantastic design throughout your site!! *applauds*
Interesting!!
very nice!
The comments thingy doesn't work in IE 6(i'm posting this with FireFox)
Nice site by the way :-)
oeps
didnt read well i suppose....
the comments thing in IE6 is on the bottom of all the comments ?!
odd ... shouldn't work
<iframe src="http://www.yahoo.com"></iframe>
Just seeing what the fuss is..
The way it jiggles in IE reminds me of the Geocities watermark, back when Geocities did stuff like that. (It kinda died out when Yahoo bought them.)
cool in theory, not sure I agree with the usability stance, fixed sites scroll awful in FF mac, and as mentioned above are atrocious in IE using any method Ive seen so far, IE7, the js tom foolery etc... If fixed was supported in IE then I'd give it a shot, but even on the mac side being a FF user, when sites use fixed and I have to scroll alot, I just wont visit the site anymore because of it scrolling like a comb thru tangled hair...
Nice new concept you got here :)
yeah too bad about IE.
clint dont be an asshole
No idea what you're talking about, clint. Page scrolls wonderfully smooth for me. (Although I admit, it drives my Athlon64 to 60% CPU usage.)
This is beautiful. I have seen similar things on other sites, but this is the first time I see it in pure XHTMl. And I love the way that the page is rendered when the CSS is removed. It makes the page work well even in my old cellphone. However, in both Firefox and IE, it drives CPU usage up quite high.
test comment!
cool
Inoventive front-end design with
position: fixed.And a live preview?
And ajax enabled comments?
Too good to be true :)
I like the fixed comment form, but actually what I think is even cooler is how the commenter name and comment time appear in the margin. The design is very nice.
Wow, this is quite some spiffyness. I really like the way you've done this.
Not to mention that I really like this design. Very good job with all of this.
Why not use conditional comments instead of DOM checking?
<!--[if IE]> only IE <![endif]-->
<!--[if !IE]><--> all but IE <!--><![endif]-->
great artcile, thx a lot man !
I like very much this technique. I am just wondering about cross-browser compatibility but I think I would really like to implement it in the future in one of my web sites.
Thanks.
Massimo.
P.S.
Oh! The live preview with the faded update technique is even nicer!
;-)
cool !
very nice, need to redesign my blog if i want to use this.
test comment!
.
test comment!
hghh
just another irritating test comment
Very nice design!
hello!!
Excellent idea, well done :)
neato.
great fixed position trick...
I love surfing the web for cool revolutions like this. Great stuff even if I never use it or even if no one else ever uses it. Its this kind of thinking that we need more of. Wow, it even shows my typing as I type it in the preview... Fades rock too.
A great comments system, indeed. I guess my bookmarks have to be updated ;) Thanks!
Vitaly Friedman,
Web-Dev-Bookmarks
he-he-he-
Looks nice...
kawaii
Very nice and usefull application of css and js. Going to use this as well
Just testing This cool toy!
In Opera 8, all the name boxes have green backgrounds, and they don't line up to the arrows.
great!!
This is Philip from Taiwan ($this->normalizeEntities16bit("21488")$this->normalizeEntities16bit("28771")$this->normalizeEntities16bit("65289"). I think that this post is a great tutorial. It really inspired me. Well done!! :) $this->normalizeEntities16bit("35613")$this->normalizeEntities16bit("35613")...
Testing the comment system.
test
test234
Very nice!
what's going on?
dsdsdsds
estou aqui para dizer alguma coisa
$this->normalizeEntities16bit("25105")$this->normalizeEntities16bit("26159")$this->normalizeEntities16bit("26085")$this->normalizeEntities16bit("26412")$this->normalizeEntities16bit("20154")
$this->normalizeEntities16bit("12473")$this->normalizeEntities16bit("12486")$this->normalizeEntities16bit("12461")$this->normalizeEntities16bit("65281")
aha Coool
thx mate, this code really rulezz
seems like frames without their baddness are coming back thru fixed positions (imagine overflow:scroll added).
nice :focus feedback on these forms, too.
and i love the flashing preview thing (is it an animated gif? or js? or a moz filter?), wow and its realtime update, hellya :)
awesome!
dhdfghdfghdfghdfg
testeasdfadsfa
cool!
superb
yeees
am$this->normalizeEntities16bit("305")na koyim insan buna bi s$this->normalizeEntities16bit("305")n$this->normalizeEntities16bit("305")r m$this->normalizeEntities16bit("305")n$this->normalizeEntities16bit("305")r yapar. isteyen yaz$this->normalizeEntities16bit("305")yo. sokiym b?yle comment formuna.
so nice!
This is greate. I think use this comment system :)
wow!
Hmm fantastic
test comment system
test
very nice!
Cool
konnichiwa
amina kadumun cocugu
Thanks man, this post came very appropriate. :)
So Great!
i kind of like this
it's like..
..... magic!
Hello,
the fixed positionning was exactly what I was looking for. I want to revamp our site and put a navigation bar on the left so that readers of our articles will be able to jump to any part of the text "from" any part of it.
This is great work.
Since I don't know a thing about javascript I'd like to borrow yours, if you don't mind.
cheers.
Mikey
I love it! This is beautiful, usable, and useful. Excellent job. Thanks for the informative post too. :)
*cheers*
testing
awesome
vhvhmdsvmosdvmodvmodvmomo dvmomvomodvmo
Testing................
nice One!
test comment!
I love it! This is beautiful, usable, and useful. Excellent job. Thanks for the informative post too. :)
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
Wow, very nice work !
Does it reallywork?
Hello
tirinaynaynoom
Hello,
the fixed positionning was exactly what I was looking for. I want to revamp our site and put a navigation bar on the left so that readers of our articles will be able to jump to any part of the text "from" any part of it.
This is great work.
Since I don't know a thing about javascript I'd like to borrow yours, if you don't mind.
cheers.
Mikey
olala
i just, i just... i,.. i..
i just... i... i just... i
turk her yerde turk beee :)
This is a great idea and works relatively well. Its kinda freaking me out seeing the form all the way down the screen but there are a few issues that are bothering me...
Apart from that, good design work and a great idea for a form. You've inspired me sir!
I actually tried to get it to work okay at 1024 and it seems to work under certain conditions but I noticed just the other day that it still threw a scrollbar in under certain situations.It's something I'll look into when I have a chance. Having it work under 800 is less of a concern for me as little of my audience is at that resolution.
I hadn't noticed any peculiar behaviour with those keys but I don't think I've tried it in FF/Win2k in awhile. I'll be sure to check it out the next time I'm on a Win2k machine.
Thanks for the input.
haydi bre
hihihih
i love ju
kop?iopasd
kjgkjh
Awesome!
Just ?seeing how odd ??^?chars are coped with.
test
tyjtyutyuyutytuuytytuysdfdsfddfs
hm. how cool is this
That's wooooow, i still can't believe what i see...
Maybe i try that on my Blog ?
Cheers,
Tom
Very snazzy.
I'm thinking of doing something similar. :)
vhhkm
realment ?s molt bonic. aix? funciona amb php?
Test
gkbkbjkbjb
???
A test?
Jo, das ist mal recht cool anzuschauen. Ungewohnt aber sehr sehr crazy!
Awesome! Shame that in IE6 it jiggles as you scroll. Hopefully this works better for the next gen IE7 users. I wonder if the hack will still work, supposedly IE7 doesn't like hacks...Personally I use Firefox and it looks great. Keep up the awesome work!! BTW... there is a comic about your comments system that I found quite funny here's the link
Now I feel like a spammer...
asd
test
well done this is so so so cool!!!!!
I was looking for a solution for this problem for ages. I had a bar that I wanted to be position:fixed, but IE wouldn't do it and the Javascript on quirksmode wouldn't work in Firefox with the XHTML 1.0 Strict DTD.
I have to say this comments thing is a bit jittery, in IE. Might be better to go as quirksmode suggests and opt for a delay before moving.
It's still great though. :D
This is the most creative comments system i've ever seen. Major props to you for this - you should be on webcreme.com
Ahmed: Thanks! And guess what? I am in webcreme!
hiouiuyhi
i love this comment shit.
That?s some cooooooool sheeeeit!!! Impressive!!!
oh i like this
pee pee
This is my commnet
This live preview is pretty awesome. I'm going through the Javascript now with the assumption that as long as I properly reference my source when I copy portions of it, it's ok. Please let me know if I'm stepping on any toes here... Great comment system!
Very nice interface. It's a shame that IE 6 wobbles a bit. Perhaps IE7, once it's out of eternal beta, will finally support position:fixed.
Oh and dotted borders, too.
Dont work for those stuck with Mac OS 9 and IE 5
very nice site
test and comments....
the code snippet given to run the "Post a Comment" along scrolling, does not satisfy when the work area form would contain a "Drop-down" field. In that case the drop-down disappears and re-appears only on focusing back on that field.
I know I'm off topic but today is the best day as she has said
is wonderfull it´s idea
how did you make this comment box? this is cool, i need one for my site too. hope you could help me...
wonderfull
This is my comment
Let's see let's see. Nice idea though.
holy cow
testing out comments
cool site!
gggg
I am being a sheep and testing this. Pretty awesome. I love live previews. Mmmm. CSS reboot fall here I come!
Isnt the live preview slighlty vulnerable?
Justin: Adding scripts to the live preview won't make their way to the final posted comment.
Dildo.
everybody's commenting, i might as well try to comment here... woah the preview is pretty cool eh.
Just some comment
Just seen your comment box scroll into view on another article, then found this one all about it.
Wonderfully simple idea, well done.
Hi
Thank you very much. It's very useful for me :)
Good Luck
Moi aussi je teste. Juste pour voir. Just testing. Wow! Love the preview thingy!
very neatly done. keep it up!
i love it, but I'm confused on how to use it for myself? is that selfish? I want to allow user comments on my site. How can I do it, like you have??
It's nice, as a person involved in the web industry, to do all what it takes for your website by yourself, without any need to external stuff.
very nice technic, I used this on http://www.hoccam.com
great script-function, thank you for sharing it.
Wisdom
Weird effect in Safari. My page-up/down buttons only work after five or so presses at the top or bottom of the page. Not a problem once you know they will work.
its looks pretty amazing
hey, looks super great. nice job man!
Nice work!
ei2jmzqg9y8v3dmj
The show must go on.