Lets learn the what of Bookmarklets here. So here we go.......
Web browsers provide a visual clue to the user about hyperlinks in
the document [being viewed] by changing the mouse-pointer to the
icon of a hand with a pointing index finger as in Internet Explorer.
A subsequent mouse click loads the web page contained in the
What if the user wanted just the clue to the URL, and did not want to be transported to a new web page?
This would be tantamount to instructing the browser to provide
visual indication, but not to respond to the mouse click event. It
raises the question that is central to the behavior discussed:
"If the need is to suppress the action alone, why should <A> (the anchor) tag be used"
2. Investigating <A> the Anchor tag
The most common way of programming hyperlinks in HTML is
done by using the <A> (anchor) tag.
Working with this tag for a while, one figures out that there are
essentially two tasks tied to the anchor tag
Visual indication on mouse rollover
Taking action on mouse click
In its most commonly encountered usage, the anchor tag is made to
take the default action − page navigation. However, by selecting an
action that deviates from the default, the anchor tag can provide
interesting alternatives. For instance, one could make use of this
functionality to accomplish the following:
Provide no more than a visual indication of hyperlinks in a
Carry out some processing in response to a mouse click instead
of loading another page
Suppress the display of the URL that is being navigated to in
the status bar
Here, it is important to note that the approach of invoking
the browser, makes a very important assumption that the browser
To illustrate, let us consider the following example, of a code
snippet containing a simple a hyperlink, which on selection, navigates
to another web page:
Instead of the standard URL (which is an instruction to the browser
to navigate to a certain specified page) we could have the href
specifying that the response instead be an alert. This is encoded as
follows within the href tag.
<a href="java script:void(0)" onclick="alert('You clicked on www.microsoft.com.')">http://www.microsoft.com</a>
A mouse click, instead of transporting the user to the Microsoft
site, will now pop the message:
"You clicked on www.microsoft.com."
The java script:void(0) function basically deactivates the hyperlink
to allow the developer to carry out some DHTML activity within
the onclick event.
One can also accomplish the same behavior adding a "return false;"
at the end of the onclick event code, but would still have to provide
an input for the href property. This, it could be more elegant
to make use of java script:void(0), here.
The story of void() does not end here. Although java script:void(0)
is the most widely used form of the void() function, one can have it
<a href="java script:void(alert('You clicked on www.microsoft.com.'))">http://www.microsoft.com</a>
If you are wondering about it now, it is time to introduce formally,
can be run on the URL bar of the browser.
Steve Kangas of www.bookmarklets.com coined the term "Bookmarklet,"
which he created based on an idea suggested in the Netscape
It is a common practice to use the Bookmarklet as a bookmark in
the browser (like a bookmark to an URL). This makes Bookmarklet
to be available as a single click option when needed. So the
term Bookmarklet is treated as a Bookmark + applet. Note that
Bookmarklets are not applets. Bookmarklets are sometimes also
referred to as Favelets.
4. What do Bookmarklets offer me?
This question can be answered easily depending upon your usage
of the browser.
If you are a web developer and writing HTML related code,
then, Bookmarklet offers you a lot of utilities for developments.
Using Bookmarklet, it is possible to access the complete
DOM structure of the currently loaded in the browser.
This offers a lot of possibilities. For example, viewing the
nesting of the frames/table/div. Accessing/updating the properties
of each of the DOM elements etc
If you are a normal user then, then Bookmarklet offers you
lots of utilities that could enhance your browsing experience.
Using Bookmarklets, you can customize the way you want to
view the page, change the font size, color of the page to suite
your comfort, highlight a search words on a page, retrieve a
section as an html page, automatically enter your password
4.1. Hello World! Bookmarklet
Our Hello World! Bookmarklet is very simple. Here is the
java script:'Hello, World!'
Copy and paste the above simple line on to your browsers URL bar and
Couple of points to note about the Bookmarklet we just wrote
The URL start with the key word java script: as like protocol
http, ftp etc. This is allowed especially as part of the
Bookmarklets always run in context with the currently loaded
pages HTML DOM. In other words, bookmarklets can manipulate
the currently loaded html page without affecting the
actual content (source) of the html page.
Sometimes, it is not possible to write the required functionality
That is the reason most of the Bookmarklets are using
single letter variables.
Bookmarklets need to be written in a single line though we
do not add any value. This is because browser URL text box
accepts a single line of text and removes any extra lines.
by the browser. This is the main reason why some of the
bookmarklets working in a browser fail to work in other
Add more Bookmarklets examples if you know of them. There are a number of them being used now a days.
This post has been edited by bhandari: 11 February 2008 - 11:45 PM