Okay… We all know about the ‘javascript’ pseudo protocol and how wrong it is to use it within links to initiate functions. What I’m talking about here is doing some like this: (please don’t!)

<a href="javascript:func(this)">Linky</a>

There is one valid way to use it though… You’ve probably seen quite a few sites that have bookmark links intended for you to drag the link to your bookmarks panel within your browser. These links are not limited to plain old URLs! - You can actually put javascript within them (with the ‘javascript’ protocol) so when you click on one it can carry out something on the page you’re currently on. These are known as "bookmarklets" and can be really useful!

You can also use the address bar of your browser to try out quick javascript snippets (or long ones). Try it! Type javascript:alert('boo') into your address bar!

Ok, now try something a little cooler - go to a google image search results page and copy this chunk of code into your address bar: (Or drag THIS LINK into your bookmarks panel and click it)

 javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300;  y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function  A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute';  DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5;  DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

Make sure you try it out on a Google image search because it doesn’t work that effectively elsewhere… (btw, this is not mine, I found it here) - I think it also works on Amazon and FlickR quite well…

Some others which you might find useful:

To save these as bookmarklets drag the links to your bookmarks panel in your browser - also you can demo each one either by clicking on the link or copying the code and pasting it in to your address bar.

Toggling the visibility of all images on a page:

Toggle Visibility of Images: (Drag the link to bookmarks panel to save this or click it to see demo)

javascript:function toggle(i){i.style.visibility=(i.style.visibility==='hidden') ? 'visible' : 'hidden';}var i=document.getElementsByTagName('img'),l=i.length;while(l--){toggle(i[l]);}

Or highlighting all links within a page:

Toggle (highlight links): (Drag the link to bookmarks panel to save this or click it to see demo)

javascript:function hl(i) {i.style.backgroundColor = (i.style.backgroundColor=='yellow') ? '' : 'yellow';i.style.color=(i.style.color=='black') ? '' : 'black';i.style.padding=(i.style.padding=='2px') ? '' : '2px';}var a=document.getElementsByTagName('a'),l=a.length;while(l--){hl(a[l]);}

Another useful one might be to make an entire page high contrast (and remove images):

Toggle High Contrast: (Drag the link to bookmarks panel to save this or click it to see demo)

javascript:function contrast(i){i.style.backgroundColor=(i.style.backgroundColor=='yellow') ? '' : 'yellow';i.style.color=(i.style.color=='black')?'':'black';i.style.backgroundImage =(i.style.backgroundImage=='none')?'':'none';i.style.border=(i.style.border=='none')?'':'none';}var i=document.getElementsByTagName('*'),l=i.length;while(l--){contrast(i[l]);}function hide(i){i.style.visibility=(i.style.visibility=='hidden')?'':'hidden';}var i=document.getElementsByTagName('img'),l=i.length;while(l--){hide(i[l]);}

Sometimes you might want to disable all styles within a page. Most browsers have a built-in function to do this but just encase:

Disable Styles: (Drag the link to bookmarks panel to save this or click it to see demo)

javascript:function remove(i){i.parentNode.removeChild(i);} var s=document.getElementsByTagName('style'),l=s.length;while(l--){remove(s[l]);} var lin=document.getElementsByTagName('link'),l=lin.length;while(l--){if(lin[l].getAttribute('rel')=='stylesheet') remove(lin[l]);}var a=document.getElementsByTagName('*'),l=a.length;while(l--){if(a[l].getAttribute('style')) a[l].setAttribute('style','');}

Change the font: (Obviously this only works with fonts you have installed on your local machine)

Change font: (Drag the link to bookmarks panel to save this or click it to see demo)

javascript: var f = prompt('New font?','Times New Roman');function cf(f) {var a = document.getElementsByTagName('*'),l=a.length;while(l--){a[l].style.fontFamily = '\''+f+'\'';}}cf(f);

That’s all I’ve got for now. If you can think of any extra in-page functions which would be useful or if you have any bookmarklets which you use a lot then please share!

What’s great is that all these custom made functions are accessible upon a click of a button! So simple! -

If you’re thinking of developing quite an advanced bookmarklet then you might as well just make it as a user-script (Using GreaseMonkey or Trixie). To be honest though, I prefer having buttons up in my bookmark panel which I can click when needed.

You can find tonnes of other useful bookmarklets here (https://www.squarefree.com/bookmarklets/webdevel.html) and here (http://www.bookmarklets.com/tools/categor.html).