(Site Identification)

'Eye' Focus: Web Support Tutorials

Table of Contents: [ Introduction | Bookmarklets | References ]

JavaScript: Bookmarklet

Introduction

A bookmarklet is a utility JavaScript that allows you to temporarily modify a web page currently displayed by a browser, or to perform some operation related or unrelated to that document. Quite often there is a lot of information provided in a web document, and it can be difficult to see or find much of that information. That is where a bookmarklet gets its usefulness.

Bookmarklets, sometimes also called Favlets, can offer a lot of functionality to your old browser, as well as new usefulness and functionality. Don't be afraid to explore and experiment.

Before You Begin

Before we get to the bookmarklets themselves, let's discuss how you would put them into use on your browser. Keep in mind that these bookmarklets are JavaScript. To be able to use them, your browser must first support JavaScript.

Most browsers support JavaScript by default, but you might check to see that it is turned on if you are not sure if the functionality is active. To activate your browser's JavaScript support, look in the browser configuration menus for the ability to allow JavaScript functionality.

Using a Bookmarklet

To use a bookmarklet you simply need to click on it to activate its operation. A bookmarklet can be activated from a link in a web page, like we present in this page. However, they are more useful when you can activate them from any web page.

To use a bookmarklet from any web page, you simply add that bookmarklet link to your browser's bookmarks. This is done by 'right clicking' on the link and selecting: 'Bookmark this link', 'Add to favorites', 'Add link to bookmarks', or whatever wording your browser uses. Be sure to name the bookmark with something that describes what the bookmark will do. Remember too that you can organize your bookmarks into folders.

Now that you have created your new bookmark, you can now use this bookmarklet from any site and on any web page. Since these bookmarklets are actually running JavaScript, support for each bookmarklet will be dependent on your browser's support for that JavaScript code. If a particular bookmarklet does not work for your browser, then find one that will.

Browser Support

We attempt to make our bookmarklets compatible with most browsers, but sometimes a particular function simply will not work on some browsers. However, we are constantly looking to make the bookmarklets work on a wider variety of browsers. So, if you check back you may find more that you can use.

Below is a list of icons that are used to denote bookmarklet support with various browsers:

The Bookmarklets

Most of the bookmarklets listed here are designed to be read from our server when they are executed. The reason for this is we actually use them, a lot. Plus, by using our bookmarklets in this manner, with anonymous function calls, we avoid the 508 character limit of Internet Explorer browsers.

A side benifit of loading the bookmarklet from the server is we are then able to ensure that everyone has access to the latest version of the bookmarklet. So, as we improve them and modify them, we ensure that everyone who uses the bookmarklets will always have access to the latest version.

REMINDER: Bookmarklets can only temporarily change the presentation of a web page. To return the page to its original presentation, simply reload or refresh the page with the browser's navigational controls.


(to Top) The Bookmarklets


Analyze Pictures (Gecko Browsers) (Internet Explorer) (Opera) [2004-04-26]

Analyze Pictures will open a new window with a list of the 'in-page' pictures displayed in the current document. The images are displayed along with its description, dimensions, and source location.
[View JavaScript Source for AnalyzePic]
(A customized version of the MyIE2 browser plugin, also known as PicList, written by ho99.)

Anonymous (Gecko Browsers) (Internet Explorer) [2004-04-22]

Anonymous will auto-complete all text input fields, check all the boxes, and select the last item of each set of radio buttons, of a Web form with the word 'anonymous' or an anonymous e-mail address. Great for testing forms.
[View JavaScript Source for Anonymous]
(A customized version of a bookmarklet by SCoooBY.)

Color Safe (Gecko Browsers) (Internet Explorer) (Opera) [2004-04-22]

Color Safe will instantly generate a web color-safe chart of the 216 colors classified as 'safe' for web designing. These colors have the least chance of shifting to some other color on all computing environments.
[View JavaScript Source for ColorSafe]
(A customized version of a bookmarklet by SCoooBY.)

Document Properties (Gecko Browsers) (Internet Explorer) [2004-04-26]

Document Properties will open a new window with a list of various details about the viewed document. This details include: document title and address, server information, and a number of detailed lists about the contents of document.
[View JavaScript Source for DocProperties]
(A customized version of a bookmarklet by Ross Shannon)

Document Size (Internet Explorer) [2004-04-22]

Document Size provides information on the current document size and estimated download times at various connection speeds.
[View JavaScript Source for DocSize]
(A customized version of a MyIE2 browser plugin written by ho99.)

E-Mail To Selected (Gecko Browsers) (Internet Explorer) (Opera) [2005-05-11]

This E-Mail bookmarklet makes use of your e-mail client. To use 'E-Mail To Selected' first select the an e-mail address in a web page, then click the bookmarklet to start an e-mail to that address. E-mail addresses are often not linked and this does the copy and paste for you in one step.
[View JavaScript Source for EMailSelected]
(This bookmarklet does not require an Internet connection to work, remote calls [file loading] is not necessary.)

