iamcal.com

[home] [PDF Version]

Blog Hacks : Comments popups (non-javascript)

Originally published 20th June 2003

If you use popups for your comments, then your code probably looks something like this:

	<a href="Javascript:popup_comment(12345);">comments</a>

This is fine for users with browsers that support javascript (and have it turned on), but it means that anyone else will be unable to comment on your site. Luckily, there's something you can do about it. If you move the popup code into the onclick event, only javascript enabled browsers will run it:

	<a onclick="popup_comment(12345);">comments</a>

So far so good - people without javascript wont get an error - they just wont be able to click. But what you'd really like to do is let these users get to the comments page too. Since you can't do a popup with using javascript, you can just link straight to the comments page:

	<a href="/cgi-bin/comments.cgi?id=12345"
		onclick="popup_comment(12345);">comments</a>

Now when a non-javascript-enabled browser clicks the link, they get taken to the comments page in the same window. Infact, you can set the target attribute to open the page in a new window of it's own (though you can't choose the size!).

	<a href="/cgi-bin/comments.cgi?id=12345" target="comments_12345"
		onclick="popup_comment(12345);">comments</a>

The only problem now is that javascript enabled users get the comments page in both the same window and the popup. Luckily, this is easily solved. By putting a "return false;" at the end of the onclick event, javascript tells the browser not to process the href attrbute, so only the popup is launched:

	<a href="/cgi-bin/comments.cgi?id=12345" target="comments_12345"
		onclick="popup_comment(12345); return false;">comments</a>

To make your site more accessable, you'll need to cater for people who aren't using a mouse aswell. A link can either by followed by clicking it, or tabbing to it and pressing enter (or the space bar - it depends on the browser). If you capture the onkeypress event you can cater for these users too:

	<a href="/cgi-bin/comments.cgi?id=12345" target="comments_12345"
		onclick="popup_comment(12345); return false;"
		onkeypress="return this.onclick();">comments</a>