Presented by edvakf

Hit-a-Hint Bookmarklet Generator

What's this page?

Hit-a-Hint was a nifty Firefox Addon that makes it super easy to select links with keyboard only.

Now I added full support for Firefox!! That is, this bookmarklet should work on Firefox 3.0 or above as well as Opera 9.5 or above.

Blog posts about this page:
http://d.hatena.ne.jp/edvakf/20081021/1224571807 (Japanese)
http://my.opera.com/edvakf/blog/2008/10/21/improved-hit-a-hint-bookmarklet-with-your-keybind (English)

Usage

Create a Hit-a-Hint by selecting the below options. The default is set as my own setting, which is pretty smooth already, but you are free to set your own keybind. Some non-standard or non-alphabetical keys may behave weirdly. As far as I tested, the options indicated below look ok.

When you are done with selections, press the Make Bookmarklet button below, and the bookmarklet link will appear. You can then right click on it, copy the link address, and use it just as any other bookmarklets.

My suggestion, if you are using Opera, is that save it as a bookmark and give it a nickname, say "hitahint". When it's done, go to advanced setting and add the shortcut;

Go to page, "hitahint"

for any key you like.

While hints are drawn, the browser will wait for the keys you choose below. Typing any other keys will remove the hints and bring the browser to the normal state.

Create

To use this, you must enable JavaScript.

Hint Keys:

Letters used for hints. (Please avoid backslash, single- and double-quotations. Other keys including numbers should work in theory, but I only tested with alphabetical keys.)

Open Key:

Key for "opening" the link, that is, if you select only one link then open it in the same page, if more than one then open it in new tabs. Pressing shift, ctrl or alt key with this key forces the link to open in new tab. (I recommend you keep this as "Enter", because Opera can open links in background tabs by pressing shift+ctrl together with Enter)

Enter Quote Doublequote Space Tab Backslash Backspace Delete Escape, or else type in here

Click Key:

Key that emulates normal "click" on the first element you select. This enables you to focus on input boxed, clicking javascript links, etc. Hints that can be "clicked" by this key are indicated with a different color (choose below). Hitting this key on a normal link opens that link just like with normal click. Any hints selected after the first are ignored by this key.

Enter Quote Doublequote Space Tab Backslash Backspace Delete Escape, or else type in here

Separator Key:

The letter that separates each hint you select. The hints are selected automaticaclly when your typed hint uniquely matches one of the hints displayed, otherwise you have to press this key to "select" that hint and choose next.

Enter Quote Doublequote Space Tab Backslash Backspace Delete Escape, or else type in here

Backspace Key:

Key to "unselect" the last choice.

Enter Quote Doublequote Space Tab Backslash Backspace Delete Escape, or else type in here

Link Color:

Hint color for normal links.
a

Clickable Element Color:

Hint color for clickable elements.
a

Selected Hint Color:

Hint color when it's selected.
a

Supplementary User JavaScript

These User JavaScirpts are not neccesary for the Hit-a-Hint bookmarklet. But they work very well together with it.

Accelerate hint drawing

Drawing hints is slow for the first time used in a page. This UserJS adds a style element on a page, which speeds up drawing of hints, in other words, you are always ready to Hit-a-Hint! (Supports the colors you picked above.)
HaH-accelerator.js

Kill page keyboard shortcuts

This UserJS prevents the keyboard shortcuts determined by page scripts while Hit-a-Hint is on.
HaH-kill-page-shortcuts.js

Disable focusing on textboxes when a pages is opened.

No more annoying pre-focus business.
disable-onload-focus.js

Release Information

2008-10-21: ver. 1.0: Release
2008-10-23: ver. 1.01: Bug fix (Thanks tyoro for reporting)
2008-11-10: ver. 1.1: Fixed XPath evaluation wrapper to handle multi-namespace document.; Added limited support for Firefox (Hitting click key for radio buttons, etc, does not emulate click, but only focuses on the element. Thanks Griever)
2008-12-19: ver. 2.0: Added support for an extention by UserJS; Added complete support for Firefox
2008-12-21: ver. 2.1: Bug fix for Firefox (Thaks CoolDriver)
2008-12-31: ver. 2.2: Fixed problem where color addition to a hint element by UserJS was not working

