Anthony's Java Bookmarklet

Show my Bookmarks

Show bookmarklet page

Blog Bookmarklets

Bookmarklets

From IRT.org

Bookmarklets are simple tools that extend the surf and search capabilities of Netscape and Explorer web browsers.

Steve Kangas - "Chief of Rocket Science" - Bookmarklets.com

Introduction

Here is something novel: using JavaScript to make your web experience more enjoyable, when you decide, and with what you want to do - rather than site specific JavaScript code that performs what the web author wants to do.

Wherever you browse the WWW, the chances are you'll come across a site that does something you don't like: opens new windows, displays white text on a black ground, etc. Until you've visited the site, you'll not know what it is that you'll not like. And once you've visited, its too late to change anything.

Wouldn't it be nice to actually alter the look of a site, extract data from a page, search the web and navigate in new ways?

This is where JavaScript Bookmarklets come in. The Bookmarklets.com web site run by Steve Kangas, uses a JavaScript feature not often demonstrated. Since the introduction of Netscape Navigator 3.x and Microsoft Internet Explorer 4.x, it has been possible to use a JavaScript URL in the form javascript:code in the location bar on all platforms: Windows, Mac, Unix etc.

If you are using one of the appropriate browsers, why not type the following into the location bar right now:

javascript:alert('Hello World')

If you are using one of the appropriate browsers, and have JavaScript enabled, then you should see a JavaScript alert window with the words "Hello World". Notice how the location of the current document is not changed. This allows us to invoke JavaScript code on the current document without changing the documents location, and without requiring special access privileges to the documents site.

For example, to find out the current documents title, we can use the following JavaScript URL:

javascript:alert(document.title)

Which should display "JavaScript Bookmarklets".

Making bookmarklets

If you regularly visit a particular web site, that, say, has a bad choice of background color. Perhaps you find it hard to read the text. Wouldn't it be great to be able to change the background color with out too much hassle? Well the following JavaScript URL would change the background color of the current document to white:

javascript:void(document.bgColor='#FFFFFF')

However, after typing that out a few times, you might find yourself putting up with orange text on a red background. This is where the bookmarklet idea comes into its own.

Why not simply bookmark the JavaScript URL?

Indeed, why not? There is no reason not to. The JavaScript code, being part of the URL, will be safely stored in your bookmarks file. The JavaScript code cannot cause any problems (at worse it will simply generate an error message), it is small and effective, and it is only invoked when you choose the bookmark from your bookmark or favourites list.

But how do you bookmark a JavaScript URL? If you bookmark the effects of a typing in a JavaScript URL, then all you'll do is bookmark the current document.

This is simple. Just create a temporary page with the JavaScript URLs as complete hypertext links. For example:

<A HREF="javascript:void(document.bgColor='#FFFFFF')">White background</A> <A HREF="javascript:void(document.bgColor='#000000')">Black background</A>

which looks like:

White background
Black background

and then just bookmark the above links:

Netscape Navigator - Point at bookmarklet link. Press down (right) mouse button and choose "Add Bookmark".
Microsoft Internet Explorer:
- Windows - Press down (right) mouse button and choose "Add to Favorites"
- Mac - Point at bookmarklet link. Hold down mouse button and choose "Add Link to Favorites"

For Netscape on the Mac and some Unix platforms, it may be necessary to rename the bookmarklet (since Add Bookmark lists the javascript URL as the name of the bookmark instead of the link text).

You'll now have two bookmarklets which can be used to alter the background color of any web page.

Unlike normal bookmarks, which include the documents title text, the bookmarked links use the link URL as the description of the bookmark, however, once bookmarked it is possible to manage/edit your bookmarks to give them a more user friendly description.

Why and when to use the void

The void operator discards the value of its operand and returns an undefined value. It is often used within links using the javascript: protocol to ignore the results of expressions. For example, when using the window objects open method, a reference is returned to the newly created window. This is usually used as a window handle. However, when used in a link, the returned window reference will cause the browser to display the returned result (normally '[object Window]') in the current window, thus overwriting the original contents. Using the void operator stops this from occuring:

