Rich Pedley (a.k.a. Elfin) got in touch with me to solve a little problem he was having using the WDG validator to validate documents that have a custom XML DTD. You need to add “xml=yes” into the URL for the validator as it doesn’t give you the option on the website. Rich wanted a bookmarklet that would do this for him, so this is what I knocked up:
Older browsers may not understand the
encodeURIComponent() function, so you might need to use
Personally, I’ve preferred to add these validation tasks as tools on the Web Developer extension toolbar, as I tend to use that for much of my day-to-day meddling on the Web.
Check highlighted word
OK, here’s a handy one: a spell checker for individually selected/highlighted words. I wanted to be able to check the spelling of words in a post before I sent them. I was originally inspired to write a Firefox extension for this, but I wanted to try a bookmarklet first. The thing is, you can’t actually do what I was trying to do with a bookmarklet. You cannot identify which
Anyway, I did come up with something. The following bookmarklet checks the spelling of highlighted words in every
textarea element on a page. If you select more than one word in any
textarea element, it will only check the first word in the selection. It won’t do anything unless you have selected some text.
- Check word in textarea
Check word in textarea (IE/Win version)(I’ve messed something up with this one)
The problem with this is that if more than one
textarea element has some highlighted text, they all get checked. This is why I wanted to detect which
textarea element had focus. I did try offering the option to choose which word to check when more than one
So, at this point I was back to my original plan: write a Firefox extension. You can easily add this sort of thing to a context menu. However, a good Google goes a long way. I found that someone had already done what I wanted to do. In fact, several people had. In the end, I decided that I would try my hand at writing my own extension anyway, but I’ll save that for a future post.
Creating your own bookmarklets
Here are a couple of pointers that I’ve found useful while playing with bookmarklets.
document.all. Also, some older browsers don’t like some of the newer methods. For example, as I mentioned earlier, instead of using
encodeURIComponent() to encode a URI, you may need to use the older
encode() method instead.
Another thing to watch out for, when using XHTML sent as
application/xhtml+xml, you should be using
createElementNS() and not
createElement() as you would for any document sent as
A common thing for a bookmark to do is open some information about the current page in a new window (for example, using
open()). It should be noted that the name you give to the window should not have any spaces or other special characters in it. Firefox et al won’t care about it, but IE will throw an error and your bookmarklet won’t work. It might seem a simple thing to point out, but it can be a difficult error to debug… this will save you some head-banging.
For example, the following two lines won’t work in IE:
open('http://dotjay.co.uk/blog/','Dotjay blog','resizable=yes,width=700,height=500') open('http://dotjay.co.uk/blog/','Dotjay-blog','resizable=yes,width=700,height=500')
You must use something like this:
Getting a good blogging
After writing most of these posts on bookmarklets, I got up-to-date with some blog reading and found that Gez has been discussing the creation of bookmarklets recently too! He goes more in-depth into creating a bookmarklet that will allow you to load a custom style sheet into the head of a document.
I also notice that Andy Budd has a list of useful bookmarklets he uses.