Skip navigation.

Posts tagged with "JavaScript"

Improved Hit-a-Hint Bookmarklet With Your Keybind

, ,

I wrote a post (link below) about 3 month ago about a Hit-a-Hint bookmarklet.

Improvement to Hit-a-Hint bookmarklet for Opera

Today I made it even nicer with integrated ability to focus on text areas, select buttons, click javascript-executing links.

I also made a page where you can customize your own keybind.

Here it is Hit-a-Hint Generator for Opera

Feel free to tell me if you found a bug. Most of the time when hints are not drawn, it comes from Opera's bug with getClientRects...

Improvement to Hit-a-Hint bookmarklet for Opera

, , ,

The Hit-a-Hint bookmarklet created by Blazeix is absolutely fabulous.
Vimperator for Opera - Blazeix's Blog - by Blazeix

I made a change to the original script so that I can have any letters I want for hints.

Here it is.

javascript:(function(){var hintkeys='asdfghjkl';var maxdigit=4;function createText(m){var ret='';var l=hintkeys.length;var d=maxdigit*l;while(m>=0){while(m-l*d<0){d--;}ret=hintkeys.charAt(m-l*d)+ret;m=d-1;}return ret;}function retrieveNumber(w){var ret=0;var wlen=w.length;for(var i=0;i<wlen;i++){var fix=(i==0)?0:1;var t=w.charAt(wlen-i-1);ret+=(hintkeys.indexOf(t)+fix)*Math.pow(hintkeys.length,i);}return ret;}var bgcolor = '#FF0';var bghighlight = '#0F0';var color = '#000';var hintlist = new Array();var hintedlinks = new Array();var map = new Array();var choices = new Array();var mapindex = 0;var choice = '';var keycodemapping = {'13':'Enter','27':'Esc','8':'Bkspc','44':','};for(var i=0;i<hintkeys.length;i++){var ithkey=hintkeys[i];keycodemapping[ithkey.charCodeAt(0)]=ithkey;}var originalTitle = document.title;function drawHints(){document.addEventListener('keypress',interpretKeyStroke,true);document.title+=' - ';var allLinks = document.getElementsByTagName('a');var viewportStart = window.pageYOffset - 5;var viewportEnd = viewportStart + window.innerHeight + 10;for (var i = 0;i<allLinks.length;i++){linkYcoord = getAbsoluteY(allLinks[i]);if(linkYcoord > viewportStart && linkYcoord < viewportEnd && allLinks[i].href != '') {hintedlinks.push(allLinks[i]);}}for (var i = 0;i<allLinks.length;i++){var hint = document.createElement('span');hintlist.push(hint);hint.style.backgroundColor=bgcolor;hint.style.color=color;hint.style.position='absolute';hint.innerHTML = createText(mapindex);map[createText(mapindex)]=hintedlinks[i].href;mapindex++;hintedlinks[i].appendChild(hint,hintedlinks[i]);}}function getAbsoluteY(element){var y = 0;while (element) {y += element.offsetTop;element = element.offsetParent;}return y;}function removeHints(){for (var i=0;i<hintedlinks.length;i++){hintedlinks[i].removeChild(hintlist[i],hintedlinks[i]);}choice='';document.title=originalTitle;document.removeEventListener('keypress',interpretKeyStroke,true);delete map;delete hintlist;delete hintedlinks;delete choices;}function interpretKeyStroke(e){e.preventDefault();var key=keycodemapping[(typeof event!='undefined')?window.event.keyCode:e.keyCode];if(key=='Enter'){choices.push(choice);for (var i=0;i<choices.length;i++) {if(map[choices[i]]!=undefined){window.open(map[choices[i]]);}}removeHints();}else if(key==','){if(choice!=''){choices.push(choice);hintlist[retrieveNumber(choice)].style.backgroundColor=bghighlight;choice = '';document.title+=',';}}else if(key=='Esc'){removeHints();}else if(key=='Bkspc'){if(choices.length){if(choice!=''){choice='';}else{hintlist[retrieveNumber(choices.pop())].style.backgroundColor=bgcolor;document.title=originalTitle+' - '+choices.join(',');}}}else if(key == undefined){removeHints();}else{choice+=key;var choicestring = (choices.length) ? choices.join(',')+','+choice : choice;document.title=originalTitle+' - '+choicestring;}}drawHints();})();


