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

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:

Make Way Grid Effect

Scroll Animation Ideas for Image Grids

Image To Grid Transition

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

From our sponsor
Divi
Create websites rapidly
With the Divi Layout Packs you'll get more than 800 world-class designs ready to be used for your client projects. Try it for free →

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.