Sticky Notes are usefull

HavaLite CMS

A new liteweight Content Management System (CMS)

Sticky Notes are usefull

After searching the web for a jQuery Sticky note plugin, i decided to write the function my self, which fits the idea im up to.

A sticky note is a usefull tool in a Blog system with many plugins or Tags, which i like to use from time to time. And cause i almost forget these keywords i decided to attach a sticky note to the menu (like the notes on my table) to view them any time, any place in my administration area.

The notes are saved for every user in the SqLite DB, the tool is resizable and by dblClick it views a textarea to type my notes in, by clicking out of the textarea it saves the text per AJAX to the database.

Here how it looks like:

Hint I did not make a plugin for jQuery its only a function, which i would like to show here and if any one like to convert to a nice jQuery plugin, please notify me, to add to ouur list.

For this Tutorial we need the jQuery UI Bundle.

The HTML part of the note Box

<div id="stickyNotis">
<img id="stickyNote" src="sys/img/sticky_note.png" border="0">
<span id="myBox"><pre id="myBoxInner"><?=$noteText; ?></pre>
</div>
The javascript part
$(function() {
    
    var noteBox = $("#myBox");
    var noteBoxInner = $("#myBoxInner");
    var noteBoxImg = $("img#stickyNote");
    
    var nWidth = noteBox.width();
    var nHeight = noteBox.height();
    var nPos = Array(350, 17); // left, top
    
    var winW = $(window).width();
    var winH = $(window).height();
    
    var resizeEnd = false;
    var editNote = false;
    
    //-------------------------------------------
    noteBox.resizable();
    
    noteBox.resize(function(){
        nWidth    = noteBox.width();
        nHeight = noteBox.height();
        resizeEnd = true;
    });
    
    $(document).mouseup(function() {
        if(resizeEnd==true){
            $.post("hava_note.php", { resize:true, w: nWidth, h: nHeight });
            resizeEnd = false;
        }
    });

    noteBoxImg.toggle(
       
        function() {
            var outOfDimW = (nPos[0] *2) + nWidth;
            var outOfDimH = (nPos[1] *2) + nHeight;

            if((outOfDimW + 10) > winW){ noteBox.width(300); }
            if((outOfDimH) > winH){ noteBox.height(200); }
            noteBoxImg.attr({ src:"sys/img/sticky_note_pin.png" }); noteBox.show(1000);
        },
        function() { noteBoxImg.attr({ src:"sys/img/sticky_note.png" }); noteBox.hide(1000); }
    );
    
    noteBox.dblclick(function(){
        if($("#note_form_text").val()){} // if textarea exists -> do nothing
        else{
            var notis    = noteBoxInner.text();
            noteBoxInner.html('<form id="note_form" name="note_form" onsubmit=""><textarea id="note_form_text" name="note_form_text" style="width:'+ (nWidth - 9) +'px; height:' + (nHeight - 19) + 'px;">' + notis + '</textarea></form>');
            $('#note_form_text').focus();
            editNote = true;
        }
    });

    noteBoxInner.focusout(function() {
        var myNote = $('#note_form_text').val();
        if(editNote==true){
            $.post("hava_note.php", { note:myNote });
            editNote = false;
        }
        noteBoxInner.html(myNote);
    });
});
	

The php file to store data to the DB

$resize = $_POST['resize'];
$w        = $_POST['w'];
$h        = $_POST['h'];

$note    = $_POST['note'];
$chkUser = hava_num_rows("SELECT * FROM notes WHERE user='".$userName."'");

if($resize and $userName){ // update data if user exists in the table note ***************
    if($chkUser > 0){ SaveSqlite("UPDATE notes SET w='".$w."', h='".$h."' WHERE user='".$userName."'"); }
    else{ SaveSqlite("INSERT INTO notes (user, w, h) VALUES ('".$userName."', '".$w."', '".$h."')"); }
}
elseif($note and $userName){ // insert new if the username does not exists ***************
    if($chkUser > 0){ SaveSqlite("UPDATE notes SET note='".$note."' WHERE user='".$userName."'"); }
    else{ SaveSqlite("INSERT INTO notes (user, w, h, note) VALUES ('".$userName."', '300', '150', '".$note."')"); }

}

and at last the CSS part

#stickyNotis {
   display:block; width:19px; height:19px; position:absolute; top:2px; left:335px; 
}
#stickyNote {
   display:block; width:19px; height:19px; cursor:pointer; position:absolute; top:2px; left:335px; 
}
#myBox{
   width:px; height:px; background-color:#FFF6B7; position:absolute; z-index:100; left:350px; margin-top:17px; 
   font-size:12px; font-family:"Courier New", Courier, monospace; display:none; overflow:hidden; padding:7px;
   -webkit-box-shadow: 12px 12px 9px -7px #999999; -moz-box-shadow: 12px 12px 9px -7px #999999; box-shadow: 12px 12px 9px -7px #999999; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
}

An idea / suggestion is welcome

comments powered by Disqus

2 Comments

  1. Written by: Kiran Banda
    on 07.Jul.2012

    Hey,

    I have written a Jquery plugin @ http://www.kiranbanda.in/2012/07/jquery-stickynote-plugin.html and my plugin is almost similar to what you have.

    Cheers,

    Kiran Banda

  2. Written by: admin
    on 07.Jul.2012
    Very nice, thx for sharing

    It seems you´ve written in C#. I was looking for such an App for a while and found Stickies here: http://www.zhornsoftware.co.uk/

Leave a Reply

Contact Info

Phone: +49 941 26175

Address: Ayman Teryaki,
Prüfeninger Str. 48,
93047 Regensburg, Germany

Want more info - go to our contact page or visit Google+

Social

Stay up to date. Subscribe via RSS, Facebook, Twitter or Email

Recent Comments