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

jBookMark11

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

View demoDownload source

Previous:
Next:

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

View all contributions by

Website: http://tympanus.net/codrops/author/cody/

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 4

Comments are closed.
  1. Pingback: uberVU - social comments

  2. 1

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

    Im using shtml pages with a common header and footer.

  3. 2

    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. 3

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

Comments are closed.