如何为HTML页面的特定行添加书签？ （应该使用chrome和IE浏览器）

Question

I'm reading stuff online from a site that prints out to HTML ebooks.

I don't want to download anything or convert anything, but i want to bookmark the current row i'm at in such a way that when i click the bookmark, i want to be taken to the respective row (not just the page).

The site contains just text, so i can't do the trick with the "#" like www.wikipedia.org/article#subchapter

(my apologies for the noobish language, i'm a junior dev, worked in Java and ABAP, but no experience in web related stuff)

I imagine i could save bookmarks that are actually Javascript code, that take me to the speciffic line, but wouldn't know where to begin, not being a web guy.

Any ideas (or implementations) would be awesome.

Thx, you guys rule.

[EDIT] Could also work AFAIK if my bookmark saved a part of the text, and then i'd get taken to that text when clicking the bookmark

[EDIT]

http://gutenberg.spiegel.de/buch/2095/2 This is basically the site. don't mind the german.

Answer 1

There is no such thing as a line in the DOM. But you can scroll to a element. There is a really nice jQuery extension that does it scrollTo .

But to make a bookmark could be a bit messy. Because you need both jQuery and this plugin.

To make it work you would have to book mark with:

javascript: document.location = [website url] ; [jQuery's File content] ; [the plugin] ; [jQuery scrollTo code]

Where [jQuery scrollTo code] would be something like:

$(...).scrollTo( $('ul').get(2).childNodes[20], 800 );

Answer 2

You could write a little chrome extension that inserts a tag every 100 words. Then you could in fact use the # syntax you referenced.

Inserted into HTML**:

<a name="line40" />

Your bookmark

<a href="page.html#line40">bookmark</a>

**Note: with HTML5 use a tag with "ID" instead of anchors with "name" attribute.

Answer 3

BlackJackMack beat me to it for the general idea, but here is some code to insert elements as well as a way to jump to particular hash after the fact (needed since when you first get to the page the ids won't be there).

paragraphs = document.getElementsByTagName('p');
for (x = 0; x < paragraphs.length; x++) {
    var p = paragraphs[x];
    var a = document.createElement('a');
    a.id = 'p' + x;
    a.href = '#' + a.id;
    a.innerText = '#';
    p.parentNode.insertBefore(a, p)
}

if (document.location.hash) {
    var hash = document.location.hash;
    document.location.hash = '';
    document.location.hash = hash;
}

I only tested this on Chrome, so keep that in mind. Can just paste it into the console to try it out. I didn't use jQuery or any plugins to make it easier to adapt into bookmark code.

Keep in mind this will only work if the page correctly uses paragraph tags, so it'll have to be adapted if everything is divs or something.