Going to implement sticky notes in your website?
See if this plugin suits your requirements! Let's have a look, what functionality and options this jquery sticky note plugin provides. With few lines of javascript code we can get started with a working sticky note application.
Instead of me explaining the functionality details here, see the working demo/ examples through below links:
  1. Basic demo
  2. Advanced demo
Basic features
  1. Note boxes are draggable and resizable(if set).
  2. Themes option.
  3. Customize styles, however you want.
  4. Call back events for saving/ updating data and for other different events to back end storage.
  5. Exposed methods for loading existing notes.
  6. Get full control on all note box properties on all call back events.
  7. Double click the header box to edit header text. Once done editing press enter or click out side note box, changes will be saved. If want to rollback the header text changes, just press escape!
  8. Double click the note details box to edit note text. Once done editing click out side note box, changes will be saved. If want to rollback the text changes, just press escape!
  9. Many customization options, like default note new note position, dimension, default header text, default note text etc.
  10. Move notes on top just by clicking on the respective note box!
Requirements to use this plugin
  1. It's a jQuery plugin and will require you to include jQuery 1.5.2 or later.
  2. Internally it utilizes jQuery UI draggable and resizable js. So, you will need to include jquery UI 1.7.3 or later.
  3. It also supports resizing of the note area, if you will enable it while initializing the plugin. Also, If you want to include resizing support then you will need include jQuery UI Resizable js and css.
  4. Last but not least, include jquery.stickynote.js and jquery.stickynote.css.
