Bookmarklets  (JavaScript Favelets)

Location: http://www.mvps.org/dmcritchie/ie/bookmarklets.htm
Home page: http://www.mvps.org/dmcritchie/excel/excel.htm
  Continue Testing at #ATag   [View without Frames]

What are Bookmarklets    (#what)

Something that I recently discovered (Nov 2003) is bookmarklets which I've found very interesting and useful, even though I haven't tried to code any of my own, except to change a few to do something else.  [also known as a favelet]

Bookmarklets are short JavaScript programs that can be run from the address bar, therefore they can be bookmarked.  Here is a simple test you can type directly into your address bar -- javascript:alert('Testing 1-2-3')

What is more interesting about bookmarklets is that you can temporarily change the appearance of a web page in your browser.  Reloading a page by hitting the Reset button (F5) does away with your temporary changes.

Some useful things that can be done with bookmarklets is restoring your ability to control the appearance of a webpage.  Perhaps one of the most useful is the ability to change the colors to black text with a white background (Zap Colors, Plain B&W).  Perhaps the web page has an annoying background image that follows you as you page up or page down, it can be eliminated (Remove Background Image, zap style sheets).

Some really interesting things you can do are marking the borders of tables (show blocks), view a selection in a new window (view selection), highlight links, distinguish between internal and external links (int/ext links), restore context menu, even sorting a Table (sort table) -- Sort Table does not appear to be working.. 

How to use bookmarklets:     (#how)
Combining  "highlight links" (IE only version),  and "int/ext links"  (any browser)  really makes links show up.  Click on both links on the left to see the change and differentiation between internal or external links.  Your browser's Reset button (F5) will reload the original unmodified web page.  (Examples of internal link, external link) -- if you are using Mozilla: use this highlight links (Mozilla version) instead marked as not working within frames, then use same int/ext links.  Warning:  the Mozilla version wipes out the coloring of links if using "int/ext" bookmarklet, so use before use of "int/ext" bookmarklet.  Coding highlighted material in HTML (see CSS (Cascading Style Sheets section).  Also see Paren tips and HREF visible above. 

How to install bookmarklets:
Installation is simple, simply drag a bookmarklet from a web page with bookmarklets to your favorites, bookmark file, or your links toolbar. See the where section below for links to pages with bookmarklets.

Another somewhat related web page are my pages on Right Click (Context) menus in Internet Explorer and in Firefox.  It was in learning more about context menus that I ran across bookmarklets.  I hope you find both subjects as interesting as I have.

The main pages for bookmarklets that I have come across are listed in the next section.  You can generally test a bookmarklet on the same page you obtain it from, in any case if you want it simply drag to your favorites or links toolbar for your own use.

A typical bookmarklet allows you to view a page in a new window without frames.  Another way of viewing without frames is to hold the SHIFT key and click on a subtopic -- if there is one.

Additional introductory material can be found as Bookmarklet - Wikipedia, the free encyclopedia

Where can I find Bookmarklets (#where)

Bookmarklets are short pieces of Java code that can be run from the address bar of your browser, favorites, links or a folder.  Some typical things that one do is remove a background image from a web page, change the background or text color, search and highlight words and phrases, invoke a search or find an acronym based on the selected words. 

Sorry for not listing specific bookmarklets but I have little feel for who actually originated a bookmarklets and prefer to let you pick your own from these links.

Pages with annoyances   (#annoyances)

You can use Accessibility options to change how you view pages: 
Tools, Internet options, General (Tab) then -- Accessibility... (button), Ignore font styles specified on web pages.  Font... (button), choose Language script font (Latin Based), Web Page font: (Arial or Times Roman), Plain text font (Courier New) or your own choices.

You can use bookmarklets to make individual pages more readable. 
Interesting how some pages seem to include annoyances similar to things they want to make better.  Examples of obnoxious or unconventional pages that you can be improved (made more readable by changing font/background colors.  These are all good pages and free of advertising, but they all have a readability problem -- if I didn't like the content at all they wouldn't be listed. 

Many of the pages below have disappeared or have become more readable since this list was created.  Geocities sites went into internet history on Oct 26, 2009 and most Geocities sites are simply gone forever with the demise of many of their authors.  Yahoo prevented archiving around 2006.

Some site specific Examples, to pick up hidden features   (#sitespecific)

Jesse Ruderman (squarefree.com) has a page on some Site-specific Bookmarklets [suggest for Paren Tips to use font color green, and back color of #EEECB9]

Don't Do Bad Things to HTML   (#dontdobad)

Managing Bookmarks on Links Toolbar     (#manage/#links)

Folders on my machine   (#folders)

Administrator (folders):  Favorites, bookmarklets and Links.  You will find the Links within your favorites, and I have included a " Bookmarklets" folder (with a space) in favorites as well for more permanent storage.  To rearrange items in links bar drag them, if you need to see everything at once in links bar then use favorites, then links (gray background).

To copy an item from a folder to another folder hold ALT while dragging.  To get to the Links folder:  Favorites, Organize favorites, click on a folder, the type "L" and enter until "Link" shows up then Right-click on Links.  You can move (drag) or move (Alt+drag) to copy into another folder.

Tool Bar
IE Example, List of items in each folder (needs updating)

In Firefox drag or select and copy then paste into another location in bookmarks, bookmarks bar, or other location.
 

bookmarksbarbookmarksbar2
Firefox example (not documented but similar to previous)

Bookmarklet editors   (#editors)

It is kind of hard to start right in with bookmarklets and JavaScript, so here are a couple of editors to help get you started.

Sandbox for Some “A” Elements   (#ATag)

These bookmarklets based on “Paren Tips” from squarefree.com, if they don't work with named anchors then please update to a more current version of “Named Anchors”  It would be nice to get these to get all of these to work with all of the Tag Elements they can be used in, but these are sufficient for such pages as my Search page and my Excel index page and some of these bookmarklets are included on those pages for ease of use. 

The changes made by bookmarklets are normally temporary, but you can make a copy of the file with the generated Source bookmarklet found at squarefree.com. You can see an example of the results generated if you used the three buttons, along with "Show Blocks" and then used the "generated source" bookmarklet you could save the completed example that is shown v herev.  So you can see you can do some very powerful things.  (Use bookmarklets used in Firefox since "Show Classes and IDs" is better than "id visible")

paren tips -- click on link at left to see title= tooltips (this Bookmarklet is from squarefree.com with color modified)
Attribute TITLE only processing A, but is valid in all elements but BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE
HREF visible -- click on link at left to make HREF links visible (this Bookmarklet is modified by D.McRitchie from “Paren Tips” found at Squarefree.com
Attribute HREF only processing A, but is valid in A, AREA, LINK, and BASE.
Another bookmarklets solution is to create another page that shows the links, see bookmarklets.com tools look for “list of all links” and click on it.  May not work on a Geocities sites if using frames (<frameset ...>).
Alternatives:  Web Developer extension (Information menu): Display Link details (persistent), which shows relative pathname as coded.  This bookmarklet shows the full pathname.
Fails to work for this site:  http://www.geocities.com/aw3004/my-webt.htm -- hasn't failed on any other site that I know of.
size: Web Page Speed Report - WebSiteOptimization.com -- click on link at left to get a report of download size for current page.  This Bookmarklet was created by D.McRitchie after studying how to make make a Firefox Keyword Shortcut to invoke a another size with the current site included in the link. The link invoked is http://www.websiteoptimization.com/services/analyze/wso.php?url=
Named Anchors -- get current copy from squarefree.com, see note above
Attribute NAME only processing A, but is valid in A, AREA, and a few others
Show Classes and IDs -- Mozilla only -- get current copy from markl.f2o.org
Attribute CLASS   valid in All elements except BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE
Attribute ID   valid in All elements except BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE
style sheet:  this bookmark requires access to http://markl.f2o.org/utilities/show_class_id.css No longer available
Alternatives:  Web Developer extension (Information menu): Display Anchors (persistent), or of less use Display IDs and Class Detail.
-- alternative for IE --
id visible -- click on link at left to make id links visible (this Bookmarklet is modified by D.McRitchie from “Paren Tips” found at Squarefree.com,
Attribute ID   is valid in All elements except BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE
Personal use makes extensive use of: A, Hx, P, BR

--no alternative created for class= --

Reset (F5)  -- simply same as hitting F5, but this coding may be more than what F5 actually does:
         javascript:void(window.location.reload(true))

Make your own Bookmarklets     (#make)

You won't be able to find bookmarklets that do exactly what you want everytime, and work in all browsers.  So eventually you will have to make your own.  On a laptop the colors for a link and for a visited line are almost indistinguishable.  That could be alleviated by using a bookmarklet to Strike Visited Links , or by coloring the visited links RED.  Also if you are using Firefox you can also make a keyword shortcut with a shortcut name of say red:.

To generate a link you can use any of the several pages that do this such as Jesse Rudeman's Make a User Style Bookmarklet, there is something set up to change the links, but for this all you really want is this part, and to name the shortcut “Links Visited to RED” as on Links Visited to RED 

:visited, :visited * {color: #FF0000!important;}
and the generated bookmarklet on your links bar looks like: (there must be no CRLF in actual code) 
javascript:styles=':visited, :visited * { color: #FF0000!important; }'; 
newSS document.createElement('link'); newSS.rel = 'stylesheet'; 
newSS.href = 'data:text/css,' + escape(styles); 
document.documentElement.childNodes[0].appendChild(newSS); void 0
while the code on this page looks like this: (again there must be no CRLF in actual code) 
<a class="bml" href="javascript:styles=':visited, :visited * { color: #FF0000!important; }'; 
newSS = document.createElement('link'); newSS.rel = 'stylesheet'; 
newSS.href = 'data:text/css,' + escape(styles); 
document.documentElement.childNodes[0].appendChild(newSS); void 0" id="Links Visited to RED">

Simple changes to really neat Bookmarklets   (#simple)

This really neat bookmarklet for Wayback was modified to use "/*dc_/" instead of "/*/" which invokes the Wayback Machine ready for a comparison between two versions (dates) of your choice.  You are prompted with the current webpage as the page to be inputed into the wayback machine.  The current page is not old enough yet but you can check out the button: Wayback

javascript:void(Qr=prompt('What URL do you want to find in the Wayback Machine?',location.href));if(Qr)location.href='http://web.archive.org/web/*dc_/'+Qr;

Same thing without the prompt: i.e. http://web.archive.org/web/*dc_/http://www.mvps.org/dmcritchie/ie/bookmarklets.htm

javascript:location.href='http://web.archive.org/web/*dc_/'+document.location.href;

or what I'm actually using now, with a keyword shortcut of "archive:" (note the colon that I like to include):

javascript:location = 'http://web.archive.org/web/*dc_/'+escape(location); void 0

The Web Archive (archive.org) also known as the "Wayback Machine" will not compare an old version to the current web page, but you can compare the HTML source code yourself using the "PageDiff" extension.

H3: Some Data for Quick Testing (#h4testid)

Test of paragraph   (#ptest)

test of name in paragraph.  Second sentence

test of href in A going to #h3testid

testing id/title in A   (#idtest)

testing name/title in A   (#nametest)

Test Area -- Sandbox       (#test)/  (#sandbox)

Hopefully you will install many of the bookmarklets from their sources and test them here as well as the bookmarklets already described ("highlight links",  and "int/ext links")  Text in Red, Green, Blue.  [Mozilla: use this highlight links instead marked as not working within frames] and the Mozilla version wipes out the coloring of links if using "int/ext" bookmarklet.  For testing 404 example.com is reserved as a nonexistent domain.  URL addresses that are not hyperlinks:  www.ibm.com, http://support.microsoft.com  Phone numbers: 526-555-1212, (526)-555-1212, 555-1212.

Background
Image		 Pictures
*  * 		Wingdings (font)
J (letter J) 		bgcolor
(Red) 		bgcolor
(Green) 		bgcolor
(Blue) 		Random
bgcolor

 0  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 á Test bookmarklets:  grayscale [IE only]
unfortunately this very small bookmarklet only works in Internet Explorer (squarefree.com).  Does not work in Mozilla I guess the closest with Mozilla would be to print preview to a B&W printer.

Mozilla -- Picture without a link     This Group of links can be tested in Launchy as well (Launchy is a Firefox Extension)
Mozilla -- Picture within a link to an HTML (.htm) page
Mozilla -- Picture within a link to an a different JPEG (.jpg) file
Mozilla -- Directory within a link (blocked by index.htm on server)
Mozilla -- Directory within a link (allowed)
Mozilla -- Directory within a link you would have access to file://c:\temp\   if you have or create a c:\temp directory.
temp directory [file://c:\temp] -- link on local directory
internal link to ../firefox/firefox.htm on this site.
external link to mozilla.org

off-topic for now:
Patently Absurd, James Gleick, Once the province of a nuts-and-bolts world, patents are now being applied to thoughts and ideas in cyberspace. It's a ridiculous phenomenon and a nightmare for e-commerce.

Other types of images: PNG, MNG, JNG and Mozilla M17: Slashdot Overview

Use the RESET button (F5) to reload the webpage without modifications.

zap presentational html -- F5 to Reset -- from Jesse Ruderman's squarefee.com#zap.html, Removes most presentational attributes and tags while leaving style sheets intact.  Removes all background images including those within tables. [details]

James B1 44 21 E1 M
Mary B2 88 18 E6 F
John B3 11 74 E4 M
Patricia B4 45 73 E8 F
Robert B5 445 24 E9 M
Linda B6 13 37 E5 f
Michael B7 93 24 E7 m
Barbara B8 45 27 E2 f
William B9 26 69 m
Elizabeth BB 66 30 E3 f
  Sorting tables (#sorttable)
-- The following is my own experience, yours may vary --
Sort Table , strictly a TEXT sort (digits, caps, lowercase).  Even though the Sort Table bookmarklet may work here as an HTML link in IE 6.0, it will not work from favorites/links (ok in IE 5.5), because it exceeds the IE 6.0 limit of 508 bytes.  Mozilla allows bookmarklets of over 20K bytes, see restrictions in Jesse's Bookmarklets - Browser support

Highlight Links, variations most Yellow IE only, one in garish green.  At least two toggle color, the one selected earlier for Mozilla works in both but it resets rather than retaining font color.

Count strings, images, fails in IE
Scroll Position, Show document size, Titles, all fail in IE

There are some embedded text comments within this sentence.  (is there show comment bookmarklet to show them in place, not as a separate list, or a symbol).

For additional options of sorting a table, within HTML instead of using a bookmarklet see this thread (Mike 2005-06-18).

Nesting Levels can be tested by topographic bookmarklets   (#nesting)

No Nesting Level 1, level 2, Level 3, Level 4, Level 5, Level 6, Level 7, Level 8, Level 9, Level 10, Level 11, Level 12, Level 13, Level 14, Level 15, Level 16, Level 17 (17)(16)(15)(14)(13)(12) (11)(10)(9)(8)(7)(6)(5)(4)(3)(2)(1) Not nested.
One more Nesting Test for topographic bookmarklets boldItalicBlue
click on [topographic view] from SquareFree.   Note color differences for even the 16 basic CRT colors are hard to see on laptops.

HREF target="_blank" target="_top"   (#hreftest)

  • firefox, use of _blank for a new window.  In Firefox gets a red hover background with white ext as a warning.  You can, of course, force to open any link in a new window with right click then Open.
  • Internet Explorer, use of _top

test some bookmarklets construction -- ignore this part


Text Font to Arial javascript:void(document.body.style.fontFamily='arial')
-- compare to userstyles
-- Always use my chosen font type (e.g., Times New Roman) * { font-family: serif ! important; }
javascript:void(document.bgColor='#FFFFFF') javascript:void(document.bgColor='#FFFFFF') -- Bookmarklets - Page Look tools

Limitations you may run across   (#limits)

Working with Frames   (#frames)

Have a little fun with frames encompassing this page ...  [View without Frames]
Create an additional vertical split or an additional horizontal split

Splitting a frame can also be done with Bookmarklets (i.e. IMS Pages | Mozilla).

Viewing a selection or a frame in another webpage can be done with a bookmarklet.

Wanted         (#wanted)

Eveything that was listed here as been solved, most of the solutions were Firefox extensions (including one for IE) see Firefox webpage on my site.
Remove This Frame would be nice in a bookmarklet, in Firefox, and in Web Developer (Firefox extension)
Examples abound such as Geocities, and Lycos (Tripod) sites, where ad blocking leaves empty frames that occupy space perhaps even worse than the original problem.  Also sites that have a frame on the left and a frame to the right of the content in the middle.

 

Firefox Notes         (#firefox) Mozilla

Not much point to maintaining this area, since I now have a Firefox webpage, and have had an Internet Explorer (IE6) before that.
Links to Bookmarklets and where to get them are above under #where.
If you have an interest in bookmarklets or in reducing clutter on you bookmarks toolbar and are using Firefox, take a look at my Firefox page on Keyword Shortcuts. Keywords are only available in Firefox and can act as an alias to url location or with substitution to bring up a specific filename, or as search terms for a search engine.  Keywords can also bring up several pages and apply the the same parameters or search terms for each page.
Excel questions not directly concerning my web pages are best directed to newsgroups
such as news://msnews.microsoft.com/microsoft.public.excel.misc where Excel users all around the clock from at least 6 continents ask and answer Excel questions. Posting suggestions and netiquette. More information on newsgroups and searching newsgroups. Google Groups (Usenet) Advanced Search Excel newsgroups (or search any newsgroup).
 
For bookmarklets and favelets which are javascript code the best newsgroup for asking questions would be comp.lang.javascript and see the FAQ
This page was introduced on November 21, 2003.
[My Excel Pages -- home] [INDEX to my site and the off-site pages I reference]
[Site Search -- Excel] [Go Back] [Return to TOP]

Please send your comments concerning this web page to: David McRitchie send email comments

Copyright © 1997 - 2006,  F. David McRitchie,  All Rights Reserved