Sticky Notes with HTML5 and jQuery

With this html5 javascript plugin you can create sticky notes in your browser, you can set differents colors, cuztomize the html tags and create messages in a real look like sticky notes.

Javascript code



var stickywidth = 200; // width of sticky note (can't be less than 200)
var stickyheight = 200; // height of sticky note (can't be less than 200)
var max_notes = 500; // maximum number of notes one can store
var allowed_tags = '<br /><br><ol></ol><ul></ul><li></li><strong></strong><i></i>';
var html5sticky = {};
var note_index = 0;
// add a note
html5sticky.addNote = function(){
// count total present notes
var tnotes = $('.note_common').length;
if (tnotes === max_notes){
html5sticky.showMessage('#FFE16B', 'black', 'You can not add any more notes, please delete some to add more.');
return false;
}
// unique localstorage identifier for this sticky note
var nindex = ++note_index + 'stickynote';
var dated = html5sticky.getDateTime();
var dateStr = new Date();
// get random color
var bgcolor = html5sticky.getColor();
var stickynote = $('<div class="note_common ' + bgcolor + '" />').appendTo($('#main'));
// add tape to stickynote
html5sticky.addPin(stickynote);
$(stickynote).append($('<h2>' + dated + '</h2>'));
$(stickynote).append($('<p>Text here...</p>'));
// append identifier
$(stickynote).append($('<span id="idf_' + nindex + '" />'));
// set width and height of the sticky note
$('.note_common').css({width: stickywidth + 'px', height:stickyheight + 'px'});
$('.note_common p').css({height:(stickyheight - 60) + 'px', width:(stickywidth + 9) + 'px'});
if (! $("#removenotes").is(':visible')){
$('#removenotes').slideDown('slow');
}
//$(stickynote).find('h2').attr('contentEditable', true);
//$(stickynote).find('p').attr('contentEditable', true);
// add utility buttons
//html5sticky.addUtilityButtons(stickynote);
// scroll to newly added sticky note
$('html, body').animate({
scrollTop:$(stickynote).offset().top
});
// store note info local storage
if (Modernizr.localstorage){
localStorage.setItem(nindex, nindex);
localStorage.setItem(nindex + '|pos', parseInt($(stickynote).offset().left, 10) + '|' + parseInt($(stickynote).offset().top, 10));
localStorage.setItem(nindex + '|text', $(stickynote).find('h2').text() + '|' + $(stickynote).find('p').text());
localStorage.setItem(nindex + '|bgcolor', bgcolor);
localStorage.setItem(nindex + '|dated', dated + '|' + html5sticky.getISODateTime(dateStr));
}
else {
html5sticky.nohtml5();
}
};
// no html5 ?
html5sticky.nohtml5 = function(){
html5sticky.showMessage('#FFE16B', 'black', 'Your browser does not support html5, please upgrade your browser.');
};
// adds utility buttons on note footer
html5sticky.addUtilityButtons = function(el){
$el = $(el);
$el.append('<div align="center" class="icons-footer" />');
$('.icons-footer').append('<img class="left shrink ficon" src="assets/img/shrink.png" alt="" title="shrink/expand">');
$('.icons-footer').append('<img class="left alarm ficon" src="assets/img/alarm.png" alt="" title="set alarm for this sticky note">');
$('.icons-footer').append('<img class="left lock ficon" src="assets/img/lock.png" alt="" title="lock this sticky note">');
$('.icons-footer').append('<img class="left settings ficon" src="assets/img/settings.png" alt="" title="settings for note">');
$('.icons-footer').append('<img class="left email ficon" src="assets/img/email.png" alt="" title="email this sticky note">');
$('.icons-footer').append('<img class="left tweet ficon" src="assets/img/tweet.png" alt="" title="tweet this sticky note">');
$('.icons-footer').append('<img class="left share ficon" src="assets/img/share.png" alt="" title="share this sticky note">');
// set "left" for these icons now
$('.ficon:first').css({marginLeft: '10px', marginRight: '15px'});
$('.ficon').each(function(index){
$(this).css('left', index * (parseInt($(this).width(), 10) + 5));
});

};
// save note
html5sticky.saveNote = function(el){
if (Modernizr.localstorage){
var identifier = html5sticky.getIdentifier($(el));
var htext = html5sticky.stripTags($(el).closest('.bignote').find('.hedit')[0].value, allowed_tags);
var ptext = html5sticky.stripTags($(el).closest('.bignote').find('.pedit')[0].value, allowed_tags);
ptext = ptext.replace(/\r?\n/g, '<br />');
localStorage.setItem(identifier + '|text', htext + '|' + ptext);
$('[id^=idf_' + identifier + ']').closest('.note_common').find('h2').text(htext);
$('[id^=idf_' + identifier + ']').closest('.note_common').find('p').html(ptext);
html5sticky.showMessage('#9BED87', 'black', 'Sticky Note Saved :)');
}
else {
html5sticky.nohtml5();
}
};
// get note identifier
html5sticky.getIdentifier = function(el){
var identifier = $(el).closest('.bignote').find('[id^=idf_]').attr('id');
if (typeof identifier == 'undefined' || identifier == null){
identifier = $(el).closest('.note_common').find('[id^=idf_]').attr('id');
}
if (typeof identifier != 'undefined'){
identifier = identifier.replace('idf_', '');
return identifier;
}
else{
return false;
}
};
// delete note
html5sticky.deleteNote = function(el){
if (confirm('Are you sure you want to delete this sticky note ?')){
// delete from storage also
if (Modernizr.localstorage){
var identifier = html5sticky.getIdentifier($(el));
localStorage.removeItem(identifier);
localStorage.removeItem(identifier + '|pos');
localStorage.removeItem(identifier + '|text');
localStorage.removeItem(identifier + '|settings');
}
else {
html5sticky.nohtml5();
}
$(el).closest('.note_common').fadeOut('slow', function(){
$(el).closest('.note_common').remove();

if (! $(".note_common").length > 0){
$('#removenotes').slideUp('slow');
}
});
}
};
// delete all notes
html5sticky.deleteAllNotes = function(){
if (confirm('Are you sure you want to delete ALL sticky note ?')){
$('.note_common').fadeOut('slow', function(){
$('.note_common').remove();
localStorage.clear();
$('#removenotes').slideUp('slow');
});
}
};
// close big note
html5sticky.closeNote = function(el){
$(el).closest('.bignote')[html5sticky.getAnimation(true)]('slow', function(){
$('#overlay').remove();
});
};
// get current date and time
html5sticky.getDateTime = function(){
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var ampm = '';
var sep = ' ';
var dsep = '/';
var tsep = ':';
if (minutes < 10) minutes = "0" + minutes;
if(hours > 11){
ampm = 'PM';
} else {
ampm = 'AM';
}
return month + dsep + day + dsep + year + sep + hours + tsep + minutes + sep + ampm;
};
// get ISO 8601 date and time
html5sticky.getISODateTime = function(d){
function pad(n){return n < 10 ? '0' + n : n}
return d.getUTCFullYear()+'-'
+ pad(d.getUTCMonth()+1)+'-'
+ pad(d.getUTCDate())+'T'
+ pad(d.getUTCHours())+':'
+ pad(d.getUTCMinutes())+':'
+ pad(d.getUTCSeconds())+'Z'
};
// edit note
html5sticky.editNote = function($clone, el){
var ptext = $clone.find('p').html();
ptext = ptext.replace(/(<br \/>|<br>)/g, '\n');
$clone.find('p').replaceWith('<textarea class="pedit" />');
$clone.find('.pedit')
.val(ptext)
.css('margin-top', '5px')
.addClass('inset')
.width('590px')
.height('280px');
// make content editable
var htext = $clone.find('h2').text();
$clone.find('h2').replaceWith('<input type="text" class="hedit" />');
$('.hedit').addClass('inset').val(html5sticky.stripTags(htext, allowed_tags)).width(250);
// put in Close button
$('<a href="#" class="close_stickynote"><img src="assets/img/deletebig.png" alt="" title="close note"></a>')
.css({
position:'absolute',
top:7,
right:5
})
.appendTo($clone);
// put in Save button
$('<a href="#" class="save_stickynote"><img src="assets/img/savebig.png" alt="" title="save note"></a>')
.css({
position:'absolute',
top:7,
right:60
})
.appendTo($clone);
// put in Tip
$('<span class="tip">Tip: Allowed HTML tags: <code>')
.css({
position:'absolute',
bottom:10,
left:15
})
.appendTo($clone);
var tags = allowed_tags;
tags = tags.replace('<br />', '');
// remove ending tags
tags = tags.match(/<([A-Z][A-Z0-9]*)\b[^>]*>(.*?)/ig);
$('.tip').text($('.tip').text() + tags.join(' '));
};
// get all notes
html5sticky.getNotes = function(){
if (Modernizr.localstorage){
for(var i = 1; i <= max_notes; i++){
if (localStorage.getItem(i + 'stickynote')){
//console.log(i + 'stickynote');
note_index = i;
var stickynote, bgcolor, htext, ptext, pleft, ptop, temp_array;
// get color and rotation level
bgcolor = localStorage.getItem(i + 'stickynote' + '|bgcolor');
// get position info
temp_array = localStorage.getItem(i + 'stickynote' + '|pos').split('|');
pleft = temp_array[0];
ptop = temp_array[1];
// get text info
temp_array = localStorage.getItem(i + 'stickynote' + '|text').split('|');
htext = temp_array[0];
ptext = temp_array[1];
stickynote = $('<div class="note_common ' + bgcolor + '" />').appendTo($('#main'));
// add tape to stickynote
html5sticky.addPin(stickynote);
$(stickynote).append($('<h2>Sticky Note</h2>'));
$(stickynote).append($('<p>Text here...</p>'));
// append identifier
$(stickynote).append($('<span id="idf_' + i + 'stickynote' + '" />'));
//$(stickynote).find('h2').attr('contentEditable', true);
//$(stickynote).find('p').attr('contentEditable', true);
$(stickynote).find('h2').text(html5sticky.stripTags(htext, allowed_tags));
$(stickynote).find('p').html(html5sticky.stripTags(ptext, allowed_tags));
// set width and height of the sticky note
$('.note_common').css({width: stickywidth + 'px', height:stickyheight + 'px'});
$('.note_common p').css({height:(stickyheight - 60) + 'px', width:(stickywidth + 9) + 'px'});
// add utility buttons
//html5sticky.addUtilityButtons(stickynote);
}
}
if (! $('.note_common').length > 0){
$('#removenotes').hide();
}

}
else {
html5sticky.nohtml5();
}
};
// email note
html5sticky.emailNote = function(){
};
// share note
html5sticky.shareNote = function(){
};
// share note
html5sticky.showMessage = function(bgcolor, color, msg){
if (!$('#smsg').is(':visible'))
{
$('html, body').animate({
scrollTop: 0
}, 500, function(){
if (!$('#smsg').length)
{
$('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({
position:'absolute',
top:0,
left:3,
width:'98%',
height:'30px',
lineHeight:'30px',
background:bgcolor,
color:color,
zIndex:1000,
padding:'10px',
fontWeight:'bold',
textAlign:'center',
opacity:0.9,
margin:'auto',
display:'none'
}).slideDown('show');

setTimeout(function(){
$('#smsg').animate({'width':'hide'}, function(){
$('#smsg').remove();
});
}, 4000);
}
});
}
};
// get random color
html5sticky.getColor = function(){
var text = "";
var possible = "0123456789";
text += possible.charAt(Math.floor(Math.random() * possible.length));
return 'stickynote' + text;
};
// get random animation string
html5sticky.getAnimation = function(hideAnimation){
var words = new Array();
if (typeof hideAnimation != 'undefined'){
words[1] = "hide";
words[2] = "fadeOut";
words[3] = "slideUp";
}
else {
words[1] = "show";
words[2] = "fadeIn";
words[3] = "slideDown";
}

// Generate a random number between 1 and 3
var rnd = Math.ceil(Math.random() * 3);

return words[rnd];
};
// add pin to note
html5sticky.addPin = function(el){
var close = $('<div><a href="#" class="delete_stickynote"><img src="assets/img/delete.png" alt="" title="delete note"></a></div>');
var tag = $('<div align="center"><img src="assets/img/pin.png" alt=""></div>');
$(close).css({
position:'absolute',
top:-15,
right:-15
}).prependTo($(el));

$(tag).css({
position:'absolute',
zIndex:99,
top:-30,
left:parseInt(stickywidth / 2, 10) - 10
}).prependTo($(el));
};
// enlarge note for editing
html5sticky.enlargeNote = function(el){
$this = $(el);
// get initial position
var posLeft = parseInt($(el).offset().left, 10);
var posTop = parseInt($(el).offset().top, 10);
// create overlay
$('<div id="overlay" />').css({
position:'fixed',
background:'transparent',
background:'rgba(0,0,0,0.5)',
top:'0',
left:'0',
width:'100%',
height:'100%',
zIndex:'100'
}).appendTo($('body'));
$clone = $(el).clone().removeClass('note_common').addClass('bignote').appendTo($('#overlay'));
// remove the pin
$clone.find($('img[src*="pin.png"]').closest('div')).hide();
// change delete button title
$clone.find($('img[src*="delete.png"]').closest('div')).hide();
$($clone).css({
position:'absolute',
zIndex: 500,
cursor:'default',
paddingTop:'5px',
top:posTop,
left:posLeft,
width:'600px',
height:'400px',
top:'50%',
left:'50%',
display:'none',
marginLeft:'-300px',
marginTop:'-200px'
});
$($clone)[html5sticky.getAnimation()](400);
// add date and time info
var dateStr = '', dateAgo = '';
if (Modernizr.localstorage){
var identifier = html5sticky.getIdentifier($(el));
var dateTime = localStorage.getItem(identifier + '|dated');
var timeImg = '<img class="left" align="absmiddle" src="assets/img/time.png">';
dateStr = dateTime.split('|')[0];
dateAgo = prettyDate(dateTime.split('|')[1]);
dateStr = (dateStr.length > 0) ? 'Created on: ' + dateStr : '';
dateAgo = (dateAgo.length > 0) ? ' (' + dateAgo + ')' : '';
timeImg = (dateStr.length > 0) ? timeImg : '';
}
else {
html5sticky.nohtml5();
}
$('<div class="timeago left" />').prependTo($clone);
$('.timeago').css({fontSize: '12px', fontFamily:'tahoma'}).html(timeImg + '&nbsp;&nbsp;' + dateStr + dateAgo);
$('.timeago').after('<div class="clear" />');
// hide the utility buttons
$($clone).find('.icons-footer').hide();
// make content editable
html5sticky.editNote($clone, el);
};
html5sticky.setup = function(){
var fontFamily = $('.note_common p').css('font-family');
// Architects font needs to have lesser line height / spacing for lists
if (typeof fontFamily != 'undefined' && fontFamily.indexOf('Architects') >= 0){
$('.note_common ul').css({lineHeight:'10px', padding:'0px', margin:'0px'});
$('.note_common ol').css({lineHeight:'0px', padding:'0px', margin:'0px'});
}
// sticky notes can't be less than 200x200
if (stickywidth < 200){
stickywidth = 200;
}
if (stickyheight < 200){
stickyheight = 200;
}
};
// http://phpjs.org/functions/strip_tags:535
html5sticky.stripTags = function(input, allowed) {
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>)
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
}
// jQuery Play
$(function(){
// initial setup
html5sticky.setup();
// get any saved notes on page load
html5sticky.getNotes();
// add note
$('#addnote').click(function(){
html5sticky.addNote();
return false;
});
// delete all notes
$('#removenotes').click(function(){
html5sticky.deleteAllNotes();
return false;
});
// delete note
$('.delete_stickynote').live('click', function(){
html5sticky.deleteNote($(this));
return false;
});
// close enlarged note
$('.close_stickynote').live('click', function(){
html5sticky.closeNote($(this));
return false;
});
// save the note
$('.save_stickynote').live('click', function(){
html5sticky.saveNote($(this));
return false;
});
// enlarge the note
$(".note_common").live("click", function(event) {
html5sticky.enlargeNote($(this));
});
// allow escape to close big note
$(document).keyup(function(e) {
if (e.keyCode == "27") {
$('#overlay').remove();
$('.bignore').remove();
}
});
});
Author: Sarfraz Ahmed - Source

