Bookmark.ts is the simplest version of Bookmark.js but recreated in clear TypeScript.
- | Bookmark.ts | Bookmark.js |
---|---|---|
dependencies | no | jQuery |
make BM tree | yes | yes |
show tree onHover beside scrollbar | yes | yes |
activates onScroll | yes | yes |
scrollbar associate with links in panel | yes | yes |
hash in browser search bar (/uri#hash) | yes | yes |
active links (shows where user now) | no | yes |
auto-naming (I think no need in that) | no | yes |
Script works in all modern browsers (I think). I test it only in some of them, so:
Browser | Support | Browser version |
---|---|---|
Chrome | yes | 80.0.3987.122 64-bit |
Firefox | yes | 73.0.1 64-bit |
Edge* | yes | 44.18362.449.0 |
Safari | yes | iOS 13.3 |
*
Edge is not on Chromium.
- clone repo
- go to repo folder and find
build
folder - in
build/assets
you can findstyles
andjs
folders - copy from
styles
file namedbookmark.css
to your styles folder - copy from
js
file namedbookmark.js
to your scripts folder - open your
layout, template, view or ..
and before</head>
add next:
<link rel="preload" href="PATH_TO_YOUR_STYLES/bookmark.css" as="style">
<link rel="preload" href="PATH_TO_YOUR_SCRIPTS/bookmark.js" as="script">
<link rel="stylesheet" href="PATH_TO_YOUR_STYLES/bookmark.css">
- before
</body>
add next:
<script src="PATH_TO_YOUR_SCRIPTS/bookmark.js" charset="utf-8" defer></script>
- Okay, installation now completed.
Don't forget to change PATH_TO_YOUR_STYLES
and PATH_TO_YOUR_SCRIPTS
to your paths.
To add new bookmark into panel just follow next steps:
- to any element
e.g. h1,h2.. p, div, etc
add classbookmark
and - in the same element add
data-bookmark-title="Your_title_here"
Don't forget to change Your_title_here
to your title.