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 define the following properties: size: Size of the sticky note – large or small text: If you define the text property then the sticky note […]
jStickyNote

From our sponsor: Elementor, a design oriented WordPress website builder for pros

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:

cody

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

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

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

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