Sponsored Links:



Comments

Michael Ramos:
2012-10-18 21:10:20

I LOVE THIS.. NOW I want to make them movable.

Neha:
2017-11-22 15:11:34

This is such a useful information and thanks for the valuable post

<b><a href = "http://www.fita.in/html5-training-in-chennai/"title= "Html5 Training in Chennai">Html5 Training in Chennai</a></b

Pallavi:
2018-04-13 10:04:34

<a href="http://www.sparkinfosys.com">Sparkinfosys</a> is One Of the Best Designing and Development Company in Hyderabad.We offer Creative Website Design,Website Development, E-commerce Services, SEO Services, mobile app development Android App Development ,Matrimonial we designing company,Logo Designing,BULK SMS SERVICES,Domain Registration...etc

lenin:
2018-05-09 07:05:27

Hi, thanks for posting a tips-full article, I had learned more things on this blog, Keep on blogging, thanks .
<a href https://www.besanttechnologies.com/training-courses/java-training>JAVA Training in chennai </a>

Lenin:
2018-05-11 10:05:58

Hi, thanks for posting a tips-full article, I had learned more things on this blog, Keep on blogging, thanks .
<a href https://www.besanttechnologies.com/training-courses/java-training>JAVA Training in chennai </a>

Shobana:
2018-07-30 16:07:42