E-Mail Web Address (Gecko Browsers) (Internet Explorer) (Opera) [2005-05-11]

This E-Mail bookmarklet makes use of your e-mail client. 'E-Mail Web Address' simply opens a new e-mail message with the subject being the web page name and the message being the web page address. A quick and easy way to e-mail someone an interesting web page.
[View JavaScript Source for EMailSite]
(This bookmarklet does not require an Internet connection to work, remote calls [file loading] is not necessary.)

E-Mail Web Address with Selected Text (Gecko Browsers) (Internet Explorer) (Opera) [2005-05-11]

This E-Mail bookmarklet makes use of your e-mail client. To use 'E-Mail Selected Text' first select some text in a web page, then click the bookmarklet to start an e-mail. The title of the web page will be used as the subject and the selected text will be placed in the body of the message.
[View JavaScript Source for EMailSnippet]
(This bookmarklet does not require an Internet connection to work, remote calls [file loading] is not necessary.)

Font Changer (Internet Explorer) [2004-04-22]

Font Changer works by simply setting all fonts throughout the page to a default font size and type. Font Changer is currently set to use: size 3 font (your web browser's default), and a font-family (or font type) of verdana, helvetica, arial, or sans-serif. The font-family will be selected from the fonts available to your browser in left-to-right order.
[View JavaScript Source for FontChanger]
(A customized version of a bookmarklet by SCoooBY.)

Highlight Links (Gecko Browsers) (Internet Explorer) (Opera) [2004-04-26]

Highlight Links works by changing the color, background, and border of all links, even images. Will change to a white background with the first click, then to a black background, and will continue to toggle from there.
[View JavaScript Source for HighlightLinks]
(A customized version of a bookmarklet by SCoooBY.)

Lynx View (Gecko Browsers) (Internet Explorer) (Opera) [2004-04-22]

Lynx View uses a service from the Delorie Software web site to simulate, in your browser, what might be seen by a visitor using Lynx, a text only web browser. This is especially useful for checking the readability and content flow of your document, just one of many requirements for making a site accessible.
[View JavaScript Source for LynxView]
(Based off of an Accessibility Toolbar from NILS.)

NoScript (Gecko Browsers) (Internet Explorer) [2005-05-07]

The activation of NoScript results in the death of all Scripts within the page. It won't display the HTML NOSCRIPT content, but the page's scripts are no longer functional.
[View JavaScript Source for NoScript]

Soundless (Gecko Browsers) (Internet Explorer) [2005-05-07]

Soundless stops all sound elements in the page by removing the sound from the page. The script even eliminates sounds provided in Java and Flash objects. To restore sounds and controls, simply reload the page.
[View JavaScript Source for Soundless]

View Cookie (Gecko Browsers) (Internet Explorer) (Opera) [2004-04-22]

View Cookie shows each of the variables stored in the browser cookie for the current site, server, or host.
[View JavaScript Source for ViewCookie]

W3C - Validate Doc W3C - Validate CSS W3C - Validate Link (Gecko Browsers) (Internet Explorer) (Opera) [2004-04-29]

These three bookmarklet tools utilize a service of the World Wide Web Consortium (W3C). They are useful in checking code integrity and compliance to help you produce error free pages.
[View JavaScript Source for W3CvalidateDoc]
[View JavaScript Source for W3CvalidateCSS]
[View JavaScript Source for W3CvalidateLink]

Web Speed (Gecko Browsers) (Internet Explorer) (Opera) [2004-04-22]

Web Speed uses the Web Page Analyzer tool, provided by WebSiteOptimization.com, to provide information on how fast your page will download via various Internet connections. The site will give you tips for how make your pages faster, too.
[View JavaScript Source for WebSpeed]
(Based off of an Accessibility Toolbar from NILS.)

WebXACT (Gecko Browsers) (Internet Explorer) (Opera) [2004-04-29]

WebXACT uses the Web Page Analyzer tool, provided by Watchfire.com, to provide information on the quality, accessibility, and privacy of your page.
[View JavaScript Source for WebXACT]
(Based off of an Accessibility Toolbar from NILS.)

Zap Colors (Gecko Browsers) (Internet Explorer) (Opera) [2004-04-22]

Zap Colors will remove all the backgrounds and colors of a page and set them to a default: white page, black text, blue un-visited links, and purple visited links. Zapping a page is useful when the original coloring of the page is just too difficult to read.
[View JavaScript Source for ZapColors]
(A customized version of a bookmarklet by Jesse Ruderman)


(to Top) References and Sources

We have made a number of references to the source of some of our scripts. We also recommend that you visit a variety of other sites that specialize in bookmarklets. These references and sources are listed below:

Bookmarklet / Favlet Sources

Other or Related Sources


[Updated: Sunday, November 18, 2007]