<A HREF="javascript:void(window.open('about:blank', 'windowName', 'width=100,height=100'))">about:blank</A>

Which produces:

about:blank

Frame Compatibility

Bookmarklets act on the windows document, this means that if the window contains a frameset then there is a possibility that a bookmarklet will fail to achieve its objective, e.g. changing the background color, as it will attempt to change the background color of the window and not one of the framed documents. It just depends on what the bookmarklet is attempting to do. For example, a bookmarklet to place the URL of the window in the body of an email message would work perfectly:

<A HREF="javascript:location.href='mailto:?SUBJECT=' + document.title + '&BODY=' + escape(location.href)">Send Location</A>

Which produces:

Send Location

It is possible to make bookmarklets compatible with frames - although you'll probably want one version for non framed pages, and another for framed pages - you just need to add frame navigation to your bookmarklets. For example, to change the background color of any frame within a frameset, you could add a prompt to confirm which frame you wish to change:

<A HREF="javascript:n=top.frames.length;if(n>0) {f=prompt('Which frame? [1-'+n+']','');if (f>n) {alert('Out of range!')} else {void(top.frames[f-1].document.bgColor='#FFFFFF')}} else {void(document.bgColor='#FFFFFF')}">White background</A> <A HREF="javascript:n=top.frames.length;if(n>0) {f=prompt('Which frame? [1-'+n+']','');if (f>n) {alert('Out of range!')} else {void(top.frames[f-1].document.bgColor='#000000')}} else {void(document.bgColor='#000000')}">Black background</A>

Which produces:

White background [Frame compatible]
Black background [Frame compatible]

It's also possible to write a recursive script that descends through the frames. For an example, see the code for Page Freshness (Frames version) at http://www.bookmarklets.com/tools/frames.phtml#pgfrshfrm

Browser Compatibility

As you are no doubt aware, Microsoft and Netscape have different implementations of JavaScript and the Document Object Model, therefore it is possible to write bookmarklets that will work with one browser but not another.

It is also possible write bookmarlets that will only work correctly on the latest browser versions. For example, to get feel for how long a document is the following bookmarklet will calculate how many windows the current document fills:

<A HREF="javascript:alert('The document fills about ' + Math.round((document.height*document.width) / (innerHeight*innerWidth)) + ' windows (at current window size)')">Document size</A>

Which produces:

Document size (NN4+)

As it stands it will only work in Netscape Navigator 4+, but another bookmarlet could be written for Microsoft Internet Explorer 4+:

<A HREF="javascript:alert('The document fills about ' + Math.round((document.body.clientHeight*document.body.clientWidth) / (document.body.offsetHeight*document.body.offsetWidth)) + ' windows (at current window size)')">Document size</A>

Which produces:

Document size (MSIE4+)

You just bookmark the appropriate bookmarklet for your browser, although if you are adventurous, you could always create bookmarklets that handle both browers at once:

<A HREF="javascript:if (document.all) {alert('The document fills about ' + Math.round((document.body.clientHeight*document.body.clientWidth) / (document.body.offsetHeight*document.body.offsetWidth)) + ' windows (at current window size)')} else {alert('The document fills about ' + Math.round((document.height*document.width) / (innerHeight*innerWidth))+' windows (at current window size)')}">Document size</A>

Which produces:

Document size (MSIE4+ and NN4)

Conclusion

As Steve himself says "the limit on the number of characters [in a bookmark] is difficult to answer", although "Netscape on Macintosh will not accept bookmarks longer than 507 characters, and may have trouble with bookmarks longer than 255 characters." Currently Steve uses a maximum of 256 characters for all the bookmarklets at Bookmarklets.com. Although he hopes to be able to extend this self imposed limit based on feedback received to 1000, 2000 and then perhaps 4000 characters.

This article has only been a short introduction into the use of bookmarklets. Bookmarklets can be used to scroll through a document, hide and display images, alter the text font and color (MSIE4+ only), manipulate selected regions of text in the document, examine and manipulate the links in a page, manipulate windows - they are limited only by your own imagination.

My personal favourite is the following simple bookmarklet that resizes the window to 640x480 pixels (so that I can check what a page looks like at a smaller resolution):

