jStickyNote: A jQuery Plugin for Creating Sticky Notes

jStickyNote is a jQuery plugin that allows to create sticky notes on your web site. It is configurable and this is how you use it: $(element).stickynote(); You can as well […]

From our sponsor: Try Mailchimp today.

jStickyNote is a jQuery plugin that allows to create sticky notes on your web site. It is configurable and this is how you use it:

$(element).stickynote();

You can as well define the following properties:

  • size: Size of the sticky note – large or small
  • text: If you define the text property then the sticky note will be created immediately with this text
  • containment: The id of the element where the sticky note can be dragged
  • event: Event that should trigger the creation of a sticky note – dblclick or click
  • color: Color of the sticky note text
  • ontop: The sticky note that you drag will always stay on top of the others

See a demo here: jStickyNote DEMO

Download the plugin here: jStickyNote ZIP

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 25

Comments are closed.
  1. Pingback: Tweets that mention jStickyNote: A jQuery Plugin for Creating Sticky Notes | Codrops -- Topsy.com

  2. Pingback: uberVU - social comments

  3. Pingback: jStickyNote: A jQuery Plugin for Creating Sticky Notes | Codrops | Nicolas Debras

  4. Pingback: jStickyNote: A jQuery Plugin for Creating Sticky Notes | Codrops | Squico

  5. Hi! I like to learn more about this. I have to do a project on Scrum and the truth is not as able to do …. and do so with StickyNote ….

    I hope you can help me ……. because my life depends on it

    thanks in advance (my English is not very good because I’m from Chile)

    greetings!!

  6. This is lovely. I have one question, though … what if the page doesn’t contain a #content? Is there a sensible default possible?

  7. Pingback: Plugins : jQuery jStickyNote Plugin « FrameLinks

  8. Great plugin! but there’s a problem…
    As Colin noted, there’s no way it can work if containment is set to anything but #content.
    You should replace line 87 with something like: $(‘#’+o.containment).append(_div_wrap);
    Or provide a fallback to, say, the document’s body.

  9. I would like to save the content and the (x,y) coordinates of each note to a SQL database, but I don’t get the clue of how to get the X,Y coordinates and save them.

    Could anyone please help me with this?

  10. Good, very nice plugin !

    Just add a line like this after using stickynote :
    $(‘div.jStickyNote’).mouseover($(this).focus());
    With the focus on the notes, the buttons will work at the first click !

    Remove too the quotes for the top and left values at the line 63, especially if you want to give us different values
    .css({‘position’:’absolute’,’top’:0,’left’:0})

  11. Julien de Prabère

    where i have to put this line
    $(‘div.jStickyNote’).mouseover($(this).focus()); to make focus on mouse over?

  12. @ P.Arta.

    To get the positions use:

    var pos $(‘#id_on_element’).offset();

    alert(‘left: ‘+ pos.left +’ top:’+pos.top);

    Simple as that!

  13. Nice plugin! However if I made a sticky note and I do a page refresh, the note is gone. How do I set cookies for this? I know there is a jquery cookie plugin, but if I place this in the head will it than automatically set the cookies for that initial page?

  14. $.cookie(“cookie-name”, “value”);

    I’ve found out a bit more about setting a cookie, but I’m trying to figure out how to get a value. I don’t think (or can’t see) it’s in the jStickyNote.js.

    Do I have to look for a solution with show/hide?

    Anybody any suggestions?

    As you’ve noticed I’m a complete noob re javascript/jquery, but I’m trying to learn 🙂

  15. By the way… this is what I have so far:

    $(function() {
    $(‘#add-note’).stickynote({
    containment: ‘content’
    });

    function setCookie() {
    $(‘#add-note’).click(function() {
    $.cookie(‘notes’, ‘???’, { path: ‘/’, expires: 10 });
    return false;
    });
    }
    })

  16. Hi, Thanks for the plugin.

    I want to use it in a web page, but do not know how to achieve the following:

    1. How to edit the content of a sticky note, once you have clicked the ‘check’ button.

  17. could someone please tell me how i can have a sticky note that is shown on page load?

    thanks in advance 🙂

  18. ok . i have sorted it out . i now have notes loading on page load and positions set as properties. thanks for a great plugin.