This blog is very useful and I found it really easy to understand. Keep posting :) Thank you so much!!!

premkumar damodaran:
2018-07-31 04:07:52

hi your blog was very useful on html5 .

umanitya ramesh:
2018-10-02 15:10:06

Hi, a clear explanation on <a href"http:// www.html5training.in">HTML5</a>. It is very easy and self explanatory.

umanitya ramesh:
2018-10-14 09:10:43

A very informative write up on sticky notes with java <a href="www.html5training.in">HTML5</a>. Thanks so much

Sakthi Murugan:
2018-12-07 09:12:55

I am happy to find this post very useful for me, as it contains a lot of information. I always prefer to read the quality content I found in you post. Thanks for sharing

pugal:
2018-12-28 06:12:05

Nice blog. Really very useful....tanq for sharing and keep sharing useful information with us.

josh:
2019-02-03 13:02:35

thank you for the information on html5 training in chennai.
<a href="http://html5training.in"html5 training in chennai</a>

cibiya:
2019-03-13 11:03:20

nice blog

FITA:
2019-04-30 05:04:11

<a href="http://www.cloudcomputingtraininginchennai.com/">Cloud Computing Training In Chennai</a>

Keen77:
2019-04-30 06:04:48

Keen Digitals is a <a href="http://www.keendigitalservices.com/?> Best SEO Company in Hyderabad </a>and provides the best organic SEO services in Hyderabad. Keen Digitals offers productive SEO services with utmost sincerity &amp; perfection. For affordable SEO services in Hyderabad, contact us today.