<A HREF="javascript:resizeTo(640,480)">Resize (640x480)</A>

Which produces:

Resize (640x480)

Simple, but extremely effective.

I would strongly suggest visiting the Bookmarklets.com web site run by Steve Kanga, as there are over 150 bookmarklets just waiting to be bookmarked.

Sourced from LucDesk

Bookmarklets are links, but they do not link to web pages, they link to a simple script. To keep a bookmarklet, just bookmark it or drag it to your links bar. (Please note: Not all bookmarklets work on all browsers.)

Search Google
Search Teoma
Search AllTheWeb (Source: dooyoo-uk)
Dictionary Lookup (Source: centricle)
Thesaurus Lookup (synonyms and antonyms) (Source: centricle)
Search TechEncyclopedia
Find Articles
List all links on page in new window
Alexa Snapshot (Source: Woodster.com)
Page Weight (Source: Woodster.com)
Check Uptime (Netcraft) (Source: centricle)

Sourced from Woodster.com

Bookmarklets/Favelets that work in Safari from Andy Budd

Amazon Bookmarklets

General Web Surfing

Web Development

SEO

Bookmarklets for Opera sourced from Phil Burns

Navigation

Open all Links in New Windows Opens all the links on the page in new windows and sends them to the background
Split Frames into Windows The windows will have the original frame size : from - bookmarklets.com.
Open Previous in New Window Only works if the Previous is in the same domain
Open Next in New Window Only works if the Next is in the same domain
from - Me.

Searching

Search this Domain. Very cool. Promts for a string, then does a Google advanced search in current domain.
Search ODP (New Window) from - ODP (dmoz.org) editors bookmarklets.
Search ODP in Background from - Phil Burns.
Search Hotbot (New Window) from - Rijk Van Geijtenbeek.
Links To this Page - AltaVista from - Rijk van Geijtenbeek.
Search for current page in www.archive.org from - Tobias Boyd.
Search google groups (New window) from - An opera.general poster I think

Checking Code Validity

Validate at WDG from - Rijk van Geijtenbeek.
Validate HTML at W3C from - Rijk van Geijtenbeek.
Validate HTML at W3C (In Background) from - Me :).
Validate all frames HTML W3C from - Me.
Validate CSS for page at W3C from - Phil Burns. Finally my own one :)
Validate CSS for page at W3C (In Background) from - Phil Burns. Another :)
Validate all frames CSS W3C from - Me.
Validate HTML & CSS at W3C (In Background) Opens two windows from - Phil Burns. Another :)

Page Data

Document Info Very nice... shows URL, hostname, the URLs of all frames (clickable), modification date, referrer, hash (both if provided only), lists all links and all images (both clickable), all in a new popup window. By - Roland Reck.
Document Info 2 Similar to the above but re-written by Roland for Opera 7 Read Cookie for Site from - bookmarklets.com I think.
Check Document Last Modified from - Maurizio Berti & Rijk van Geijtenbeek.
Who is from - Jesse Ruderman
Check site server from - Jesse Ruderman
Show HTTP headers from - Jesse Ruderman

Window widgets

Resize Window to 1024 x 768 Me.
Resize Window to 800 x 600 Me.
Resize Window to 640 x 480 Me.

Miscellaneous

Google Translate (English) from - Partially Correct
List Email Links from - bookmarklets.com Number of Links from - bookmarklets.com Go To Random Link from Page from - ODP (dmoz.org) editors bookmarklets.
List All Links on Page from - ODP (dmoz.org) editors bookmarklets.
Send Location This one may be of particular interest to those that want to send pages by email. from - ODP (dmoz.org) editors bookmarklets.
AutoFill Anonymous Fills out forms as anonymous.
from - ODP (dmoz.org) editors bookmarklets.
Bookmarklets Editor Creates a window to make and test your own bookmarklets in.
from - ODP (dmoz.org) editors bookmarklets.
Show All Images in New Window - Modified from bookmarklets.com
PAS Complaint - Send a complaint about a webpages code to all mailto links on a page ;-) from - Me

Bookmarklets from Centricle

