Blogger previous post link with accesskey in valid HTML

I used this trick to create a previous post link. Basically you just generate the previous posts list where you start hiding items after you have displayed the first item. This method generates valid HTML and allows you to set an accesskey which only accesses the first (visible) item.

<BloggerPreviousItems>
  <a href="<$BlogItemPermalinkURL$>" accesskey="v">Previous:<br><$BlogPreviousItemTitle$></a>
  <div class="hide"><![CDATA[
</BloggerPreviousItems>
<div class="hide">]]></div>

Update 2005-09-01: Changed ‘next’ to ‘previous’ because it makes more sense this way.

Tags:

• Blogger
• HTML
• Accesskeys

Accesskeys

I've added accesskeys to this blog to enable easier and faster navigation. Added accesskeys:

• A: Accesskeys link.
• C: Comment textarea (item page only).
• H: Home link.
• L: Name field under ‘Leave your comment’ (item page only).
• P: Post button (item page only).
• S: Search field.

Tags:

• Accesskeys
• Accessibility

Fixed user scripts for Greasemonkey 0.5.1

I've fixed some of my user scripts for Greasemonkey 0.5.1. There were problems with the addEventListener function. I used it to execute scripts on window load to prevent Firefox from crashing on some scripts (which apparently was needed). With the new version of Greasemonkey that trick is no longer needed, and somehow addEventListener does no longer seems to be working on all users scripts in Greasemonkey. I haven't figured out yet what the problem exactly is.

Anyhow, you can find the scripts I've fixed over here:

• Blogger edit comments - original post
• Blogger large post editor - original post
• Blogger tag adder - original post
• Google open all - original post

Tags:

• Greasemonkey
• User script
• addEventListener
• Javascript

Blogger tag adder user script tab index

The tags input field didn't have a tab index. This was annoying me for some time now. Tonight I had the time to update the Blogger tag adder user script (original post). I should have done this a long time ago, it was just to easy to fix.

Tags:

• Blogger
• Tags
• Greasemonkey
• Technorati
• User script

Use button elements, not input elements, for buttons

I wanted to improve the buttons on the forms we use in web applications I was working on. Improvements I would like to make:

• Adding accesskeys, which I would like to be underlined in the button.
• visually differentiate specific buttons by adding an icons and changing the color.

The best way you can do this is by using the button element. This method has several advantages:

• button elements can contain HTML.
• button elements can be styled on Safari.
• Your form will remain accessible.

Here is an example of HTML you could use:

<button accesskey="d" class="delete" type="button">
  <span class="icon">&nbsp;</span><em>D</em>elete
</button>

I use the button for a default button background image and the span for an icon. Here is an example of CSS you could use:

button {
  width: 100px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  cursor: pointer;
  background: url("button.jpg");
  border: 0;
}
button:hover {
  background: 0 -25px url("button.jpg");
}
button em {
  font-style: normal;
  text-decoration: underline;
}
.delete .icon {
  padding-left: 14px;
  line-height: 25px;
  background: url("del_icon.gif") no-repeat 0 50%;
}

When you do so, this will be the result:

Tags:

• HTML
• Forms
• CSS
• Safari
• Accesskeys
• Accessibility

Blogger edit (and permanently delete) comments user script

I'm back from a rainy holiday. First thing I wanted to do when I was back home was improving the Blogger edit comments user script (original post). It had a few quirks and I wanted to be able to quickly and permanently delete unrelated comments. Here's the change list:

• Removed Blogger's onclick which caused an extra window to be opened.
• Corrected the title for the edit link.
• Added a link to quickly and permanently delete comments.

Tags:

• Blogger
• Greasemonkey
• Comments
• User script