Anthony's Java Bookmarklet

Show my Bookmarks

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

Site Data

Validate Site

Selected Text

Manipulate Page

Misc

Bookmarklets/Favelets that work in Safari from Andy Budd

Amazon Bookmarklets

• Amazon.com book search
• Amazon.com general search
• Amazon.co.uk book search
• Amazon.co.uk general search

General Web Surfing

• MT post
• Convert long URL to "tinyurl"
• Email URL
• AutoFill Anonymous
• Make form Get
• Bablefish bookmarklet
• Google Translate!
• Full Screen

Web Development

• W3C (X)HTML validator
• W3C CSS validator
• Beta Validate
• Fussy Parsing
• Toggle Linked CSS
• Bobby check A
• Bobby check AA
• Bobby check AAA
• Resize browser to 640x480
• Resize browser to 800x600
• Resize browser to 1024x768
• PHP Function
• Show divs with colour
• View Cookies
• Web Page Analyzer

SEO

• Linking to this site on Google
• Pages from this site on Google
• Word count
• Keyword density check

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

• Ruler 1.2 (info)
• Show Specific Elements (info)
• Highlight Elements [MacIE] (info)
• Highlight Elements [Gecko/KHTML] (info)
• Google [selected] (info)
• Show IDs (info)
• User CSS (info)
• Maximize IE (info)

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.

Bookmarklets from Malevolent Designs

zoom lens

(Internet Explorer 5.5 upwards required)

• 50% zoom
• 100% zoom (reset to default)
• 200% zoom
• Make 640px wide page fill browser
• Make 800px wide page fill browser

validation

• Validate page (W3C)

accessibility

• Text-only browser (lynx-me)
• Total colourblindness (IE5 Win)
• Ultimate legibility test! (IE5 Win)

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

Bookmarklets from Pixy

My Favorite Favelets

Bookmarklets from Stilleye

Dynamic Source

Image Grabber

Want to steal an image? This image grabber will collect all images from a page for your convenience. Note: It won't collect background images in the HTML or through CSS.

Disable Stylesheets

How does the structured document look? Now you can see a site without stylesheets.

JavaScript Console NS4/IE/Moz

Ever feel like playing with your favorite website? Now you can. This little console allows you to run code. Have fun kids.

View Scripts & Stylesheets  IE/Moz

This is probably one of the handiest bookmarklets I've seen. Quick access to all the scripts and stylesheets included on a page. This one is rewritten from the 13th Parallel's bookmarklet. It has been encapsulated to avoid conflicting with page variables.

View Cookies  NS4/IE/Moz

Ever wonder what cookies sites are setting for you? Now you can see. Also great for use during the dev process.

View Sourcer  NS4/IE/Moz

This bookmarklet will show the source of documents. If it is a single page, you just get the source. If it is a framed site, you'll get a list of links to the source of all the framed pages.

URL From String  IE/Moz

If a URL appears on a page that isn't a hyperlink (usually happens in forums and newsgroups), just select the text you want and turn it into a URL! Test it here: http://www.yahoo.com/.

Bookmarklets from Sam-i-am

Web Page Debugging and Development Bookmarklets

Bookmarklets from 508 compliant

Accessibility

Accessibility

Kill Style Sheets

Grayscale the Page

IMGs missing ALTs

Bookmarklets from About.com

Bookmarklets from blog of francois

1. ! (view comments)
   Expose the invisible comments in the code. Sometimes useful to understand the layout.
   Source: endquote.com
2. Add borders
   Adds a green border around each element on the page.
   Source: Squarefree
3. ancestors
   Lists the ancestors of any element you hover over in the status bar. One of my favourites.
   Source: Squarefree
4. Check Links
   Check for broken links on the current page.
   Source: favelets.com
5. clone slowly
   Clones page several chars at a time (to test incremental rendering). Sheer genius.
   Source: Squarefree
6. GetPageSize!
   See no.5 above
7. IE compatibility mode
   Pretty simple: Makes IE report whether it's in 'Quirks' mode or 'Standards' mode. More info on CSS-discuss.
   Source: Accessify
8. list classes
   Lists classes used in the document (in a new window).
   Source: Squarefree