query web tools

There's nothing particularly innovative here, just some things I threw together for my own convenience. They simply query existing tools on the Web directly from the browser, so if you find them to be useful, drag to your browser's toolbar & enjoy.

They should all work in for IE 5 & up and Mozilla, on both Mac & Windows.

Search via Prompt:

Search for Selected:

Webdev Tools:

Dev Tools via Prompt:

Bookmarklets from Sean Willson

favelets — i know i’m behind the curve a bit on favelets but i realized this past week all of the web work i was doing and i could have been doing a few of the things a lot easier. so i went about reorganizing my bookmarks, creating some tools, searching online for favelets to ease my web development. here are the ones i came up with. i don’t claim to have written any of these (except fixing the post to movable type to get it to work in safari). in case you don’t know what a favelet is, it’s a bit of javascript code that you can put in your bookmarks to perform some action in your web browser. for example you can select a word in a webpage and then just click the favelet and have it open a new web browser window to dictionary.com to define the word. anyhow, here are the ones that i’m found useful:

Bookmarklets from Squarefree

Link Bookmarklets: search links, linked images, etc.
Form Bookmarklets: toggle checkboxes, enlarge textareas, view passwords, etc.
Text and Data Bookmarklets: zoom images in, sort table, etc.
Zap Bookmarklets: get rid of annoyances such as unreadable color combinations, Flash, and blind links.
Web Development Bookmarklets: debug web pages and experiment with new code.
Validation Bookmarklets: check how well the code of a web page is written.
Miscellaneous Bookmarklets.

Search Bookmarklets.
Search Engine Optimization Bookmarklets: search for backlinks, analyze search engine positions.
Log Analysis Bookmarklets: analyze referer logs efficiently.
Flash Bookmarklets: pause, rewind, and fast-forward Flash cartoons.
Tipping Bookmarklet: send money to an e-mail address in a page.
Color Bookmarklets: change all colors on a page at once.
Keyword Bookmarklets for Scripters: type "jb document.body" to make document.body blink, etc.
Site-specific Bookmarklets: fix annoyances on some sites I read.
Bugzilla Bookmarklets: for people involved in the Mozilla project or other projects that track bugs using Bugzillas.
Testing browsers: test features or stress limits of browsers.

Bookmarklets from Tantek

Authoring

Multivalidator: HTML, CSS & HREFs all in one.

Multivalidator Multivalidator Window

HTML

W3C beta validator W3C HTML validator WDG HTML validator

W3C HREF validator

CSS

W3C CSS validator Toggle CSS style sheets

Screen sizes

PocketPC iPaq 240x320 TV safe 544x372 VGA 640x480 SVGA 800x600 XGA 1024x768 SXGA 1280x1024 UXGA 1600x1200

Learning

CSS

View style rules View style sheets

HTTP

View HTTP headers

Scripts etc.

View scripts View images

Reading

Translation

Babelfish French to English Babelfish German to English Babelfish Spanish to English Babelfish Italian to English Babelfish Japanese to English

Enhanced User Interface

Choose style sheet The "Choose style sheet" favelet provides users the opportunity to select an alternate style sheet. See the Alternate style sheets example for more information about alternate style sheets.

Bookmarklets from Malevolent Designs

zoom lens

(Internet Explorer 5.5 upwards required)

validation

Validate page (W3C)

accessibility

Bookmarklets from Dooyoo-uk

Count words in selected text Internet Explorer Only Version. Highlight some text on a page and then activate this bookmarklet to count the words in the selection. There are 8 words in this emphasised text.

List all links on page in new window
As you'd expect, this opens a new, little window in which are listed all the links on the page you are viewing when you activate this bookmarklet. Clicking on any of the links there will open that link in another new window

