jStickyNote: A jQuery Plugin for Creating Sticky Notes

Development October 30, 2009 by cody 14 Comments

jStickyNote

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: jQuery, plugin, sticky note

Discussion¹⁴ Join the discussion

edouard
October 30th, 2009 at 00:47

thx a lot mate. works well.
@doud
Raghuraman
October 30th, 2009 at 18:09

Very nice plug in. Thank you.
rene
November 26th, 2009 at 06:20

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!!
Colin
November 27th, 2009 at 01:28

This is lovely. I have one question, though … what if the page doesn’t contain a #content? Is there a sensible default possible?
Marco
January 8th, 2010 at 23:59

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.
P.Arta
January 19th, 2010 at 12:05

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?
Daniel Nowak
January 25th, 2010 at 11:33

This plugin looks suberb, but i had some problems with the usability and the function set. So I wrote my own sticky note plugin. You can find it here: http://jquery-sticky-notes.com
Julien de Prabère
January 26th, 2010 at 14:35

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})
nick
January 29th, 2010 at 00:46

double click does not appear to work in Chrome4