New "comments preview" function, plus bleg

A couple of people reported that the “live comment preview” function was slowing down their browsers, so I’ve replaced it with an Ajax-based comments preview. This has the advantage of live preview in that you don’t have to reload the page to preview your comment; but since the comments preview isn’t activated until you press the “preview comment” button, people can choose to opt out if it messes up their browser.

I’m having a layout problem, though… As you can see if you scroll down to comments, the “preview comment” button is slightly lower than the “submit comment” button. I’d prefer to have them at the same height. If you know how to fix this, please clue me in. I’ve put a copy of my comments.php file here, so folks can take a look at it.

This entry was posted in Site and Admin Stuff. Bookmark the permalink.

5 Responses to New "comments preview" function, plus bleg

  1. jennhi says:

    Ah, I see your problem: you removed the top margin for the submit button but the 5px top margin for the preview button inherited for all input fields still remains. You need to assign an id to the preview button then set a style for it. So the HTML output will read:

    <input type=”button” onclick=”ajaxPreview(‘http://www.amptoons.com/blog[rest of url…])” value=”Preview Comment” id=”previewbutton” />

    In the CSS:

    #previewbutton { margin-top: 0; }

    I noticed in the existing output there was no space between the input’s closing slash and the closing bracket. That might break some people’s browsers, so when you make the edit, can you do that too, please?

  2. Ampersand says:

    Jennhi, thanks!

    Two questions.

    One, how do I figure out what the rest of the URL is?

    And two, where is the “input’s closing slash and the closing bracket”? I mean, there are lots of closing slashes followed by closing brackets; which one did you mean specifically? Or do they all need a space between?

  3. jennhi says:

    The rest of the url was trimmed out so my post wouldn’t overflow across your page. It’s the preview button you’re using right now. Just add the ‘id=”previewbutton”‘ (no single quotes) to that tag.

    Sorry, ignore what I said about the slash. I checked the source code and it was just fine — stupid debugging tools were telling me otherwise.

    Nevertheless, you may want to get Firebug, which is a genius HTML/CSS/JS debugging tool. I only use it for CSS and HTML and it works wonderfully. It’s a Firefox add-on.

  4. Ampersand says:

    Oh, I get it – you were looking at the source html, not at the php file! No wonder I was confused.

    Anyway, you got me going in the right direction, and I think I’ve got it fixed now. Thank you!

  5. jennhi says:

    Sure. Feel free to email me if you have questions on rendering bugs in HTML. I do this for a living and would like to contribute.

Comments are closed.