Small utilities in JavaScript

Menus, forms or games using JavaScript are rather popular for quite a while. However, it is less known that complete scripts can be used as a URL for a link or in the browser address bar, which provides many possibilities for extending the browser functionality.

The following scriptlets can be added to the favourites or bookmarks. They can be applied to any loaded page. Ready-to-use IE-favourites are available in a ZIP-archive.

JavaScript-Lens

One of Operas goodies is the zoom function which allows rescaling a displayed page. Using some javascript IE can do this, too.

The following script magnifies the page by 125%:

javascript:document.all.tags('body')[0].style.setAttribute('zoom','125%','false');

Downscaling to 3/4 of the original size is also possible:

javascript:document.all.tags('body')[0].style.setAttribute('zoom','75%','false');

Original size is defined as 100%:

javascript:document.all.tags('body')[0].style.setAttribute('zoom','100%','false');

HTML

One can pass the current URL to another site, e.g. the W3C online HTML validator:

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

Layout

Many pages use borderless tables for layout purposes.

These can be made visible by adding red borders:

javascript:for(j=0;document.all.tags('td')[j];j++){document.all.tags('td')[j].style.setAttribute('border','1px solid red','false')};

The amount of pictures added by using <img> can also be of interest:

javascript:alert('This page contains '+document.images.length+' images');

Links

Counting hyperlinks can be pretty easy:

javascript:alert('This page contains '+document.links.length+' Links');

Sometimes it is hard to find them. The following scriptlet draws red borders around <a> links:

javascript:for(j=0;document.all.tags('a')[j];j++){document.all.tags('a')[j].style.setAttribute('border','3px solid red','false')};

Filters

Current IE versions are able to apply image processing to html tags and entire pages.

This script inverts all colors:

javascript:document.all.tags('body')[0].style.setAttribute('filter','invert()','false');

For colorblinds or printing purposes take a look at the grayscale image:

javascript:document.all.tags('body')[0].style.setAttribute('filter','gray()','false');

The x-ray effect is more like a gadget:

javascript:document.all.tags('body')[0].style.setAttribute('filter','xray()','false');

And it is possible to mirror a page horizontally or vertically:

javascript:document.all.tags('body')[0].style.setAttribute('filter','flipv()','false');

javascript:document.all.tags('body')[0].style.setAttribute('filter','fliph()','false');

Many thanks to Fabrizio Da Ros for his help in IE6 compatibility issues!