From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
thx a lot mate. works well.
@doud
Pingback: Tweets that mention jStickyNote: A jQuery Plugin for Creating Sticky Notes | Codrops -- Topsy.com
Pingback: uberVU - social comments
Pingback: jStickyNote: A jQuery Plugin for Creating Sticky Notes | Codrops | Nicolas Debras
Very nice plug in. Thank you.
Pingback: jStickyNote: A jQuery Plugin for Creating Sticky Notes | Codrops | Squico
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!!
This is lovely. I have one question, though … what if the page doesn’t contain a #content? Is there a sensible default possible?
Pingback: Plugins : jQuery jStickyNote Plugin « FrameLinks
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.
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?
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
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})
double click does not appear to work in Chrome4
Julien de Prabère
where i have to put this line
$(‘div.jStickyNote’).mouseover($(this).focus()); to make focus on mouse over?
@ P.Arta.
To get the positions use:
var pos $(‘#id_on_element’).offset();
alert(‘left: ‘+ pos.left +’ top:’+pos.top);
Simple as that!
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?
$.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 🙂
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;
});
}
})
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.
could someone please tell me how i can have a sticky note that is shown on page load?
thanks in advance 🙂
ok . i have sorted it out . i now have notes loading on page load and positions set as properties. thanks for a great plugin.
Great stuff man.Please how do i save text entered in d textarea?
Great, but without saving position to any file it doesnt have sense…
Great plugin! Anyone managed to save the content using AJAX?