2020-12-08 Show all id attributes

Here’s something that annoys me: I’m looking at a web page and I know that there is a way to jump to the current section I’m looking at with a link. One of the elements here must have an id attribute, but which one, and what is it?

In order to solve this, I created a little bookmarklet.

It’s a little piece of Javascript that’s easily checked. It doesn’t load stuff from remote sites, either. Perfect!

Feel free to copy and paste from here into the URL of a bookmark.

  1. bookmark this page

  1. edit the properties of the new bookmark

  1. change the name to “Show ids”

  1. change the location to the Javascript URL below

  1. done!

Improved code by Sandra. Thanks!

=> Sandra

javascript:(function(){var sn=document.evaluate('//.[@id]',document.getRootNode(),null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);var n=null;var i=0;while(n=sn.snapshotItem(i++)){var t=document.createElement('a');t.appendChild(document.createTextNode(' ⏪ '));t.setAttribute('href','#'+n.getAttribute('id'));n.appendChild(t);}}())

The same code, but with some whitespace (works just as well!) for you to read:

javascript:
(function() {
  var sn = document.evaluate('//.[@id]', document.getRootNode(), null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
  var n = null;var i = 0;
  while (n=sn.snapshotItem(i++)) {
    var t = document.createElement('a');
    t.appendChild(document.createTextNode(' ⏪ '));
    t.setAttribute('href', '#' + n.getAttribute('id'));
    n.appendChild(t);
  }
}())

​#Bookmarklet ​#Web

Comments

(Please contact me if you want to remove your comment.)

Great! Linking to anchors is something I miss on Gemini; I use anchors a lot on my site and now this bookmarklet is gonna make things easier. You can simplify by removing the unused span function and inlining the functions that are only used once here.

– Sandra 2020-12-08 12:19 UTC

=> Sandra


Thank you so much for the code! I replaced my code on the main page with it.

– 2020-12-08 15:07 UTC


The life-changing magic of FOSS♥

– Sandra 2020-12-08 18:58 UTC

=> Sandra

Proxy Information
Original URL
gemini://alexschroeder.ch/2020-12-08_Show_all_id_attributes
Status Code
Success (20)
Meta
text/gemini
Capsule Response Time
164.00734 milliseconds
Gemini-to-HTML Time
0.467705 milliseconds

This content has been proxied by September (3851b).