Bookmarklets

JavaScript Widgets

by Mark Brautigam

Get It

Drag into your browser toolbar:

» Google
» Amazon
» Wikipedia
» Validate HTML
» Validate CSS

Purpose

Bookmarklets are small JavaScript files. They are wrapped in a function. You can use them to do many things on your page, such as looking things up, changing styles, and cataloging links.

Put these in your menu bar and they will perform often-performed tasks for you. These particular bookmarklets do these things:

How It Works

To make a bookmarklet out of a JavaScript snippet, you need to wrap it in a JavaScript function and remove the spaces from the code (usually by replacing them with %20).

To install a bookmarklet, just drag it to your browser toolbar.

Google Search

This performs a Google search of the selected text. Show source code Try it

javascript:void(
  window.open(
    'http://www.google.com/search?q='+
      getSelection().toString().replace('%20','+'))
);

Amazon Search

This performs an Amazon site-wide search for the selected text. It is particularly useful with ISBNs. Show source code Try it

javascript:void(
  window.open(
    'http://www.amazon.com/exec/obidos/search-handle-url/?field-keywords%3D'+
      getSelection())
);

Wikipedia Search

This performs a Wikipedia search for the selected text. Show source code Try it

javascript:void(
  window.open(
    'http://en.wikipedia.org/wiki/Special:Search?search='+
      getSelection().toString().replace('%20','+'))
);

Validate HTML

This validates the current page using the W3C HTML Validator. The page must be accessible online for this to work. (That is, the page cannot be "localhost" but must be publicly accessible via DNS or IP address.) Show source code Try it

javascript:void(
  window.open(
   'http://validator.w3.org/check?uri='+escape(window.location))
);

Validate CSS

This validates the current page using the W3C CSS Validator. The page must be accessible online for this to work. (That is, the page cannot be "localhost" but must be publicly accessible via DNS or IP address.) Show source code Try it

javascript:void(
  window.open(
    'http://jigsaw.w3.org/css-validator/validator?uri='+
    escape(window.location))
);
Copyright © 2007–2014 Mark Brautigam

The Purpose

I wanted to have menus so users can quickly navigate from project to project within each category (e.g. Animation, JavaScript, PHP/mySQL).

I also wanted to show the assignment, rationale, or case study for each project without it intruding on the project itself.

And I wanted to have quick access to validation methods that I use frequently while doing development.