Full Page History:

Oldest known version of this page was edited on 2005-10-08 15:12:36 by Jakub81 []

Page view:

Numbered links script for Opera

This combination of User JS and bookmarklets allows you to get Lynx-style numbered navigation in Opera 8.0+. It assigns a number to every link on a page using User JS, and allows the user to navigate them using a nicknamed bookmarklet (which may be coupled to a keyboard shortcut).

User JS

I have written the following User JS:

// ==UserScript==
// ==/UserScript==

/* Lynx-style link numbering script
 * 
 * Author: Hermen Toersche
 * Date:   2005-04-23
 */
 
document.addEventListener(
  'load',
	function(e) {
		if (document && document.body) {
			var db = document.body;
			linksLijst = new Array();
			var links = document.getElementsByTagName("a");
			var i;
			for(i = 1; i <= links.length; i++) {
				linksLijst[i-1] = links[i-1].href;
				var linkLabel = document.createElement("span");
				linkLabel.className = "linkLijstNummer";
				linkLabel.appendChild(document.createTextNode(i));
				links[i-1].insertBefore(linkLabel, links[i-1].firstChild);
				//links[i-1].parentNode.insertBefore(linkLabel, links[i-1]);
			}
		}
	}, false);

Grab and save as "linkNumberer.js".

Bookmarklet

The corresponding bookmarklet binds the script to the UI:

Numbered Links (Right-click the button and choose "Bookmark link")

In order to use it efficiently, it is recommended to set a nickname to the bookmarklet (otherwise I think it would be much faster just to click the link ;) ), which becomes the access point to the script.

Style

The script should work now, but it doesn't look good (enough) yet; the following browser.css snippet will fix this:

span.linkLijstNummer {
	display: inline;
	background: #DDD;
	color: #000;
	text-decoration: none;
	margin-right: 3px;
	border: 1px solid #44E;
	font-family: monospace;
	font-size: 10px;
	font-weight: bold;
}

An alternate, non-flow-breaking, better-looking style:

span.linkLijstNummer {
	position: absolute;
	background: #DDD;
	color: #000;
	text-decoration: none !important;
	font-family: Verdana !important;
	font-size: 6px !important;
	line-height: 9px !important;
	letter-spacing: -2px !important;
	padding: 2px;
	padding-left: 0px;
	padding-top: 0px;
	margin-left: -7px;
	margin-top: -6px;
}

(note: it's still looking ugly!)