It's only for the extended hints mode (see Blazeix's post).
It doesn't work on firefox (Hints disappear when you start typing them in).

You can set any hint letters by changing
var hintkeys='asdfghjkl';


The following
var maxdigit=4;
is the maximum number of hints it can deal with. If you have too few letters for hints, you'd better change this. By default it's capable of showing (9 letters)^(4 digits)=6561 hints.

The main change is the next two functions.
function createText(m){var ret='';var l=hintkeys.length;var d=maxdigit*l;while(m>=0){while(m-l*d<0){d--;}ret=hintkeys.charAt(m-l*d)+ret;m=d-1;}return ret;}
function retrieveNumber(w){var ret=0;var wlen=w.length;for(var i=0;i<wlen;i++){var fix=(i==0)?0:1;var t=w.charAt(wlen-i-1);ret+=(hintkeys.indexOf(t)+fix)*Math.pow(hintkeys.length,i);}return ret;}

The first one is to convert the a number (1,2,3,...) to a hint (a,s,d,...aa,as,ad,...), and the second one does exactly the opposite. I inserted them in the code.

Then I changed keycode mapping as the following so that your added letters will be reflected.
var keycodemapping = {'13':'Enter','27':'Esc','8':'Bkspc','44':','};for(var i=0;i<hintkeys.length;i++){var ithkey=hintkeys[i];keycodemapping[ithkey.charCodeAt(0)]=ithkey;}


That's it. Enjoy!


[Update 2008-10-21]

I made a new version, which is almost complete rewrite from this one.

Improved Hit-a-Hint Bookmarklet With Your Keybind

Enhanced Copy for Opera - Copy URL, Title & Selection

, ,

Firefox has a niche addon called "CopyURL+", which enables you to copy URL+PageTitle, URL+Selection, URL+Selection+PageTitle, etc. Well, I want that on Opera.

Yaske made opera_ex (link Japanese) a small Windows application that does exactly that (and more apparently), which you can call as an external program from Opera.

Later, higeorange rewrote it for Linux (Gtk2-Perl version & Ruby-Gnome version).

Both links are in Japanese. I could translate them if on high demand, but I don't think it's needed. Here is a sort-of description: opera_ex on Linux


Anyway, I'm neither on Windows nor Linux, and I don't want to use an external program for Opera. I want a browser to be stand alone.

Owing to the "Delay" action introduced at Opera9.50beta, it is now possible to copy URL+PageTitle+Selection and so on using Opera internal actions and JavaScript.

Here is how you do.

If you want to copy with a format like this,

<p>SelectedText<a href="URL">PageTitle</a></p>

Write this for your keyboard shortcut or rightclick menu.

Go to page, "javascript:window.prompt('','<p>'+window.getSelection()+'<a href=\x22'+location.href+'\x22>'+document.title+'</a></p>');" & Delay, 10 & Copy & Cancel


If you want an myOpera blog style like,

[URL=URL]PageTitle[/URL]*LineBreak*
SelectedText(if exists)

Then add this to your shortcut

Go to page, "javascript:var s=window.getSelection(),t='[URL='+location.href+']'+document.title+'[/URL]',t=s?t+'\r\n'+s:t;window.prompt('',t);" & Delay, 10 & Copy & Cancel


Or you can create your own.

What they are doing is, call JavaScript alert, paste URL etc. with the format, Delay, Copy and Close the alert. Without Delay this doesn't work (which means it doesn't work on Opera9.25 or before, so you have to copy and close the alert by hand if you really want).

The only thing that might bother you is that it brings up an alert for a little moment and erases. I first didn't like it, but now I don't mind. I even like it because it tells me I am copying what I want for sure.