ReaderBar

Background

I created this small jQuery plugin for my previous website. I was somewhat dissatisfied with the way web browsers displayed large documents and thought I’d try my hand at providing some additional navigation features. ReaderBar makes it easy to jump between chapters on a webpage and you can also set bookmarks for yourself.

When I revamped my website I decided against using it. Apart from the jQuery dependency being somewhat offputting from a contemporary perspective, I also just think that the benefits for users are not clear. These days I would rather leave the reading experience and the tools used for it up to the reader.

Nonetheless, I have provided a live demo of ReaderBar for you on this page so you can see what it looks like. Feel free to experiment with it and, of course, use it for your own projects as you see fit.

Some nonsense text follows, so that this page is long enough for you to properly try out ReaderBar.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt dui ut ornare lectus sit amet. Turpis egestas integer eget aliquet nibh praesent tristique. Varius morbi enim nunc faucibus a pellentesque. Mattis pellentesque id nibh tortor id. Duis ut diam quam nulla porttitor massa. Pharetra convallis posuere morbi leo urna molestie at elementum. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Volutpat sed cras ornare arcu dui vivamus arcu felis. Lectus sit amet est placerat in egestas. Vel pharetra vel turpis nunc eget lorem dolor. Pulvinar proin gravida hendrerit lectus. Sem integer vitae justo eget magna. Vitae justo eget magna fermentum iaculis eu non. Elementum curabitur vitae nunc sed velit. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Mi bibendum neque egestas congue quisque. Hendrerit dolor magna eget est.

At in tellus integer feugiat scelerisque varius morbi enim nunc. Iaculis eu non diam phasellus vestibulum lorem sed risus. A lacus vestibulum sed arcu non. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Cras adipiscing enim eu turpis egestas. Ac tincidunt vitae semper quis lectus nulla at volutpat. Gravida neque convallis a cras semper. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Sit amet massa vitae tortor. Habitant morbi tristique senectus et. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Orci porta non pulvinar neque laoreet suspendisse interdum. Neque convallis a cras semper auctor. Magna fringilla urna porttitor rhoncus dolor purus non enim. Nunc faucibus a pellentesque sit amet. Urna nunc id cursus metus aliquam eleifend mi in. Nunc eget lorem dolor sed viverra. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus.

Commodo sed egestas egestas fringilla. Et tortor consequat id porta nibh venenatis cras. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Tempus urna et pharetra pharetra massa massa. Egestas tellus rutrum tellus pellentesque eu tincidunt. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Tristique senectus et netus et. Sapien et ligula ullamcorper malesuada. Quis vel eros donec ac odio tempor orci dapibus. Quis risus sed vulputate odio ut enim blandit. Magna fringilla urna porttitor rhoncus dolor purus non enim.

Adipiscing diam donec adipiscing tristique risus. Volutpat blandit aliquam etiam erat velit. Iaculis nunc sed augue lacus viverra vitae. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Dignissim diam quis enim lobortis scelerisque fermentum dui. Imperdiet proin fermentum leo vel orci porta non pulvinar. Gravida cum sociis natoque penatibus et magnis dis parturient montes. Pretium aenean pharetra magna ac placerat vestibulum lectus. Magna fringilla urna porttitor rhoncus dolor purus. Platea dictumst vestibulum rhoncus est pellentesque. Aenean pharetra magna ac placerat vestibulum lectus. Sed pulvinar proin gravida hendrerit. Turpis in eu mi bibendum neque egestas congue quisque egestas.

Magna fermentum iaculis eu non diam phasellus vestibulum lorem. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Tincidunt augue interdum velit euismod in pellentesque massa placerat. Suspendisse potenti nullam ac tortor vitae. Ac feugiat sed lectus vestibulum mattis. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Integer vitae justo eget magna fermentum. Leo integer malesuada nunc vel risus. Turpis massa sed elementum tempus egestas.

