Userscripts.org

The following is an archive of comments made before threaded discussions was implemented (November 16th, 2008)

hi,

really nice script ;)

Softyx

Nice script! I tweaked it up a bit to my liking, and this is the result I got (in case you care at all).
It's a bit more wiki-esqe, and the whole heading is now the collapse button (I found the small square to difficult to manage).

// ==UserScript==
// @name        Wikipedia Table of Contents
// @description You can see the page overview from the table of contents and go to the 
//              desired section without losing sight of the table of contents. The TOC scrolls with the 
//              page and can be minimized or maximized at will.
// @include     http://*.wikipedia.org*
// @namespace   arunr.org
// ==/UserScript==

function buildTOC() {
	var myTOC = createTOC();
	populateTOC(myTOC);
	styleTOC(myTOC);
	appendYUILibs();
}

function styleTOC(myTOC) {
	myTOC.style.position = "fixed";
	myTOC.style.top = "20px";
	myTOC.style.right="10px";
	myTOC.style.width="250px";
	myTOC.style.backgroundColor = "white";
	//myTOC.style.opacity = 0.7;
	myTOC.style.color="black";
	myTOC.style.fontFamily="Arial, serif";
	myTOC.style.padding="3px";
	myTOC.style.fontSize="11px";
	myTOC.style.zIndex = 1000000;

	var mySTYLE = document.createElement("style");
	mySTYLE.type="text/css";
	var newStyle1 = document.createTextNode("#toc {border:none;}");
	var newStyle2 = document.createTextNode('#wikiTOC ul li a {color: #002BB8;}');
	mySTYLE.appendChild(newStyle1);
	mySTYLE.appendChild(newStyle2);

	var pageHEAD = document.getElementsByTagName("head")[0];
	pageHEAD.appendChild(mySTYLE);
}

function appendYUILibs() {
	var mySCRIPT = document.createElement("script");
	mySCRIPT.src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js";
	var mySCRIPT1 = document.createElement("script");
	mySCRIPT1.src="http://yui.yahooapis.com/2.5.0/build/dragdrop/dragdrop-min.js";

	var myHEAD = document.getElementsByTagName("head")[0];
	myHEAD.appendChild(mySCRIPT);
	myHEAD.appendChild(mySCRIPT1);
	enableDD();
}

function enableDD() {
	//YAHOO = unsafeWindow.YAHOO || null;
	var myDD = YAHOO.util.DD("wikiTOC");
}

function populateTOC() {
	var tocBODY = document.getElementById("wikiTOCBODY");
	tocBODY.style.overflow = "auto";
	var maxh = window.innerHeight - 75;
	tocBODY.style.maxHeight = (maxh) + "px";
	tocBODY.style.padding = "0 5px";
	var tocTable = document.getElementById("toc");
	var tocUL = tocTable.getElementsByTagName("td")[0].getElementsByTagName("ul")[0];
	var mytocBODY = "
"+tocUL.innerHTML+"
";
	tocBODY.innerHTML = mytocBODY;
	tocTable.innerHTML = "";
}

function createTOC() {
	var myTOC = document.createElement("div");
	myTOC.id = "toc"; //"wikiTOC";
	
	var myHEAD = document.createElement("div");
	myHEAD.id = "wikiTOCHEAD";
	var myHEADING = document.createElement("p");
	myHEADING.innerHTML = "Table of contents";
	myHEADING.style.border="1px solid #aaaaaa";
	myHEADING.style.padding = "2px";
	myHEADING.addEventListener("click", toggleTOCBODY, false);
	myHEAD.appendChild(myHEADING);
	
	var myBODY = document.createElement("div");
	myBODY.id = "wikiTOCBODY";
	myBODY.style.border="1px solid #aaaaaa";
	
	myTOC.appendChild(myHEAD);
	myTOC.appendChild(myBODY);
	var wikiBody = document.getElementsByTagName("body")[0].appendChild(myTOC);
	return myTOC;
}

function toggleTOCBODY(){
	var tocBODY = document.getElementById("wikiTOCBODY");
	var tocICON = document.getElementById("tocICON");
	if (tocBODY.style.display=="none"){
		tocBODY.style.display="block";
	} else {
		tocBODY.style.display="none";
	}
}

window.addEventListener("load", buildTOC, false);