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

By in Playground on

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

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.

Sketchy Pencil Effect with Three.js Post-Processing

Recreating the Gradient Mask Hover Effect from Evervault

Background Shift Animation with CSS Blend Modes

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 25

Comments are closed.

  2. Pingback: Tweets that mention jStickyNote: A jQuery Plugin for Creating Sticky Notes | Codrops -- Topsy.com

  3. Pingback: uberVU - social comments

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

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

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

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

  9. Pingback: Plugins : jQuery jStickyNote Plugin « FrameLinks

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

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

  13. 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})

  15. Julien de Prabère

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

  16. @ P.Arta.

    To get the positions use:

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

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

    Simple as that!

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

  18. $.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 🙂

  19. 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;
    });
    }
    })

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

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

    thanks in advance 🙂

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