Sathyan:
2019-05-02 02:05:49

Blog Is Very Informative
<a href="http://cloudcomputingtraininginchennai.com"/>Cloud Computing Training In Chennai</a>

Sathyan T:
2019-05-02 18:05:40

Blog is very informative
<a href="http://www.cloudcomputingtraininginchennai.in/">Cloud Computing Training In Chennai</a>

keen Digital:
2019-09-25 05:09:03

Thank you so much for sharing such an awesome blog.
<a href="http://www.keendigitalservices.com/">digital marketing services in hyderabad</a>

Leave a comment
[Optional]
(Will not be shown on the site)
[Optional]
[Optional]

Recent Comments

venkatesh cs said:

Thanks for sharing valuable information. <a href="https://www.credosystemz.com/courses/digital-marketing-training/"/> ...

Akash said:

Nice Article. Thanks <a href=?https://bitaacademy.com/course/hadoop-training-in-chennai/?>Hadoop</a> ...

Rajkumar said:

Nice Article..Very Useful information... <a href=?https://bitaacademy.com/course/data-science-training-institute-in-chennai/?>BITA ...

venkatesh cs said:

Thanks for sharing valuable information.https://www.credosystemz.com/courses/digital-marketing-training ...

josephin jose said:

Really nice post. Thank you for sharing amazing information. <a href="https://www.credosystemz.com/java-training/">Java ...

keen Digital said:

Thank you so much for sharing such an awesome blog. <a href="http://www.keendigitalservices.com/">digital ...

impressbss said:

Article is very informative nice to read it <a href="https://www.impressbss.com/">web design company ...

tvtap said:

http://tvtap.fun

venkatesh cs said:

Excellent Blog. Thank you so much for sharing. https://www.credosystemz.com/training-in-chennai/react-js-training/ ...

SyntaxHighlighter.config.stripBrs=true;