Very Simply Sticky Notes

by Adam Schwartz

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<button id="new" class="btn">+ New Note</button> <button id="save" class="btn primary">Save</button> <span>Double-click to close notes</span>
<div id="notes"></div>

CSS

body { margin: 40px; }
.fa{position:absolute; top:150px; left:30px;}
#notes { margin-top: 30px; }
span { margin-left: 10px; color: #444; }
.sticky-note { height: 200px; width: 200px; color: #7f6c04; background: #f9dd45; border-radius: 10px; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; box-shadow: 2px 2px 10px rgba(0,0,0,0.4); overflow: hidden; }
.contents { background: #f9e055; margin: 20px; outline: none; }
.handle { cursor: move; background: #7f6c04; border-radius: 8px 8px 0px 0px; }
.handle .close { cursor: pointer }
#save { margin-left: 7px; }
html body .sticky-note div.close { color: #3d3402; opacity: 1; text-shadow: 1px 0px 1px #a08805; padding: 2px; }

JavaScript

zIndex = 10;
$('#new').click(function(){
    $('#notes')
        .append('\
            <div class="sticky-note-pre ui-widget-content fa">\
                <div class="handle">&nbsp;<div class="close">&times;</div></div>\
                <div contenteditable class="contents">awesome</div>\
            </div>\
         ')
        .find('.sticky-note-pre')
            //.position where we want it
        .end()
        //.do something else to $('#notes')
    ;
    $('.sticky-note-pre')
        .draggable({
            handle: '.handle'    
        })
        .resizable({
            resize: function(){
                var n = $(this);
                n.find('.contents').css({
                    width: n.width() - 40,
                    height: n.height() - 60
                });
            }
        })
        .bind('click hover focus mousedown', function(){
            $(this)
                .css('zIndex', zIndex++)
                .find('.ui-icon')
                    .css('zIndex', zIndex++)
                .end()
            ;
        })
        .find('.close')
            .click(function(){
                $(this).parents('.sticky-note').remove();
            })
        .end()
        .dblclick(function(){
            $(this).remove();
        })
        .addClass('sticky-note')
        .removeClass('sticky-note-pre')
    ;
});

$('#save').click(function(){
    var notes = [], i, note;
    $('.sticky-note').each(function(){
        notes.push($(this).find('.contents').html());
    });
    //do something with notes
    console.log(notes);
});