"Display Anchors" toolbar button

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: