Sticky notes in your webpage...

Sticky notes are a good way to keep things noted such as "To Do Lists". There are many ways we can have sticky notes in a desktop or notebook. But if we have a portal or a website and needed to provide this facility, we have a good JQuery plug in.

http://postitall.txusko.com/plugin.html

You may find there is a Chrome plugin too but what you need is the JQuery one. Download it and add it to your project. After that, provide relevant references.

 <!-- CSS -->  
 <link rel="stylesheet" href="dist/jquery.postitall.css">  
 <!-- JS -->  
 <script src="libs/jquery/dist/jquery.min.js"></script>  
 <script src="dist/jquery.postitall.js"></script>  

You also may find some plug ins such as JQuery draggable, trumbowyg editor and minicolors for color picker.

You can find relevant examples and "How to" in the documentation here.

Now let's see how we can use this in our own website with more features.

 function addPersonalNote() {  
   var p = jQuery.noConflict();  // to avoid multiple JQuery references
   p.PostItAll.new({  //create new note
     content: 'Default content to show',  //
     id: 0,  // this has to be unique 
     posX: $(window).width() / 2,  // center of the page
     posY: '10',  //top of the page
     features: { addNew: false },  // adding new upon another is prohibited
     onCreated: function (id, options, obj) { return undefined; },  //fires at the creation time
     onChange: function (id) {  return undefined;  },  // fires when content is changed
     onSelect: function (id) { return undefined; },  // fires when selected
     onDelete: function (id) { return undefined; }  // fires when deleted
   });  
 }  

This is a simple way of adding a new note. The function "addPersonalNote()" creates a new sticky note as below.

 You can maximize it, minimize or even close it. or even can add new icons too. Also you can have the option to change the color through color picker too.

In our next part, we will talk about how to save this in the database. Until that, practice what we have done so far...

Happy Coding... :)