Vel eros donec ac odio tempor orci dapibus ultrices. Vitae aliquet nec ullamcorper sit. Amet dictum sit amet justo. Quis enim lobortis scelerisque fermentum dui faucibus in ornare. Fusce id velit ut tortor pretium viverra suspendisse potenti nullam. Pellentesque diam volutpat commodo sed egestas egestas fringilla. In massa tempor nec feugiat. Amet luctus venenatis lectus magna fringilla urna porttitor. Eu nisl nunc mi ipsum faucibus. Massa massa ultricies mi quis hendrerit dolor. Lectus proin nibh nisl condimentum id venenatis. Dolor purus non enim praesent. Felis donec et odio pellentesque diam volutpat commodo sed. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Vulputate dignissim suspendisse in est ante in. Suspendisse potenti nullam ac tortor. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Viverra vitae congue eu consequat ac. Sit amet purus gravida quis.

Nibh cras pulvinar

Nibh cras pulvinar mattis nunc sed blandit libero. Blandit aliquam etiam erat velit. Sed id semper risus in hendrerit gravida rutrum quisque non. Posuere ac ut consequat semper viverra nam libero justo laoreet. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Ullamcorper malesuada proin libero nunc consequat interdum. Libero volutpat sed cras ornare arcu dui vivamus. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Gravida quis blandit turpis cursus in hac habitasse. Risus at ultrices mi tempus imperdiet nulla malesuada. Laoreet sit amet cursus sit amet dictum sit amet justo. Vel pretium lectus quam id. Vitae congue eu consequat ac felis donec et odio. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Eget mauris pharetra et ultrices neque ornare. Sodales ut etiam sit amet. Nec sagittis aliquam malesuada bibendum arcu vitae elementum.

Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Facilisis gravida neque convallis a. Hac habitasse platea dictumst vestibulum rhoncus est. In cursus turpis massa tincidunt dui ut ornare. Diam vulputate ut pharetra sit amet aliquam id. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Massa tincidunt dui ut ornare. Auctor urna nunc id cursus metus aliquam eleifend. Cursus mattis molestie a iaculis at erat pellentesque. Non quam lacus suspendisse faucibus interdum. Sit amet facilisis magna etiam tempor orci eu. Morbi blandit cursus risus at ultrices mi tempus imperdiet nulla. Amet consectetur adipiscing elit duis tristique sollicitudin nibh.

Luctus accumsan

Luctus accumsan tortor posuere ac ut consequat semper viverra. Blandit volutpat maecenas volutpat blandit. Ac tincidunt vitae semper quis lectus nulla at. Diam sollicitudin tempor id eu nisl nunc mi. Sit amet luctus venenatis lectus magna fringilla urna. Pharetra massa massa ultricies mi quis. Et pharetra pharetra massa massa. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Non odio euismod lacinia at. Urna molestie at elementum eu. Ut enim blandit volutpat maecenas volutpat. Maecenas pharetra convallis posuere morbi leo urna molestie at. Et sollicitudin ac orci phasellus egestas tellus. Ultrices neque ornare aenean euismod elementum nisi quis. Imperdiet nulla malesuada pellentesque elit eget gravida. Donec adipiscing tristique risus nec feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Id diam vel quam elementum pulvinar etiam non quam. Faucibus interdum posuere lorem ipsum dolor sit amet.

Convallis aenean et tortor at risus. Libero nunc consequat interdum varius sit amet. Volutpat consequat mauris nunc congue nisi. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Posuere sollicitudin aliquam ultrices sagittis orci a. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Id interdum velit laoreet id donec ultrices tincidunt arcu. Consectetur adipiscing elit duis tristique. Etiam sit amet nisl purus in. Quisque egestas diam in arcu cursus. Non enim praesent elementum facilisis leo vel. Vulputate enim nulla aliquet porttitor lacus. Imperdiet sed euismod nisi porta lorem mollis aliquam ut. Lacus vel facilisis volutpat est velit egestas dui id. Sit amet consectetur adipiscing elit pellentesque habitant. Cursus euismod quis viverra nibh cras.

