Anchors Demo
Now you can click on part of a page and see a link to return there.
6th September 2004 · Last updated: 21st December 2023
I recently had a dream. I was using a web page which had small arrows all the way down the left. By clicking on them I was able to mark where I was on the page. Then I could scroll up or down to look at something else, knowing I could get back to where I was via the arrows. It would certainly be a neat trick, as I often wish I could get back to a certain part of a page, especially on lengthy documents (like the W3C specifications!).
So now I've coded my dream. Using JavaScript, I've created a working demo. You can click on any part of the page, such as a header or a paragraph, and an anchor will be placed on the left. What's more, a link to that part of the page is also created at the top. You can add as many anchors around the page as you wish - each gets a separate link. To remove the anchors is just a simple matter of clicking on the same part of the page again. (The link at the top also disappears.)
It would be great if this inspired others to take my idea further. Perhaps a browser manufacturer might even implement something like this one day.
Comments (11)
Comments are locked on this topic. Thanks to everyone who posted a comment.
- Mark Schenk:
I truly love the idea! It would be even better if the markup weren't littered with 'onclick' and 'id' and maybe a JavaScript guru can create such a script.
There's one improvement I would like to suggest, which I noticed after I tested the script in O7.6 Preview. The 'unmarking' works, but too many characters are sliced, so content simply disappears (don't know what's causing that problem though). Therefore I would like to suggest using W3C DOM methods instead of innerHTML:
function unmark(o) {
link2 = 'a' + o;
l = document.getElementById(link2);
l.removeChild(l.getElementsByTagName('span')[0]);
This way you simply remove the <span> from the element, instead of slicing the innerHTML.
Cheers,
M.
Posted on 7 September 2004 at 8:17 am ¶ - Mark Schenk:
I found the reason why Opera 7.6 slices too much content: it converts the into 1 character in the DOM. The innerHTML returned by Opera 7.6 is:
<SPAN class="marked"> > </SPAN> By Chris Hester - 6 September 2004
by Mozilla 1.7:
<SPAN class="marked"> > </SPAN> By Chris Hester - 6 September 2004
So then you would indeed get different results when slicing after a fixed number of characters. Use the W3C DOM method and you're safe :D
Posted on 7 September 2004 at 8:34 am ¶ - Nick Fitzsimons:
You can add Safari 1.2.3 (Mac OS X 10.3) to your list of supported browsers
Posted on 7 September 2004 at 10:54 am ¶ - dusoft:
Great demonstration! I have blogged about this in my Ambience blog on webstandards and politics (http://www.ambience.sk) - in Slovak though.
Permalink is:
http://www.ambience.sk/zalozky-webove-stranky-javascript-xhtml
Posted on 7 September 2004 at 1:58 pm ¶ - dusoft:
Dear Chris,
would it be possible to improve the demonstration so that if you click on the link in the paragraph (or other block element), no anchor is created?
I love your demo anyway, tak this just as the idea for improvements.
Dan
Posted on 7 September 2004 at 2:05 pm ¶ - Chris Hester:
Yes, no anchor is possible, but why would you want that?
Thanks for blogging about my demo!
Mark - I agree with what you say, but I've tried your code and it still doesn't work in Opera (7.54). I know there are some problems with that browser and JavaScript, as it fails to return all the attributes from a test page I have looked at when making the demo. (Firefox does.)
I'm not sure that it's clipping too much - it appears to be simply adding the anchor again and again. (In your second comment the two examples you give appear identical?)
Posted on 7 September 2004 at 2:42 pm ¶ - bryan loeper:
For readability, would it be possible to use header tags to give a structure for where the paragraphs are? Does that make sense? Basically like the w3 validator outline feature, and then add the links for where your marks are into it.
Also, for browsers that support it, edit the body tag to have a top or bottom margin, then leave the links to marked sections fixed there, so it doesn't scroll with the page.
-bryan-
Posted on 7 September 2004 at 4:01 pm ¶ - Mark Schenk:
It won't work in 7.54 no matter what (the onclick isn't changed), but I was talking about 7.60 Preview which has a much improved DOM and there the demo works.
The only problem in 7.60 is that too much is being clipped, which is caused by Opera converting into an actual space so the <span> you inserted with innerHTML is no longer 45 characters long.
Opera returns:
<SPAN class="marked"> > </SPAN> By Chris Hester - 6 September 2004
Mozilla returns:
<span class="marked"> > </span> By Chris Hester - 6 September 2004
Now I fixed the code examples; I forgot to check if the was converted into spaces or not. :)
Posted on 7 September 2004 at 4:51 pm ¶ - Chris Hester:
I've edited the spaces for you Mark. Sorry my comments system isn't very good!
Posted on 7 September 2004 at 9:30 pm ¶ - Sage Olson:
In Safari 1.2.3, if you "un-click" the marked text, about 7-9 characters get chopped off, meaning that if you keep clicking, text will disappear!
Oh, by the way, could you change the "Clear" button so that it's more immediately obvious that it's not a "Submit" button?
I accidentally cleared my previously typed out comment, since I'm used to the submit button being next to the Preview button.
Posted on 8 September 2004 at 4:54 am ¶ - Chris Hester:
I just found this. It uses a similar idea from a different angle. I'm gutted - my idea isn't as original as I thought. Oh well....
http://modulo26.net/daily/archives/
2003/10/20/index.html
Posted on 9 September 2004 at 12:14 pm ¶