Bookmarklets Which Creates An Overlay On Page

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?

score 17 · Accepted Answer · edited Jun 20 '20 at 09:12

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:

Save the code from above into a javascript file hosted on your server.
create a piece of javascript code that adds jquery and your newly hosted javascript file to the current page's body
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/

thanks for that! Looked for something like this over the web, but can't seem to find it... — Hirvesh, Mar 12 '11 at 06:39
@the_archer I wrote the code for you and added it to my answer. Good luck. — arnorhs, Mar 13 '11 at 13:28

score 0 · Answer 2 · answered Mar 12 '11 at 06:49

You'll have to overcome the following:

appending jQuery to the page if it doesn't already exist
minify your code and wrap in a self-executing enclosure

Here's an example from @anrorhs's example above:

<a href="(function(){var $e = $('<div id="yourelement"></div>');$('body').append($e);$e.css({    position: 'absolute',    top: '10px',    right: '10px',    width: '200px',    eight: '90px',    backgroundColor: 'red'});})();">drag me to your bookmarks bar</a>

To do the inline check for jQuery - follow the tutorial here: http://benalman.com/projects/run-jquery-code-bookmarklet/

That will give you the ability to paste in the code above and it will conditionally load jQuery from Google's CDN when it is not already present on the page.

Cheers.

Bookmarklets Which Creates An Overlay On Page

2 Answers2

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

Easiest way to create your bookmarklet and include jquery