Question

I’ve been looking for a way to show a simple red div on the top-right corner of a page using a bookmarklet, but can’t seem to find any tutorial on it on the web. Can anybody give me a quick rundown on how I can create such a bookmarklet?

Answer 1

To create a bookmarklet in general or just how to display the box using javascript?

Adding your stuff to the body in the top-right corner

Let’s start with the latter part – you tagged jquery, so lets go with that (might be a bit heavy for a bookmarklet, though):

// create the element:
var $e = $('<div id="yourelement"></div>');

// append it to the body:
$('body').append($e);

// style it:
$e.css({
    position: 'absolute',
    top: '10px',
    right: '10px',
    width: '200px',
    height: '90px',
    backgroundColor: 'red'
});

that’s all you need for that…

Easiest way to create your bookmarklet and include jquery

What we need to do:

1. Save the code from above into a javascript file hosted on your server.
2. create a piece of javascript code that adds jquery and your newly hosted javascript file to the current page’s body
3. place that javascript code inside an <a> tag.

This is the code to do that:

javascript:var i,s,ss=['http://yourdomain.com/path-to-your-script','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

It’s just looping through an array and attaching <script> tags to its body with the path to both javascript files as src.

As for creating the bookmarklet itself, you just place all the code inside <a> tag, sort of like this (watch out for double-quotes):

<a href="javascript:javascript:var i,s,ss=['http://yourdomain.com/path-to-your-script','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);">Drag me to your toolbar</a>

And that’s it.

Note that the bookmarklet actually overrides the jquery version used on the site, if there is one .. could break some sites…

More information about creating bookmarklets:

http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/