Open selected url address (no http:// bit) IE Only
This is a handy little bookmarklet that allows you to select an address in text, where it hasn't actually been made as a link (e.g. www.dooyoo.co.uk), and open it in a new window. Just highlight the address, NOT including the http:// bit if present, and select this bookmarklet from your favourites.

[Important Note: Where a url is written in full, including the http:// as in http://www.dooyoo.co.uk you would only highlight the bit I've coloured yellow in this example. It does not matter if you accidentally highlight an extra space at the end.]

Dooyoo Web Search
This bookmarklet may be the most useful of all. This will search the internet for any word(s) you highlighted, or any words you enter in the 'prompt' box if you didn't highlight any text. It makes searching online much faster and easier.

Search Google
Activate this bookmarklet after highlighting words you want to search for, or else enter your search words in the dialog that appears, and a new window will open directly onto the google.com search results. This can be an excellent tool for spotting plagiarism, by highlighting a sentence and then using this bookmarklet to search for matches.

Search FAST / AllTheWeb
Activate this bookmarklet after highlighting words you want to search for, or else enter your search words in the dialog that appears, and a new window will open directly onto the FAST / alltheweb.com search results.

Search AltaVista
Activate this bookmarklet after highlighting words you want to search for, or else enter your search words in the dialog that appears, and a new window will open directly onto the Altavista.co.uk search results.

Find Related Pages indexed in Google
This uses that great "what's related" search feature in Google to look up pages related to the one you are viewing when you use the bookmarklet.

Bookmarklets from Accessify

Convert abbreviations and acronyms using Acrobot
Highlight some text on your web page (or perhaps some text that you are entering into a <textarea>, for example a Blogger or MovableType post), then run this favelet - the highlighted text will be passed through the Acrobot, converting all your acronyms and abbreviations. Please note: this has been tested in IE5 and IE6 on Windows but does not always appear to work with <textarea>s in Mozilla (although any other text highlighted on the page does work OK).
[Thanks to Matt for providing!]

Show and label divs with ids
When designing a web page, you will often use ids in <div> tags to enable precise positioning using Cascading Style Sheets. This favelet highlights ALL <div> tags with a red border and labels each one with an id.

Show and label divs with classes
Exactly as above, but this time only <div>s that have a class are labelled.

IE compatibility mode
Not quite sure about how you might use this - we have yet to read up on this document property (document.compatMode). Only works for Internet Explorer.
[suggested by Jeff Rhodes at the Internet Association Corporation]

Alt attributes - show all
Displays all images on the page, alongside their alt attributes - useful for checking that alt attributes match up with image.

Alt attributes - images missing alt attribute
Displays all images on the page that do not have any alt attributes - useful accessibility checking tool. Remember, an image such as a spacer gif or an image used as decoration (such as a lined pattern) should use alt=" " (with a space between quotes).

Disable stylesheets
Does exactly what it says on the tin ...

Enable stylesheets
Does exactly what it says on the tin (assuming you've just used the 'disable stylesheets' favelet) ...
[suggested by Heather James]

Show table headings <th>
Highlights table headings (yellow text on black background) - use this to see if table headings really are <th> tags or whether plain old <td>s were used instead.

Images list
Displays a list of all images on the page, excluding invisible spacer pixels. Also shows the file size for each image alongside the image

Links - titles and hrefs
Shows all links on the page and the contents of the link (text and/or images). Also shows title attributes of each link (if present - very useful for assessing how accessible your links are.

Show Style sheets
Shows the style rules, as parsed by the browser, in a new window.

Show links
Highlights links on the page in glorious garish lime

Import all these favelets in one go

Other favelets

Show table cells <td>
Highlights table cells - changes border colour, background/text colour and adds padding to cell contents.

Show all DIVs
Highlights all <div> tags on the page with a 2-pixel red border.

General page stats
General page statistics, including when the page was last updated, what forms and styleSheets are linked, how many images, how many links and so on.

Form fields and values
Displays all form attributes, for every form on a page - useful debugging tool.

Meta data
Shows all meta tag data for the page (in case you are unable to view source, or source code is messy!)

Page dependencies
Lists page dependencies, including external script files (.js), external style sheets (.css) and images. Please note: this script is over the 508 character limit and may not work on all browsers.

Show tables
Dead simple - just places a solid black border around any table in the current document (but not cells within the table)

Bookmarklets from Pixy

My Favorite Favelets

Checking the Code

Following favelets send the displayed document to another website which will proccess it (in new window).

Anthony's Web Site