Fragmentions
— Kaushal ModiHave you ever got tired of having to find the a heading’s id
(view
site source using Ctrl + U
) so that you can send someone a link
like https://example.com/#foo
?1
And then becoming even more frustrated when you find that the heading
that you want to link does not even have an id
attribute!?
And then in the end you resort to just telling them “Go to that page, and search for `foo’”? —
Today I came across this wonderful Javascript utility script called
fragmentions.js
by Jonathan Neal (the idea for that was pitched by
Kevin Marks) that alleviates that pain — at least on this site (or
more, if that site also uses this script, or you use one of the
extensions listed in below reference).
As I have this script loaded in the footer of all pages on this site,
if you want to link to a phrase “frobnicate foobar” on a page (like
this one), simply prefix that with #
, and append that to that page’s
link.. like
https://scripter.co/replies/fragmentions/#frobnicate%20foobar2 —
Go ahead, click that link, try it.
You too can do that for your sites by downloading the
fragmentions.js
from the above linked project repo and loading it in
your site footer.
Fragmention(er) #
Kartik Prabhu then goes an extra mile, and comes up with
fragmentioner.js
(and fragmentioner.css
) that’s designed to be
used along with fragmentions.js
.
This project adds a nifty feature — While fragmentions.js
allows you
to link to #any arbitrary phrase
, fragmentioner.js
allows you to
select a phrase and derive a fragmentions link using that.
I have now added that to this site too. To try it, select any phrase, and click the “Link to text” popup.