Press "Enter" to skip to content

Customizable Sticky Draggable Notes For Web | Post It All

Post It All is a jQuery plugin that allows a visitor to create customizable, floating, draggable, and resizable notes on a webpage.

Features:

  • Drag and drop support based on jQuery UI.
  • Allows to maximize and minimize notes windows.
  • WYSIWYG editor based on Trumbowyg.
  • A small color picker based on Mini colors.
  • It allows saving notes on the client-side using the HTML5 Local Storage API.
  • It also comes with a Chrome extension.

How to make use of it:

1. Load jQuery library and different required assets within the webpage.

<!-- jQuery Library -->
<script src="jquery.min.js"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="jquery-ui.css">
<script src="libs/jquery-ui/jquery-ui.min.js"></script>

<!-- Trumbowyg editor -->
<link rel="stylesheet" href="trumbowyg.css">
<script src="trumbowyg.min.js"></script>

<!-- Minicolors -->
<link rel="stylesheet" href="jquery.minicolors.css">
<script src="jquery.minicolors.min.js"></script>

2. Download and embody the jQuery Post It All plugin’s JS and CSS files within the webpage.

<link rel="stylesheet" href="jquery.postitall.css">
<script src="jquery.postitall.js"></script>

3. Add a brand new sticky word within the top-left nook of the webpage.

$.PostItAll.new("Hello World");

4. Global configurations to allow and disable options and alter the notes behavior.

$.fn.postitall.globals = {

  // Id note prefixe
  prefix          : '#PIApostit_',

  // Options: domain, page, all
  filter          : 'domain',     

  // Save postit in local storage
  savable         : false,        

  // Random color in new postits
  randomColor     : true,         

  // Show or hide toolbar
  toolbar         : true,         

  // effect on hover over postit shoing/hiding toolbar options
  autoHideToolBar : true,         

  // Set removable feature on or off
  removable       : true,         

  // Confirmation before note remove
  askOnDelete     : true,         

  // Set draggable feature on or off
  draggable       : true,         

  // Set resizable feature on or off
  resizable       : true,         

  // Set contenteditable and enable changing note content
  editable        : true,         

  // Set options feature on or off
  changeoptions   : true,         

  // Postit can not be modified
  blocked         : true,         

  // true = minimized, false = maximixed
  minimized       : true,         

  // Expand note
  expand          : true,         

  // Allow to fix the note in page
  fixed           : true,         

  // Create a new postit
  addNew          : true,      

  // Show info icon   
  showInfo        : true,         

  // Allow paste html in contenteditor
  pasteHtml       : true,         

  // Html editor (trumbowyg)
  htmlEditor      : true,         

  // Automatic reposition of the notes when user resize screen
  autoPosition    : true,        

  // Add arrow to notes : none, front, back, all 
  addArrow        : 'back'       
   
};

5. Note configurations for properties, style, options, and occasions of the notice.

$.fn.postitall.defaults = {
  
  // Note id
  id              : "",        

  // Creation               
  created         : Date.now(),             

  // Domain in the url  
  domain          : window.location.origin,   

  // Page in the url
  page            : window.location.pathname, 

  // Browser informtion & OS name,
  osname          : navigator.appVersion,     

  // Content of the note (text or html)
  content         : '',                  

  // Position absolute or fixed     
  position        : 'absolute',              

  // x coordinate (from left) 
  posX            : '10px',         

  // y coordinate (from top)         
  posY            : '10px',       

  // x coordinate (from right). This property invalidate posX            
  right           : '',                       

  // Note total height
  height          : 200,                 

  // Note total width     
  width           : 160,            

  // Note resizable min-width          
  minHeight       : 210,            

  // Note resizable min-height          
  minWidth        : 170,   

  // Position when minimized/collapsed (internal use)                   
  oldPosition     : {},   

  // Config note style
  style : {

    // General style in 3d format
    tresd           : true,   

    // Background color in new postits when randomColor = false              
    backgroundcolor : '#FFFA3C',        

    // Text color    
    textcolor       : '#333333',         

    // Shadow in the text   
    textshadow      : true,          

    // Default font       
    fontfamily      : 'verdana',        

    // Default font size    
    fontsize        : 'small',     

    // Default arrow : none, top, right, bottom, left         
    arrow           : 'none',               
  },

  // By default, copy of global defaults
  features : $.fn.postitall.globals,          

  // Note flags
  flags : {

    // If true, the note cannot be edited
    blocked         : false,         

    // true = Collapsed note / false = maximixed       
    minimized       : false,                

    // true = Expanded note / false = normal
    expand          : false,        

    // Set position fixed        
    fixed           : false,            

    // Higlight note    
    highlight       : false,                
  },

  //  Attach the note to al html element
  attachedTo : {

    // Where to attach
    element         : '',   

    // Position relative to elemente : top, right, bottom or left                
    position        : 'right',     

    // Fix note to element when resize screen         
    fixed           : true,            

    // Show an arrow in the inverse position     
    arrow           : true,                 
  },

  
  // Triggered after note creation
  onCreated: function(id, options, obj) { return undefined; },  

  // Triggered on each change  
  onChange: function (id) { return undefined; },    

  // Triggered when note is clicked, dragged or resized              
  onSelect: function (id) { return undefined; },         

  // Triggered on double click         
  onDblClick: function (id) { return undefined; },       

  // Triggered on the end of dragging and resizing of a note         
  onRelease: function (id) { return undefined; },           

  // Triggered when a note is deleted      
  onDelete: function (id) { return undefined; }        
             
};

6. API.

// Create a new note. 
// $(id).postitall('new', options, callback);
$.PostItAll.new(content, options, object, callback);

// Get or set the options of the created notes. 
// $(id).postitall('options');
// $(id).postitall('options',options);
$.PostItAll.options(options);
$.PostItAll.options(id,options);

// Hide note. 
// $(id).postitall('hide');
$.PostItAll.hide();
$.PostItAll.hide(id);

// Show note. 
// $(id).postitall('show');
$.PostItAll.show();
$.PostItAll.show(id);

// Destroy a specific note or all the notes of your page. 
// $(id).postitall('destroy');  
$.PostItAll.destroy(inline, storage, domain);

// Change the global or note configuration. 
$.PostItAll.changeConfig(type, opt);

// Restore global and/or note configuration to factory defaults. 
$.PostItAll.restoreConfig(type);

// load and show all notes from the current domain/page. 
$.PostItAll.load(callback, callbacks, highlight);

// save all the notes in the storage
$.PostItAll.save();

// return in the callback function the number of stored notes of the current domain.
$.PostItAll.length(callback);

jQuery Plugin For Sticky Draggable Notes On The Web, Post It All Github


See Demo And Download

Official Website(txusko): Click Here

This superior jQuery/javascript plugin is developed by txusko. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *