jBookMark: A jQuery Marking Tool

Ever missed the bookmarking option of a good editor in a web site? This jQuery plugin does exactly that: if you want your website visitors to be able to toggle […]

By in Playground on
Demo Download

Ever missed the bookmarking option of a good editor in a web site? This jQuery plugin does exactly that: if you want your website visitors to be able to toggle bookmarks in your pages that are loaded with a lot of content then you can simply insert this script.

The user can add bookmarks (mouse clicked + B) and then step through them (N). Everytime you create a bookmark it will be displayed on the left side of the page. They get removed by either clicking on them or pressing D (all get removed). Pressing Shift+N allows to step through them backwards.

You can call the plugin like this:
$(element).bookmark();

And you can configure the following properties:

  • color: the highlight color of the current bookmark
  • maximum: the maximum number of bookmarks allowed

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

Case Study: Windland — An Immersive Three.js Experience

Animate Anything Along an SVG Path

Image To Grid Transition

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 4

Comments are closed.

  1. Pingback: uberVU - social comments

  2. will this pluggin allow you to bookmark multiple pages on the same site?

    Im using shtml pages with a common header and footer.

  3. I have patched the JS a little bit, so the user can configure the path the bookmark.png is located. Let me know if you wish to receive the patched version. It’s really simple, anyway:

    $.fn.bookmark.defaults = {
    color : ‘#1111FF’,
    maximum : 10,
    imgpath : ”
    };

    $(‘BODY’).append($(”));

  4. Unfortunately, the source code I posted above was scrambled. 🙁 Please contact me if you’d like to receive the JS by mail. Thank you.