Embedded Comments
Tuesday, 2006-06-27; 15:34:00
So.. I've been a bit annoyed for some time that my comments system opens a new window to view comments: I'd really prefer the comments to be viewable on the same page as my weblog entries. Unfortunately, since it's an external commenting system, this is going to be a little more difficult.
The first thing to note is that even though the comments window is opened by a JavaScript link, the comments for a particular entry can be accessed easily by going to a specific URL. For example, to access the comments for this entry, you would simply go to http://pro.enetation.co.uk/comments.php?user=simX&commentid=TECHNOBLOGE20060627153454&usersite=http://homepage.mac.com/simx/technonova/ . It's a well-defined, structured URL.
The advantage of having this well-defined URL is that I can easily use it, in conjunction with the OBJECT tag, to embed the HTML for the comments into the entry pages. I'm not going to put comments directly on the main weblog page because that would take up too much space and would also be distracting: to see comments, you're going to have to go to the dedicated page for the entry. (This may also workaround some issues that Safari used to have -- and still may have -- with multiple embedded objects on a single page.)
Also note that while embedding the comments for each entry would cause the pages to not finish loading if enetation is being unreliable, it doesn't actually change the situation, because the dynamic links created for the comments links already cause that problem. So embedding comments directly on the pages doesn't make anything worse.
There's one big problem, however. Because it's an embedded object, I need to define a width and height for the object. I don't want the comments to appear as if they're embedded: I just want them to show up on the page without any extra interface elements like scrollbars or such. But I can't figure out a way to do that, because the height of the comments page for each entry changes depending on how many comments there are to that entry. So a height of, say, 500px would be more than sufficient for entries with only 1 comment, but would be too small (and thus would show the scrollbar) for entries with more comments. Defining the height to be 100% doesn't work either, because that just means 100% of the window size, which means it's also going to be a limited amount of room and won't be sufficient for entries with more comments.
The expected solution to this problem -- to use the "overflow: visible" CSS attribute -- doesn't seem to work either. That seems like it should allow any embedded content that goes past the defined height to be displayed anyway; but it doesn't work that way. "height: auto" also doesn't work: for some reason it defaults to a pre-defined height of about 150px or so.
So I don't really want to activate embedded comments until I can figure out this problem. How do I make it so the comments for each entry are always displayed on the page and don't require scrolling within the embedded object to view them? Any suggestions?
(One idea that is possible is to use JavaScript to dynamically figure out the height of the page that contains the comments, and then dynamically insert that into the HTML. But I consider that a hack/workaround, and surely there's a way to use CSS to overcome this issue. I'm not exactly a CSS expert, so it's entirely possible -- and probable -- that I'm simply overlooking something.
I realized this once before when I was trying to create the tooltips for supplemental info in my Mac OS X 10.4.6 Apple Bug Friday Review. Many of the boxes had different attributes, but I wanted to also be able to simply add another style to any of the boxes, regardless of their existing attributes, to add the little black-and-white box to the bottom-right hand corner. As I was creating this, it seemed as though you could only specify one class per element, and I had to use the "id" HTML attribute instead, which caused my page not to validate. However, after posting to the MacRumors and MacOSXHints forums, it turns out that the solution was blindingly simple: to assign multiple classes to a single element, you just separate them by a space inside the "class" HTML attribute.)
The first thing to note is that even though the comments window is opened by a JavaScript link, the comments for a particular entry can be accessed easily by going to a specific URL. For example, to access the comments for this entry, you would simply go to http://pro.enetation.co.uk/comments.php?user=simX&commentid=TECHNOBLOGE20060627153454&usersite=http://homepage.mac.com/simx/technonova/ . It's a well-defined, structured URL.
The advantage of having this well-defined URL is that I can easily use it, in conjunction with the OBJECT tag, to embed the HTML for the comments into the entry pages. I'm not going to put comments directly on the main weblog page because that would take up too much space and would also be distracting: to see comments, you're going to have to go to the dedicated page for the entry. (This may also workaround some issues that Safari used to have -- and still may have -- with multiple embedded objects on a single page.)
Also note that while embedding the comments for each entry would cause the pages to not finish loading if enetation is being unreliable, it doesn't actually change the situation, because the dynamic links created for the comments links already cause that problem. So embedding comments directly on the pages doesn't make anything worse.
There's one big problem, however. Because it's an embedded object, I need to define a width and height for the object. I don't want the comments to appear as if they're embedded: I just want them to show up on the page without any extra interface elements like scrollbars or such. But I can't figure out a way to do that, because the height of the comments page for each entry changes depending on how many comments there are to that entry. So a height of, say, 500px would be more than sufficient for entries with only 1 comment, but would be too small (and thus would show the scrollbar) for entries with more comments. Defining the height to be 100% doesn't work either, because that just means 100% of the window size, which means it's also going to be a limited amount of room and won't be sufficient for entries with more comments.
The expected solution to this problem -- to use the "overflow: visible" CSS attribute -- doesn't seem to work either. That seems like it should allow any embedded content that goes past the defined height to be displayed anyway; but it doesn't work that way. "height: auto" also doesn't work: for some reason it defaults to a pre-defined height of about 150px or so.
So I don't really want to activate embedded comments until I can figure out this problem. How do I make it so the comments for each entry are always displayed on the page and don't require scrolling within the embedded object to view them? Any suggestions?
(One idea that is possible is to use JavaScript to dynamically figure out the height of the page that contains the comments, and then dynamically insert that into the HTML. But I consider that a hack/workaround, and surely there's a way to use CSS to overcome this issue. I'm not exactly a CSS expert, so it's entirely possible -- and probable -- that I'm simply overlooking something.
I realized this once before when I was trying to create the tooltips for supplemental info in my Mac OS X 10.4.6 Apple Bug Friday Review. Many of the boxes had different attributes, but I wanted to also be able to simply add another style to any of the boxes, regardless of their existing attributes, to add the little black-and-white box to the bottom-right hand corner. As I was creating this, it seemed as though you could only specify one class per element, and I had to use the "id" HTML attribute instead, which caused my page not to validate. However, after posting to the MacRumors and MacOSXHints forums, it turns out that the solution was blindingly simple: to assign multiple classes to a single element, you just separate them by a space inside the "class" HTML attribute.)
Technological Supernova Tips Older Newer Post a Comment