I often use the “Display Anchors” option found in the Information menu of the Web Developer Firefox extension to build a link directly to a part of a page I’m interested in.
I usually doing it by clicking the toolbar button to show the Web Developer toolbar, then open the Information menu and select “Display Anchors”. A shorter way might have been using the right-click menu, since all Web Developer options are also available through a right click menu item. In any case, it requires at least three steps – Web Developer -> Information menu -> Display Anchors for this simple operation.
Today I’ve got sick of it and looked for a way to make it a one click operation. I googled for “display anchors” toolbar Firefox and got to David McRitchie’s bookmarklets page, where as point to the no-longer-available Show Classes and IDs bookmarklet page, but also has his own “id visible’ bookmarklet, which does something similar:
javascript:(function(){ var z=[],N,id,tc,j; function r(N) { if (N.id) z.push(N); var C=N.childNodes,i;for(i=0;i<C.length;++i)r(C[i]); } r(document.body); for (j in z) { N=z[j]; id=document.createTextNode(” %C2%ABid=”+N.id+”%C2%BB”); tc=document.createElement(”span”); tc.style.color=”red”; tc.style.background=”#FFEE99″; tc.appendChild(id); N.parentNode.insertBefore(tc,N.nextSibling); N.parentNode.insertBefore(document.createTextNode(” “),tc); }})();
I worked on it a little, and came up with a bookmarklet that creates link in a fashion similar to Web Developer’s “Show Anchors” way:
javascript:(function(){ var z=[],N,tc,j; function r(N) { if(N.id) z.push(N); var C=N.childNodes,i;for(i=0;i<C.length;++i)r(C[i]);}r(document.body);for(j in z) { N=z[j];tc=document.createElement(”div”);tc.innerHTML=”<a style=\”background-color:#FFFF99 !important;border:solid 1px #FFCC66 !important;color:#000000 !important;opacity:0.9 !important;text-decoration:none !important;font-size:10px !important;\” href=\”#”+N.id +”\”>#”+N.id+”<a>”;N.parentNode.insertBefore(tc,N);}})();
It currently only add links to elements with ID and not to a href-less named <a> elements. I’ll add these when I see the need.
Note: The bookmarklets are currently not links as I can’t find a way to convince WordPress editor to make them proper links.
splintor's blog 