9. Show and label divs with classes
   Highlights ALL div tags with a red border and labels each one with an id.
   Source: Accessify
10. Show and label divs with ids
    Exactly as above, but this time only divs that have a class are labelled.
    Source: Accessify
11. Show Divs, Spans & P
    Outlines <div> (solid lines, colours indicating depth of nesting), <span> (dotted green) and <p> (dotted blue) tags.
    Source: Started at web-graphics.com, but I later changed it to show nesting and paragraphs. Links to this stylesheet on my server. If you want to use it, copy it to your server and update the bookmarklet.
12. Show Specific Elements
    Brings up dialog boxes asking for the element, and what colour to highlight it in. Interesting.
    Source: centricle.com
13. Show Tables
    “Turns on table borders and color codes them to reveal nesting. This script inserts a link node into the current document head, which pulls in a stylesheet I maintain on my server. Feel free to download and adapt this to your own purposes: tableborders.css”
    One of my favourites. I recommend you copy the CSS to your own server if you plan to use it.
    Source: sam-i-am.com
14. View CSS
    Just as useful for web designers as Show Tables, this one pops up a window with links to all linked stylesheets, enabling you to view or download them.
    Source: Liorean’s web coding depot
15. ViewScripts
    Similar to View CSS, pops up a window allowing you to view the linked and embedded javascript.
    Source: Liorean’s web coding depot
16. zap presentational HTML
    Removes most presentational attributes and tags while leaving style sheets intact.
    Source: Squarefree
17. Zoom in
    This pair will zoom in on the current page in 50% increments. Great for pixel level debugging and using with Element Ancestry to click on exactly the element/screen are you are interested in.
    Source: sam-i-am.com

Also make sure you add the following extras — Links List, Images List and Oper Frame in New Window — to IE's contextual (right-click) menu:

You get them with Microsoft's Web Accessories for IE 5. If you install the Google Toolbar, you get some more useful options in this menu, e.g. Google Search. See also my other tips on customising IE.

Finally, these bookmarklets are mostly only useful to web developers. This is not all they’re good for. Bookmarklets.com especially have bookmarklets for just about anything.

Thank you

Note that I am not the creator of any of the above bookmarklets. I duplicate them on this page as a handy backup for myself, like when I need to customise a new PC. If any of the authors would like their bookmarklets removed from here, and their site linked instead, they need but ask.

Bookmarklets from Simon Willison

I've long been a proponent of flexible web pages rather than restricting sites to a hard coded width in pixels, but now that I've started surfing at 1280x1024 I'm beginning to realise how true the statements about an optimum width for readable text really are. The simple solution would be to surf with my browser window resized to a sensible size, but old habits die hard. Instead, I made myself the following bookmarklet:

Narrow

It resizes the current page to be 500 pixels wide, which for most flexible designs makes the text much easier to read. It's only tested on Firebird. I also find Verdana to be the most readable of the web fonts, so I've created the following bookmarklet which alters the default text style for the page - ideal for reading Slashdot ;)

Verdana

Both bookmarklets are extremely simple, but I have been using them all day and have found them very useful.

Make fixed fonts resizable in IE (drag it on to your links bar and use it on any offending pages, then resize text with ctrl+mouse wheel).

Disable stylesheets for current page

Bookmarklets from scriptygoddess

Get ALT Info

Bookmarklets from Make-believe

I coded up a little tool for web designers. It's a bookmarklet/favelet that provides you with a "height map view" of the page you're looking at—that is, more deeply nested elements are given a lighter background.

It's a hassle to explain, but if you click the link below you'll see what I mean.

Link: Topographic view

Refresh the page to restore it.

If you want to use it with other pages, just drag the link to your browser's Links bar. Then click it while viewing a page to see it in all its skeletal splendour.

• Navagation
  • weBLOG
  • Home Page
  • Photography
  • Links for Photos
  • Tips for Photos
  • Currently Reading
  • Advertising
  • Java Bookmarklet
  • Information about me
  • Web Page Information
  • Rings
  • Skins
• Interaction
  • online

• Credits
  • Anthony's Geek Content Management System based on ALA:Simple Content Management using REBOL
  • Hosting by Geocities
• Advertising
  •