Lectus quam id

Lectus quam id leo in vitae turpis massa. Diam phasellus vestibulum lorem sed risus. Mattis molestie a iaculis at erat pellentesque adipiscing commodo elit. Fermentum et sollicitudin ac orci phasellus egestas tellus. Consectetur purus ut faucibus pulvinar elementum. Integer vitae justo eget magna fermentum iaculis eu non diam. Bibendum at varius vel pharetra vel turpis. Feugiat vivamus at augue eget arcu dictum. Turpis egestas pretium aenean pharetra magna. Elementum eu facilisis sed odio morbi. Nullam vehicula ipsum a arcu cursus vitae. Lectus arcu bibendum at varius. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Aliquam eleifend mi in nulla posuere sollicitudin. Integer malesuada nunc vel risus commodo viverra maecenas. Eget arcu dictum varius duis at consectetur lorem donec massa. Felis eget velit aliquet sagittis. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi etiam.

Aliquam ut porttitor leo a. Tempus quam pellentesque nec nam. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Nibh mauris cursus mattis molestie a iaculis at erat. Feugiat in fermentum posuere urna nec. Venenatis urna cursus eget nunc. Nulla facilisi morbi tempus iaculis urna id volutpat. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Ut lectus arcu bibendum at. Arcu odio ut sem nulla pharetra. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Quis hendrerit dolor magna eget est.

Volutpat odio facilisis mauris sit amet massa. Ultricies integer quis auctor elit sed vulputate. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Malesuada nunc vel risus commodo. At tempor commodo ullamcorper a lacus vestibulum sed arcu non. Volutpat consequat mauris nunc congue nisi vitae suscipit. At augue eget arcu dictum varius. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Varius quam quisque id diam vel quam elementum. Volutpat maecenas volutpat blandit aliquam.

Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Cursus sit amet dictum sit amet justo donec enim. Duis ut diam quam nulla porttitor massa id neque. Bibendum neque egestas congue quisque egestas diam in. Mauris sit amet massa vitae tortor condimentum lacinia quis. Amet risus nullam eget felis eget nunc lobortis mattis. Habitant morbi tristique senectus et netus et malesuada fames. Nunc mattis enim ut tellus. Vel turpis nunc eget lorem dolor sed. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl.

Enim lobortis scelerisque fermentum dui faucibus in ornare. Sagittis eu volutpat odio facilisis mauris sit amet massa. Libero enim sed faucibus turpis in eu mi. Eu turpis egestas pretium aenean pharetra. Sed felis eget velit aliquet sagittis id consectetur purus ut. Tortor at risus viverra adipiscing at in tellus integer feugiat. Nisl pretium fusce id velit ut. Vulputate mi sit amet mauris commodo. Est sit amet facilisis magna etiam. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Arcu non sodales neque sodales ut etiam sit. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.

Quis vel eros donec ac odio tempor. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Pulvinar neque laoreet suspendisse interdum consectetur. Feugiat in ante metus dictum at tempor commodo ullamcorper. Cursus eget nunc scelerisque viverra mauris in aliquam. Nisl vel pretium lectus quam id leo. Quis vel eros donec ac odio tempor orci dapibus. Integer enim neque volutpat ac tincidunt vitae. Integer enim neque volutpat ac. Sapien eget mi proin sed libero. Malesuada fames ac turpis egestas integer eget aliquet. Augue lacus viverra vitae congue eu. Et leo duis ut diam quam nulla. In dictum non consectetur a erat nam at lectus urna. Ullamcorper sit amet risus nullam eget felis. Dui accumsan sit amet nulla. Et netus et malesuada fames ac turpis egestas maecenas. Vulputate ut pharetra sit amet aliquam id diam. Aliquam faucibus purus in massa tempor. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus.