Monday, May 23, 2011

My first go at bookmarklets

So, I have seen many bookmarklets. They are convenient to use and provide functionality not natively available on a page. For instance, normal web pages do not allow you to edit and change the content on the fly. But if you are a coder/designer you can use such functionality to test what-ifs easily.

The code to do that is very simple:

window.document.designMode = "On";

Let's make a bookmarklet that allows you edit any page. We will be using the single javascript code above. In fact the rest is very easy. All we need is a link that embeds that code in the href attribute:

<a href="javascript:window.document.designMode='On'; return false;">
Edit Page</a>

Notice that we return false so that the click event is cancelled after our code is executed. This is the link with the same code: Edit Page

Now, all you need to do is drag the link to your bookmarks toolbar and Voila! you would be able to edit any page you view by clicking it. Wasn't this simple and sweet?

I will re-visit this topic soon to improve this very simple bookmarklet.