Sticky Notes with HTML5 and jQuery. See original source: http://www.ajaxshake.com/en/JS/239221/sticky-notes-with-html5-and-jquery-html5sticky.html

jquery-html5sticky-note.js

<br>
var stickywidth = 200;  // width of sticky note (can't be less than 200)<br>
var stickyheight = 200; // height of sticky note (can't be less than 200)<br>
var max_notes = 500; // maximum number of notes one can store<br>
var allowed_tags = '<br /><br><ol></ol><ul></ul><li></li><strong></strong><i></i>';<br>
var html5sticky = {};<br>
var note_index = 0;<br>
// add a note  <br>
//we need to modify this to work as repin a note <br.
html5sticky.addNote = function(){<br>
    // count total present notes<br>
    var tnotes = $('.note_common').length;<br>
    if (tnotes === max_notes){<br>
       html5sticky.showMessage('#FFE16B', 'black', 'You can not add any more notes, please delete some to add more.');<br>
       return false;<br>
    }<br>
    // unique localstorage identifier for this sticky note<br>
    var nindex = ++note_index + 'stickynote';<br>
    var dated = html5sticky.getDateTime();<br>
    var dateStr = new Date();<br>
   // get random color<br>
    var bgcolor = html5sticky.getColor();<br>
    var stickynote = $('<div class="note_common ' + bgcolor + '" />').appendTo($('#main'));<br>
    // add tape to stickynote<br>
    html5sticky.addPin(stickynote);<br>
    $(stickynote).append($('<h2>' + dated + '</h2>'));<br>
    $(stickynote).append($('<p>Text here...</p>'));<br>
    // append identifier<br>
    $(stickynote).append($('<span id="idf_' + nindex + '" />'));<br>
    // set width and height of the sticky note<br>
    $('.note_common').css({width: stickywidth + 'px', height:stickyheight + 'px'});<br>
    $('.note_common p').css({height:(stickyheight - 60) + 'px', width:(stickywidth + 9) + 'px'});<br>
    if (! $("#removenotes").is(':visible')){<br>
       $('#removenotes').slideDown('slow');<br>
    }<br>
    //$(stickynote).find('h2').attr('contentEditable', true);<br>
    //$(stickynote).find('p').attr('contentEditable', true);<br>
    // add utility buttons<br>
    //html5sticky.addUtilityButtons(stickynote);<br>
    // scroll to newly added sticky note<br>
    $('html, body').animate({<br>
      scrollTop:$(stickynote).offset().top<br>
    });<br>
    // store note info local storage<br>
    if (Modernizr.localstorage){<br>
       localStorage.setItem(nindex, nindex);<br>
       localStorage.setItem(nindex + '|pos', parseInt($(stickynote).offset().left, 10) + '|' + parseInt($(stickynote).offset().top, 10));<br>
       localStorage.setItem(nindex + '|text', $(stickynote).find('h2').text() + '|' + $(stickynote).find('p').text());<br>
       localStorage.setItem(nindex + '|bgcolor', bgcolor);<br>
       localStorage.setItem(nindex + '|dated', dated + '|' + html5sticky.getISODateTime(dateStr));<br>
    }<br>
    else {<br>
       html5sticky.nohtml5();<br>
    }<br>
};<br>
// no html5 ?<br>
html5sticky.nohtml5 = function(){<br>
   html5sticky.showMessage('#FFE16B', 'black', 'Your browser does not support html5, please upgrade your browser.');<br>
};<br>
// adds utility buttons on note footer<br>
html5sticky.addUtilityButtons = function(el){<br>
   $el = $(el);<br>
   $el.append('<div align="center" class="icons-footer" />');<br>
   $('.icons-footer').append('<img class="left shrink ficon" src="assets/img/shrink.png" alt="" title="shrink/expand">');<br>
   $('.icons-footer').append('<img class="left alarm ficon" src="assets/img/alarm.png" alt="" title="set alarm for this sticky note">');<br>
   $('.icons-footer').append('<img class="left lock ficon" src="assets/img/lock.png" alt="" title="lock this sticky note">');<br>
   $('.icons-footer').append('<img class="left settings ficon" src="assets/img/settings.png" alt="" title="settings for note">');<br>
   $('.icons-footer').append('<img class="left email ficon" src="assets/img/email.png" alt="" title="email this sticky note">');<br>
   $('.icons-footer').append('<img class="left tweet ficon" src="assets/img/tweet.png" alt="" title="tweet this sticky note">');<br>
   $('.icons-footer').append('<img class="left share ficon" src="assets/img/share.png" alt="" title="share this sticky note">');<br>
   // set "left" for these icons now<br>
   $('.ficon:first').css({marginLeft: '10px', marginRight: '15px'});<br>
   $('.ficon').each(function(index){<br>
      $(this).css('left', index * (parseInt($(this).width(), 10) + 5));<br>
   });<br>
<br>
};<br>
// save note<br>
html5sticky.saveNote = function(el){<br>
   if (Modernizr.localstorage){<br>
      var identifier = html5sticky.getIdentifier($(el));<br>
      var htext = html5sticky.stripTags($(el).closest('.bignote').find('.hedit')[0].value, allowed_tags);<br>
      var ptext = html5sticky.stripTags($(el).closest('.bignote').find('.pedit')[0].value, allowed_tags);<br>
      ptext = ptext.replace(/\r?\n/g, '<br />');<br>
      localStorage.setItem(identifier + '|text', htext + '|' + ptext);<br>
      $('[id^=idf_' + identifier + ']').closest('.note_common').find('h2').text(htext);<br>
      $('[id^=idf_' + identifier + ']').closest('.note_common').find('p').html(ptext);<br>
      html5sticky.showMessage('#9BED87', 'black', 'Sticky Note Saved :)');<br>
   }<br>
   else {<br>
      html5sticky.nohtml5();<br>
   }<br>
};<br>
// get note identifier<br>
html5sticky.getIdentifier = function(el){<br>
   var identifier = $(el).closest('.bignote').find('[id^=idf_]').attr('id');<br>
   if (typeof identifier == 'undefined' || identifier == null){<br>
      identifier = $(el).closest('.note_common').find('[id^=idf_]').attr('id');<br>
   }<br>
   if (typeof identifier != 'undefined'){<br>
      identifier = identifier.replace('idf_', '');<br>
      return identifier;<br>
   }<br>
   else{<br>
      return false;<br>
   }<br>
};<br>
// delete note<br>
html5sticky.deleteNote = function(el){<br>
    if (confirm('Are you sure you want to delete this sticky note ?')){<br>
         // delete from storage also<br>
         if (Modernizr.localstorage){<br>
            var identifier = html5sticky.getIdentifier($(el));<br>
            localStorage.removeItem(identifier);<br>
            localStorage.removeItem(identifier + '|pos');<br>
            localStorage.removeItem(identifier + '|text');<br>
            localStorage.removeItem(identifier + '|settings');<br>
         }<br>
         else {<br>
            html5sticky.nohtml5();<br>
         }<br>
         $(el).closest('.note_common').fadeOut('slow', function(){<br>
            $(el).closest('.note_common').remove();<br>
<br>
            if (! $(".note_common").length > 0){<br>
               $('#removenotes').slideUp('slow');<br>
            }<br>
         });<br>
    }<br>
};<br>
// delete all notes<br>
html5sticky.deleteAllNotes = function(){<br>
    if (confirm('Are you sure you want to delete ALL sticky note ?')){<br>
         $('.note_common').fadeOut('slow', function(){<br>
            $('.note_common').remove();<br>
            localStorage.clear();<br>
            $('#removenotes').slideUp('slow');<br>
         });<br>
    }<br>
};<br>
// close big note<br>
html5sticky.closeNote = function(el){<br>
    $(el).closest('.bignote')[html5sticky.getAnimation(true)]('slow', function(){<br>
      $('#overlay').remove();<br>
    });    <br>
};<br>
// get current date and time<br>
html5sticky.getDateTime = function(){<br>
   var currentTime = new Date();<br>
   var month = currentTime.getMonth() + 1;<br>
   var day = currentTime.getDate();<br>
   var year = currentTime.getFullYear();<br>
   var hours = currentTime.getHours();<br>
   var minutes = currentTime.getMinutes();<br>
   var ampm = '';<br>
   var sep = ' ';<br>
   var dsep = '/';<br>
   var tsep = ':';<br>
   if (minutes < 10) minutes = "0" + minutes;<br>
   if(hours > 11){<br>
      ampm = 'PM';<br>
   } else {<br>
      ampm = 'AM';<br>
   }   <br>
   return month + dsep + day + dsep + year + sep + hours + tsep + minutes + sep + ampm;<br>
};<br>
// get ISO 8601 date and time<br>
html5sticky.getISODateTime = function(d){<br>
  function pad(n){return n < 10 ? '0' + n : n}<br>
  return d.getUTCFullYear()+'-'<br>
      + pad(d.getUTCMonth()+1)+'-'<br>
      + pad(d.getUTCDate())+'T'<br>
      + pad(d.getUTCHours())+':'<br>
      + pad(d.getUTCMinutes())+':'<br>
      + pad(d.getUTCSeconds())+'Z'<br>
};<br>
// edit note<br>
html5sticky.editNote = function($clone, el){<br>
   var ptext = $clone.find('p').html();<br>
   ptext = ptext.replace(/(<br \/>|<br>)/g, '\n');<br>
   $clone.find('p').replaceWith('<textarea class="pedit" />');<br>
   $clone.find('.pedit')<br>
      .val(ptext)<br>
      .css('margin-top', '5px')<br>
      .addClass('inset')<br>
      .width('590px')<br>
      .height('280px');<br>
   // make content editable<br>
   var htext = $clone.find('h2').text();<br>
   $clone.find('h2').replaceWith('<input type="text" class="hedit" />');<br>
   $('.hedit').addClass('inset').val(html5sticky.stripTags(htext, allowed_tags)).width(250);<br>
   // put in Close button<br>
   $('<a href="#" class="close_stickynote"><img src="assets/img/deletebig.png" alt="" title="close note"></a>')<br>
      .css({<br>
         position:'absolute',<br>
         top:7,<br>
         right:5<br>
      })<br>
      .appendTo($clone);<br>
   // put in Save button<br>
   $('<a href="#" class="save_stickynote"><img src="assets/img/savebig.png" alt="" title="save note"></a>')<br>
      .css({<br>
         position:'absolute',<br>
         top:7,<br>
         right:60<br>
      })<br>
      .appendTo($clone);<br>
   // put in Tip<br>
   $('<span class="tip">Tip: Allowed HTML tags: <code>')<br>
      .css({<br>
         position:'absolute',<br>
         bottom:10,<br>
         left:15<br>
      })<br>
      .appendTo($clone);<br>
   var tags = allowed_tags;<br>
   tags = tags.replace('<br />', '');<br>
   // remove ending tags<br>
   tags = tags.match(/<([A-Z][A-Z0-9]*)\b[^>]*>(.*?)/ig);<br>
   $('.tip').text($('.tip').text() + tags.join(' '));<br>
};<br>
// get all notes<br>
html5sticky.getNotes = function(){<br>
   if (Modernizr.localstorage){<br>
      for(var i = 1; i <= max_notes; i++){<br>
         if (localStorage.getItem(i + 'stickynote')){<br>
            //console.log(i + 'stickynote');<br>
            note_index = i;<br>
            var stickynote, bgcolor, htext, ptext, pleft, ptop, temp_array;<br>
            // get color and rotation level<br>
            bgcolor = localStorage.getItem(i + 'stickynote' + '|bgcolor');<br>
            // get position info<br>
            temp_array = localStorage.getItem(i + 'stickynote' + '|pos').split('|');<br>
            pleft = temp_array[0];<br>
            ptop = temp_array[1];<br>
            // get text info<br>
            temp_array = localStorage.getItem(i + 'stickynote' + '|text').split('|');<br>
            htext = temp_array[0];<br>
            ptext = temp_array[1];<br>
            stickynote = $('<div class="note_common ' + bgcolor + '" />').appendTo($('#main'));<br>
            // add tape to stickynote<br>
            html5sticky.addPin(stickynote);<br>
            $(stickynote).append($('<h2>Sticky Note</h2>'));<br>
            $(stickynote).append($('<p>Text here...</p>'));<br>
            // append identifier<br>
            $(stickynote).append($('<span id="idf_' + i + 'stickynote' + '" />'));<br>
            //$(stickynote).find('h2').attr('contentEditable', true);<br>
            //$(stickynote).find('p').attr('contentEditable', true);<br>
            $(stickynote).find('h2').text(html5sticky.stripTags(htext, allowed_tags));<br>
            $(stickynote).find('p').html(html5sticky.stripTags(ptext, allowed_tags));<br>
            // set width and height of the sticky note<br>
            $('.note_common').css({width: stickywidth + 'px', height:stickyheight + 'px'});<br>
            $('.note_common p').css({height:(stickyheight - 60) + 'px', width:(stickywidth + 9) + 'px'});<br>
            // add utility buttons<br>
            //html5sticky.addUtilityButtons(stickynote);<br>
         }<br>
      }<br>
      if (! $('.note_common').length > 0){<br>
         $('#removenotes').hide();<br>
      }<br>
<br>
   }<br>
   else {<br>
      html5sticky.nohtml5();<br>
   }<br>
};<br>
// email note<br>
html5sticky.emailNote = function(){<br>
};<br>
// share note<br>
html5sticky.shareNote = function(){<br>
};<br>
// share note<br>
html5sticky.showMessage = function(bgcolor, color, msg){<br>
    if (!$('#smsg').is(':visible'))<br>
    {<br>
            $('html, body').animate({<br>
             scrollTop: 0<br>
            }, 500, function(){<br>
                if (!$('#smsg').length)<br>
                {<br>
                    $('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({<br>
                        position:'absolute',<br>
                        top:0,<br>
                        left:3,<br>
                        width:'98%',<br>
                        height:'30px',<br>
                        lineHeight:'30px',<br>
                        background:bgcolor,<br>
                        color:color,<br>
                        zIndex:1000,<br>
                        padding:'10px',<br>
                        fontWeight:'bold',<br>
                        textAlign:'center',<br>
                        opacity:0.9,<br>
                        margin:'auto',<br>
                        display:'none'<br>
                    }).slideDown('show');<br>
<br>
                    setTimeout(function(){<br>
                        $('#smsg').animate({'width':'hide'}, function(){<br>
                            $('#smsg').remove();<br>
                        });<br>
                    }, 4000);<br>
                }<br>
            });<br>
    }<br>
};<br>
// get random color<br>
html5sticky.getColor = function(){<br>
    var text = "";<br>
    var possible = "0123456789";<br>
    text += possible.charAt(Math.floor(Math.random() * possible.length));<br>
    return 'stickynote' + text;<br>
};<br>
// get random animation string<br>
html5sticky.getAnimation = function(hideAnimation){<br>
   var words = new Array();<br>
   if (typeof hideAnimation != 'undefined'){<br>
      words[1] = "hide";<br>
      words[2] = "fadeOut";<br>
      words[3] = "slideUp";<br>
   }<br>
   else {<br>
      words[1] = "show";<br>
      words[2] = "fadeIn";<br>
      words[3] = "slideDown";<br>
   }<br>
<br>
   // Generate a random number between 1 and 3<br>
   var rnd = Math.ceil(Math.random() * 3);<br>
<br>
   return words[rnd];<br>
};<br>
// add pin to note<br>
html5sticky.addPin = function(el){<br>
    var close = $('<div><a href="#" class="delete_stickynote"><img src="assets/img/delete.png" alt="" title="delete note"></a></div>');<br>
    var tag = $('<div align="center"><img src="assets/img/pin.png" alt=""></div>');<br>
    $(close).css({<br>
        position:'absolute',<br>
        top:-15,<br>
        right:-15<br>
    }).prependTo($(el));<br>
<br>
    $(tag).css({<br>
        position:'absolute',<br>
        zIndex:99,<br>
        top:-30,<br>
        left:parseInt(stickywidth / 2, 10) - 10<br>
    }).prependTo($(el));<br>
};<br>
// enlarge note for editing<br>
html5sticky.enlargeNote = function(el){<br>
      $this = $(el);<br>
      // get initial position<br>
      var posLeft = parseInt($(el).offset().left, 10);<br>
      var posTop = parseInt($(el).offset().top, 10);<br>
      // create overlay<br>
      $('<div id="overlay" />').css({<br>
         position:'fixed',<br>
         background:'transparent',<br>
         background:'rgba(0,0,0,0.5)',<br>
         top:'0',<br>
         left:'0',<br>
         width:'100%',<br>
         height:'100%',<br>
         zIndex:'100'<br>
      }).appendTo($('body'));<br>
      $clone = $(el).clone().removeClass('note_common').addClass('bignote').appendTo($('#overlay'));<br>
      // remove the pin<br>
      $clone.find($('img[src*="pin.png"]').closest('div')).hide();<br>
      // change delete button title<br>
      $clone.find($('img[src*="delete.png"]').closest('div')).hide();<br>
      $($clone).css({<br>
         position:'absolute',<br>
         zIndex: 500,<br>
         cursor:'default',<br>
         paddingTop:'5px',<br>
         top:posTop,<br>
         left:posLeft,<br>
         width:'600px',<br>
         height:'400px',<br>
         top:'50%',<br>
         left:'50%',<br>
         display:'none',<br>
         marginLeft:'-300px',<br>
         marginTop:'-200px'<br>
      });<br>
      $($clone)[html5sticky.getAnimation()](400);<br>
      // add date and time info<br>
      var dateStr = '', dateAgo = '';<br>
      if (Modernizr.localstorage){<br>
         var identifier = html5sticky.getIdentifier($(el));<br>
         var dateTime = localStorage.getItem(identifier + '|dated');<br>
         var timeImg = '<img class="left" align="absmiddle" src="assets/img/time.png">';<br>
         dateStr = dateTime.split('|')[0];<br>
         dateAgo = prettyDate(dateTime.split('|')[1]);<br>
         dateStr = (dateStr.length > 0) ? 'Created on: ' + dateStr : '';<br>
         dateAgo = (dateAgo.length > 0) ? ' (' + dateAgo + ')' : '';<br>
         timeImg = (dateStr.length > 0) ? timeImg : '';<br>
     }<br>
      else {<br>
         html5sticky.nohtml5();<br>
      }<br>
      $('<div class="timeago left" />').prependTo($clone);<br>
      $('.timeago').css({fontSize: '12px', fontFamily:'tahoma'}).html(timeImg + '&nbsp;&nbsp;' + dateStr + dateAgo);<br>
      $('.timeago').after('<div class="clear" />');<br>
      // hide the utility buttons<br>
      $($clone).find('.icons-footer').hide();<br>
      // make content editable<br>
      html5sticky.editNote($clone, el);<br>
};<br>
html5sticky.setup = function(){<br>
   var fontFamily = $('.note_common p').css('font-family');<br>
   // Architects font needs to have lesser line height / spacing for lists<br>
   if (typeof fontFamily != 'undefined' && fontFamily.indexOf('Architects') >= 0){<br>
      $('.note_common ul').css({lineHeight:'10px', padding:'0px', margin:'0px'});<br>
      $('.note_common ol').css({lineHeight:'0px', padding:'0px', margin:'0px'});<br>
   }<br>
   // sticky notes can't be less than 200x200<br>
   if (stickywidth < 200){<br>
      stickywidth = 200;<br>
   }<br>
   if (stickyheight < 200){<br>
      stickyheight = 200;<br>
   }<br>
};<br>
// http://phpjs.org/functions/strip_tags:535<br>
html5sticky.stripTags = function(input, allowed) {<br>
    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)<br>
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,<br>
        commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;<br>
    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {<br>
        return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';<br>
    });<br>
}<br>
// jQuery Play<br>
$(function(){<br>
    // initial setup<br>
    html5sticky.setup();<br>
    // get any saved notes on page load<br>
    html5sticky.getNotes();<br>
    // add note<br>
    $('#addnote').click(function(){<br>
        html5sticky.addNote();<br>
        return false;<br>
    });<br>
    // delete all notes<br>
    $('#removenotes').click(function(){<br>
        html5sticky.deleteAllNotes();<br>
        return false;<br>
    });<br>
    // delete note<br>
    $('.delete_stickynote').live('click', function(){<br>
        html5sticky.deleteNote($(this));<br>
        return false;<br>
    });<br>
   // close enlarged note<br>
    $('.close_stickynote').live('click', function(){<br>
        html5sticky.closeNote($(this));<br>
        return false;<br>
    });<br>
    // save the note<br>
    $('.save_stickynote').live('click', function(){<br>
        html5sticky.saveNote($(this));<br>
        return false;<br>
    });<br>
   // enlarge the note<br>
   $(".note_common").live("click", function(event) {<br>
      html5sticky.enlargeNote($(this));<br>
   });<br>
   // allow escape to close big note<br>
   $(document).keyup(function(e) {<br>
      if (e.keyCode == "27") {<br>
         $('#overlay').remove();<br>
         $('.bignore').remove();<br>
      }<br>
   });<br>
});<br>