Basic Setup
After including above required js and css files into your page, initialize the stickyNote plugin like below:
$(function () {
    $('#divStickyNotesContainer').coaStickyNote({
        // Set options you want to customize
    });
                
Supported customization options
Above you saw small code snippet for basic initializing. But of course you will want to customize the plugin as per your requirement. Let's see different customization options supported in this plugin.
availableThemes: [{text: "", value: ""}]
If want to provide option to user to change note theme, then set this property else do not set. By default it's set empty array.
It's an array of theme object. any number of theme objects can be added in this array, which will get populated into theme dropdown. where user can select preferred theme.
Each theme object of the array should be an object, which contains two properties: text and value.
text Text, which will be visible in theme dropdown. So, user can choose preferred theme for each note. And this value may also be used in saving the user preferred theme for each note box.
value theme css class name, which will be applied to the outer div of the note box.
Example:
    [{ 
        text: "Yellow",
        value: "sticky-note-yellow-theme"
    },{ 
        text: "Orange",
        value: "sticky-note-orange-theme"
    }]
    // Note: You will need to setup the css class properties for all different 
    //       themes(you will set) in a style sheet, which is included in the page.
                
defaultTheme: {text: "", value: ""}
Here we can set the default theme, which will be applied to new note boxes. defaultTheme is basically an object, which contains two properties: text and value.
text Text, which will be visible in theme dropdown. So, user can choose preferred theme for each note. And this value may also be used in saving the user preferred theme for each note box.
value theme css class name, which will be applied to the outer div of the note box.
By default it's set to
    { 
        text: "Yellow",
        value: "sticky-note-yellow-theme"
    }
                
deleteLinkText: string
Set the text for close(delete) link of note box.
If you prefer icon instead of link for this, can set this property to blank and utilize css class .each-sticky-note-delete to place icon, instead of text.
By default it's set to X.
noteDimension: {width: "Xpx", height: "Ypx"}
Set the default dimension(width/ height) of a note box, which will be applied to new note boxes. noteDimension is basically an object, which contains two properties: width and height.
width Position from width.
height Position from height.
By default it's set to
    { 
        width: "235px",
        height: "200px"
    }
                
noteHeaderText: string
Set the default note header text of a note box, which will be applied to new note boxes.
By default it's set to "New note!".
noteHeaderTextMaxLength: int
Set note header text max length.
If this max length value will be greater than 0, then it will be applied as maxlength attribute to the note header textbox.
By default it's set to 0.
notePosition: {top: "Ypx", left: "Xpx"}
Set the default position of a note, which will be applied to new note boxes. notePosition is basically an object, which contains two properties: top and left.
top Position from top.
left Position from left.
By default it's set to
    { 
        top: "10px",
        left: "10px"
    }
                
noteText: string
Set the default note text of a note box, which will be applied to new note boxes.
By default it's set to "New note box!".
noteTextMaxLength: int
Set note text max length here.
If this max length value will be greater than 0, then it will be applied as maxlength attribute to the note textarea.
By default it's set to 0.
optionsLinkText: string
Set the text for options link of note box.
If you prefer icon instead of link for this, can skip setting this property and utilize css class .each-sticky-note-options to place icon, instead of text.
By default it's set to blank.
resizable: (boolean) true | false
Set to true if want to make the sticky note resizable! By default it's false.
If setting resizable as true, then include jquery-ui-1.10.3.min.js and jquery-ui.css, jquery.ui.resizable.css.
sleeping: (boolean) true | false
It will decide that the added/ loaded note box will be in sleeping/ readonly mode or not.
true: In sleeping/ readonly mode
false: Active/ Editable
By default it's set to false.
startZIndex: int
Set the minimum z-index here. So, plugin will internally generate z-index greater/ equal to this starting z-index value and apply to different note boxes.
By default it's set to 10.
Supported events
Let's see events, which are supported by this plugin. Events are useful in many scenarios. For example:
- May want to update our server/ local storage if new note box got created.
- May want to put confirm box before delete a note box.
- May want to update our server/ local storage if new note box got updated. etc...
beforeCreatingNoteBox(note, noteBox)
Use this event, if want to perform some operation before creating a new note box.
Return false, if you want to abort the create new note request.
note It's an object, which contains all the properties for new note box going to be created.
noteBox It's a jquery element, outer most div of current note box.
onMovingNoteBoxOnTop(note, noteBox)
Use this event, if want to perform some operation when z-index of any note box get updated.
Basically, when user clicks on any note box, that note box get moved on top, by assigning biggest z-index(among present note box z-indexes) to that note box and this event get called.
This event can be used for updating note box z-index to the server/ local storage, so when user comes next time they see their changes preserved.
note It's an object, which contains all the properties for new note box going to be created.
noteBox It's a jquery element, outer most div of current note box.
onNoteBoxCreated(note, noteBox)
Use this event, if want to perform some operation after new note box got added to dom tree.
Mostly, this event can be used for saving new note box details to the server/ local storage.
note It's an object, which contains all the properties for new note box going to be created.
noteBox It's a jquery element, outer most div of current note box.
onNoteBoxDelete(note, noteBox)
Use this event, if want to perform some operation while deleting a note box.
Return false, if want to abort the delete note request.
This event can also be used for deleting the note from server/ local storage.
note It's an object, which contains all the properties for new note box going to be created.
noteBox It's a jquery element, outer most div of current note box.
onNoteBoxDraggingStop(note, noteBox)
Use this event, if want to perform some operation after dragging of a note box stops.
Mostly, this event can be used for updating note text position(position from top/ left) to the server/ local storage, so when user comes next time they see their changes preserved.
note It's an object, which contains all the properties for new note box going to be created.
noteBox It's a jquery element, outer most div of current note box.
onNoteBoxHeaderUpdate(note, noteBox)
Use this event, if want to perform some operation while header of a note box get updated.
Return false, if want to abort the request header text update request.
Mostly, this event can be used for updating header text of note box to the server/ local storage.
note It's an object, which contains all the properties for new note box going to be created.
noteBox It's a jquery element, outer most div of current note box.
onNoteBoxResizeStop(note, noteBox)
Use this event, if want to perform some operation after resizing of a note box stops.
Mostly, this event can be used for updating note text dimension(width/ height) to the server/ local storage, so when user comes next time they see their changes preserved.
note It's an object, which contains all the properties for new note box going to be created.
noteBox It's a jquery element, outer most div of current note box.
onNoteBoxTextUpdate(note, noteBox)
Use this event, if want to perform some operation while note text get updated.
Return false, if want to abort the request header text update request.
Mostly, this event can be used for updating note text to the server/ local storage.
note It's an object, which contains all the properties for new note box going to be created.
noteBox It's a jquery element, outer most div of current note box.
onThemeSelectionChange(note, noteBox)
Use this event, if want to perform some operation when theme of a note box get changed by a user.
This event can be used for updating note box theme to the server/ local storage, so when user comes next time they see their changes preserved.
note It's an object, which contains all the properties for new note box going to be created.
noteBox It's a jquery element, outer most div of current note box.
Supported methods
destroy()
Removes the sticky note functionality completely. This will return the element back to its intial state.
getNoteBoxById(id)
Returns noteBox, the jquery element for individual note box as per passed id, outer most div of individual note box. id Id of the note box. This is the unique field for each note and you set it in each note box data.
getNoteBoxByIndex(index)
Returns noteBox, the jquery element for individual note box as per passed index, outer most div of individual note box. index Index of the note box. This is the unique integer, get assigned to each note box while creating a note.
loadExistingNote(note)
Call this method, if want to populate/ load one note, which already there(saved by user before).
note note object. Object should contain details of note:
loadExistingNotes(notes) - notes: Array of note object
Call this method, if want to populate/ load multiple notes, which already there(saved by user before).
notes Array of note object. Each note object should contain details of note:
sleep(noteBox)
It will disable(send in sleep mode) all the events from the passed note box and it will go in readonly mode. noteBox It's a jquery element, outer most div of current note box.
sleepAll()
It will disable(send in sleep mode) all the events from all the note boxes. Basically, all note boxes will go in readonly mode.
wakeup(noteBox)
It will revert back(from sleep state) state of the passed note box. So, passed note box will respond against all the supported events again. noteBox It's a jquery element, outer most div of current note box.
wakeupAll()
It will revert back(from sleepAll state) state of all the note boxes So, note boxes will respond against all the supported events again.
Styles/ themes
By default in style style sheet 5 themes are added. But you may add more themes as per your requirement. Also, you may remove/ modify exisiting themes. Below are some common css classes, which can be used for creating new themes:
    .sticky-note-theme-name.each-sticky-note-outer {
        /* This part can be used for applying style on whole note box. */
    }
    .sticky-note-theme-name.each-sticky-note-outer .each-sticky-note-header {
        /* This part can be used for applying style on note box header. */
    }
    .sticky-note-theme-name.each-sticky-note-outer .each-sticky-note-header input {
        /* This part can be used for applying style on note box header 
           input text box where user can updates note header text. */
    }
    .sticky-note-theme-name.each-sticky-note-outer .each-sticky-note-text-box {
        /* This part can be used for applying style on note box details part, where user note text are shown. */
    }
    .sticky-note-theme-name.each-sticky-note-outer .each-sticky-note-text-box textarea {
        /* This part can be used for applying style on note box textarea, where user updates note text. */
    }
    .sticky-note-theme-name.each-sticky-note-outer .each-sticky-note-delete {
        /* This part can be used for applying style for delete link. */
    }
    .sticky-note-theme-name.each-sticky-note-outer .each-sticky-note-options {
        /* This part can be used for applying style for delete link. */
    }
    .sticky-note-theme-name.each-sticky-note-outer .each-sticky-note-options-control {
        /* This part can be used for applying style for options link. */
    }
            
Advanced Setup example
$(function () {
    $('#divStickyNotesContainer').coaStickyNote({
        resizable: true,
        availableThemes: [
            { text: "Yellow", value: "sticky-note-yellow-theme" },
            { text: "Orange", value: "sticky-note-orange-theme" }],
        notePosition: { top: "100px", left: "50px" },
        noteDimension: { width: "300px", height: "300px" },
        noteText: "New custom note box!",
        noteHeaderText: "Note title!",
        startZIndex: 50,
        beforeCreatingNoteBox: function (note) {
            // Want to do any thing here?
        },
        onNoteBoxCreated: function (note) {

            // Let's save it on server
        },
        onNoteBoxHeaderUpdate: function (note) {
            // Return false, if want to abort the request of header update.
            // Else let's save the updated header text on server, to preserve changes.
        },
        onNoteBoxTextUpdate: function (note) {
            // We can also show confirm box here. Which is common while deleting some thing!
            // Return false, if want to abort the request of text update.
            // Else let's save the updated note text on server, to preserve changes.
        },
        onNoteBoxDelete: function (note) {
            // Return false, if want to abort the note delete request .
            // Else let's delete the note details from server, to preserve changes.
        },
        onNoteBoxResizeStop: function (note) {
            // Note box dimension got changed.
            // let's save the updated dimension(width/ height) on server, to preserve changes.
        },
        onNoteBoxDraggingStop: function (note) {
            // Note box position got changed.
            // let's save the updated position(top/ left) on server, to preserve changes.
        },
        onThemeSelectionChange: function (note) {
            // Note box theme got changed.
            // let's save the updated theme on server, to preserve changes.
        },
        onMovingNoteBoxOnTop: function (note) {
            // Note box z-index got changed to be on top of all the notes.
            // let's save the updated the z-index on server, to preserve changes.
        },
    });

    // Some helper functions. Can be modify as properties name, you have in your back end!

    // Get required properties from note object for passing to server.
    function getBackEndStickyObject(note) {
        return {
            Title: note.settings.noteHeaderText,
            NoteText: note.settings.noteText,
            PositionTop: note.settings.notePosition.top,
            PositionLeft: note.settings.notePosition.left,
            DimensionWidth: note.settings.noteDimension.width,
            DimensionHeight: note.settings.noteDimension.height,
            ZIndex: note.settings.zIndex,
            OuterCssClass: note.settings.defaultTheme.value,
            Id: note.id
        };
    }
    
    // Get required properties from server note object for and set it to
    // new note object, to be passed to plugin to load existing notes.
    function getLocalStickyNoteObject(backEndObj, note) {
        if (note == null) {
            note = {};
            note.settings = {};
            note.settings.notePosition = {};
            note.settings.defaultTheme = {};
            note.settings.noteDimension = {};
        }

        note.settings.noteHeaderText = backEndObj.Title;
        note.settings.noteText = backEndObj.NoteText;
        note.settings.notePosition.top = backEndObj.PositionTop;
        note.settings.notePosition.left = backEndObj.PositionLeft;
        note.settings.noteDimension.width = backEndObj.DimensionWidth;
        note.settings.noteDimension.height = backEndObj.DimensionHeight;
        note.settings.zIndex = backEndObj.ZIndex;
        note.settings.defaultTheme.value = backEndObj.OuterCssClass;
        note.id = backEndObj.Id;

        return note;
    }
});
                
note object
note object is getting passed in many events, which conatins all the properties for individual note box. More details regarding each property and event below:
note.id : string
note.index : int
note.settings: Object
note.settings.availableThemes : Array of Theme object [Get/ Set]
note.settings.defaultTheme : Theme Object [Get/ Set]
note.settings.deleteLinkText : string [Get/ Set]
note.settings.noteDimension : Object - for note box dimension [Get/ Set]
note.settings.noteDimension.height : string - Height of the note box (Example: 300px) [Get/ Set]
note.settings.noteDimension.width : string - Width of the note box (Example: 300px) [Get/ Set]
note.settings.noteHeaderText : string : Note header text [Get/ Set]
note.settings.noteHeaderTextMaxLength : int [Get/ Set]
note.settings.notePosition : Object - for note box position [Get/ Set]
note.settings.notePosition.top : string - Position from top (Example: 300px) [Get/ Set]
note.settings.notePosition.left : string - Position from left (Example: 300px) [Get/ Set]
note.settings.noteText : string : Note text [Get/ Set]
note.settings.noteTextMaxLength : int [Get/ Set]
note.settings.optionsLinkText : string - Options link text [Get/ Set]
note.settings.resizable : boolean - note boxes will be resiable? [Get/ Set]
note.settings.sleeping :  boolean - note box is in sleeping mode/ disabled? [Get/ Set]
note.settings.startZIndex : int - Starting point for note box z-indexes [Get/ Set]
note.settings.zIndex : int - Note box z-index [Get/ Set]
note.settings.beforeCreatingNoteBox : Event
note.settings.onMovingNoteBoxOnTop : Event
note.settings.onNoteBoxCreated : Event
note.settings.onNoteBoxDelete : Event
note.settings.onNoteBoxDraggingStop : Event
note.settings.onNoteBoxHeaderUpdate : Event
note.settings.onNoteBoxResizeStop : Event
note.settings.onNoteBoxTextUpdate : Event
note.settings.onThemeSelectionChange : Event
                
noteBox: jQuery element
noteBox is jQuery element, outer most div for each individual note box. More details regarding this below:
It also contains noteobject in data, which can be retrieved like below:
    var note = noteBox.data("coaStickyNote");
                
Note: If you have id or index of individual note box, then you can get the noteBox jQuery element through getNoteBoxById(id) or getNoteBoxByIndex(index) methods.
Issues/ Discussion
If you face any issue in this or some thing is missing. Please go here to add a note and discuss.
License
In simple words, modify and/or use it whereever you want, without any restriction, limitation and warranty.