javascript:(function(_HaH){var originalTitle=document.title;var hintKeys=new String('%%HINTKEYS%%');var choices=[];var choice='';var xpath='//a[@href]|//input[not(@type=\x22hidden\x22)]|//textarea|//select|//img[@onclick]|//button';xpath+='|'+xpath.replace(/\/\//g,'//xhtml:');var defaultType='HaHxlink';function defaultAction(e){e.focus();var ev=document.createEvent('MouseEvents');ev.initEvent('click',null,null);e.dispatchEvent(ev)}var HaHElements=[{accessor:function(e){var tag=e.tagName.toLowerCase();return((tag=='a'&&/^(#|javascript:void$0$;?)$/.test(e.href))||/^(textarea|button|select|input|img)$/.test(tag));},type:defaultType,action:defaultAction},{accessor:function(e){return e.tagName.toLowerCase()=='a'},type:'HaHlink',action:(window.opera)?defaultAction:function(e){if(e.href)location.href = e.href;}}];if(_HaH&&_HaH.types){_HaH.types.forEach(function(item){if(item.xpath)xpath+='|'+item.xpath;HaHElements.unshift({accessor:item.accessor,type:item.type||defaultType,action:item.action||defaultAction,color:item.color,})})}function addCSS(){var style=document.getElementById('HaH-style-element');var d='#HaH-div-element';var cssText=[d,'span{font-size:10pt;padding:0pt\x20 1pt;margin:0;line-height:10pt;position:absolute;z-index:2147483647;opacity:.7;color:#000;}',d,'.HaHlink{background-color:%%LINKCOLOR%%;}',d,'.HaHxlink{background-color:%%XLINKCOLOR%%;}',d,'.HaHselected{background-color:%%SELECTEDCOLOR%%;}'].join('\x20');HaHElements.forEach(function(item){if(item.color)cssText+=d+'\x20.'+item.type+'{background-color:'+item.color+';}'});if(style){if(style.innerHTML!=cssText)style.innerHTML=cssText;}else{style=document.createElement('style');style.type='text/css';style.id='HaH-style-element';style.innerHTML=cssText;document.getElementsByTagName('head')[0].appendChild(style);}}hints=[];var df=document.createDocumentFragment();function castHint(_ele,_x,_y){for(var i=0;i<HaHElements.length;i++){if(HaHElements[i].accessor(_ele)){var _type=HaHElements[i].type;var _action=HaHElements[i].action;break;}}if(!_type)return;if(!hints.length)addCSS();var _text=createText(hints.length);var hint={element:_ele,type:_type,action:_action,text:_text,x:_x,y:_y};hint.hintNode=addHintNode(hint);hints[hints.length]=hint;}function addHintNode(hint){var span=document.createElement('span');span.className=hint.type;span.style.left=Math.max(0,hint.x-8)+'px';span.style.top=Math.max(0,hint.y-8)+'px';span.innerHTML=hint.text;df.appendChild(span);return span;}function getHintByText(txt){return hints[retrieveNumber(txt)];}function retrieveNumber(text){text+='';var num=0;for(var i=0,l=text.length;i<l;i++){var fix=(i==0)?0:1;var t=text.charAt(l-i-1);num+=(hintKeys.indexOf(t)+fix)*Math.pow(hintKeys.length,i);}return num;}function createText(num){var text='';var l=hintKeys.length;var iter=0;while(num>=0){var n=num;num-=Math.pow(l,1+iter++);}for(var i=0;i<iter;i++){r=n%l;n=Math.floor(n/l);text=hintKeys.charAt(r)+text;}return text;}function rectFixForOpera(e,s){if(!window.opera||e.tagName.toLowerCase()!='a'||s.cssFloat!='none')return null;var c=e.firstChild;var cIsAfterWhiteSpace=true;while(cIsAfterWhiteSpace){if(!c)return{left:0,right:0};cIsAfterWhiteSpace=(c.nodeName.toLowerCase()=='br'||c.nodeType==8||c.nodeType==3&&!/\S/.test(c.nodeValue));if(c instanceof HTMLImageElement||c.tagName&&c.tagName.toLowerCase()!='br'&&getComputedStyle(c,null).display=='block')return c.getBoundingClientRect();c=c.nextSibling;}return null;}function getAbsolutePosition(elem){var style=getComputedStyle(elem,null);var rect=rectFixForOpera(elem,style)||elem.getClientRects()[0];if(rect&&rect.right-rect.left&&style.visibility!='hidden'&&style.opacity!=0&&rect.left>=0&&rect.top>=-5&&rect.bottom<=window.innerHeight+5&&rect.right<=window.innerWidth){var html=document.documentElement;var body=document.body;return{top:(body.scrollTop||html.scrollTop)-html.clientTop+rect.top,left:(body.scrollLeft||html.scrollLeft)-html.clientLeft+rect.left}}return false;}function drawHints(){var div=document.getElementById('HaH-div-element');if(div)div.innerHTML='';function resolv(p){if(p=='xhtml')return'http://www.w3.org/1999/xhtml';}var result=document.evaluate(xpath,document,resolv,7,null);for(var i=0,l=result.snapshotLength;i<l;i++){var ele=result.snapshotItem(i);var pos=getAbsolutePosition(ele);if(!pos)continue;castHint(ele,pos.left,pos.top);}if(!hints.length)return;if(!div){div=document.createElement('div');div.id='HaH-div-element';}div.appendChild(df);document.body.appendChild(div);document.addEventListener('keypress',interpretHaHKeyStroke,true);document.title+='\x20-\x20';}function removeHints(){document.title=originalTitle;if(interpretHaHKeyStroke){document.removeEventListener('keypress',interpretHaHKeyStroke,true);}document.body.removeChild(document.getElementById('HaH-div-element'));delete hints,df,choices;}var baseFuncs={doNothing:function(){},pushChoice:function(mod){if(mod)return removeHints;if(choice!=''){choices.push(choice);getHintByText(choice).hintNode.className='HaHselected';choice='';document.title+='%%SEPARATORCHAR%%';}},popChoice:function(mod){if(mod)return removeHints;if(choice!=''){choice='';}else{if(choices.length){var lastchoice=getHintByText(choices.pop());lastchoice.hintNode.className=lastchoice.type;}}document.title=originalTitle+'\x20-\x20'+choices.join('%%SEPARATORCHAR%%');},pushLetter:function(mod,key){if(mod)return removeHints();choice+='';if(getHintByText(choice+key)){choice+=key;var lastHint=''+hints[hints.length-1].text;if(choice.length==lastHint.length||choice.length==lastHint.length-1&&retrieveNumber(choice)>retrieveNumber(lastHint.substr(0,choice.length))){getHintByText(choice).hintNode.className='HaHselected';choices.push(choice);choice='';document.title+='%%SEPARATORCHAR%%';}}var choicestring=(choices.length)?choices.join('%%SEPARATORCHAR%%')+'%%SEPARATORCHAR%%'+choice:choice;document.title=originalTitle+'\x20-\x20'+choicestring;}};var keyMap={'%%DELETECODE%%':'%%DELETEKEY%%','%%SEPARATORCODE%%':'%%SEPARATORKEY%%','16':'Shift','17':'Ctrl','18':'Alt'};var keyFuncMap={'Bkspc':baseFuncs.popChoice,'Space':baseFuncs.pushChoice,};hintKeys.split('').forEach(function(l){keyMap[l.charCodeAt(0)]=l});hintKeys.split('').forEach(function(k){keyFuncMap[k]=baseFuncs.pushLetter;});['Shift','Ctrl','Alt'].forEach(function(k){keyFuncMap[k]=baseFuncs.doNothing;});function defaultFuncTemplate(func){return function(mod){if(choice)choices.push(choice);var ary=[];choices.forEach(function(c,i){var hint=getHintByText(c);if(hint&&choices.indexOf(c)==i)ary.push(hint);});func(mod,ary);removeHints();}}function addExtraFunc(func,keyName,keyCode){keyMap[(keyCode||keyName.charCodeAt(0))]=keyName;keyFuncMap[keyName]=defaultFuncTemplate(func);}addExtraFunc(function(mod,ary){var windowname=(ary.length==1&&!mod)?'_top':'_blank';ary.forEach(function(e){if(e.type=='HaHlink')window.open(e.element,windowname)});},'%%ENTERKEY%%',%%ENTERCODE%%);addExtraFunc(function(mod,ary){if(mod)return;var firstHint=ary[0];if(firstHint)firstHint.action(firstHint.element);},'%%CLICKKEY%%',%%CLICKCODE%%);if(_HaH&&_HaH.keys){_HaH.keys.forEach(function(e){addExtraFunc(e.func,e.keyName,e.keyCode)});}function interpretHaHKeyStroke(e){var key=keyMap[(e.keyCode||e.which)];e.preventDefault();e.stopPropagation();if(!key)return removeHints();var modified=(e.ctrlKey||e.altKey||e.shiftKey||e.metaKey);keyFuncMap[key](modified,key)&&removeHints();}drawHints();})(window.HitaHint);