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 […]

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? Check out our Collective and stay in the loop.

cody

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

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.

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.