Creating A Virtual Note Wall

Today we’ll be creating a neat little app called Note Ninja, which allows for the user to tack up multicolored “sticky notes” on a virtual wall.

This app is useful to the kind of person that has dozens of little ideas or reminders they want to remember. Personally I sometimes store these reminders by writing them in a notepad file then saving them to a folder to read later (if I ever get to that). With this app I’m able to display all of my notes in a much more user-friendly way, were I can easily sort, delete and create new notes!

So before we begin let’s create a roadmap of how we’re going to go about building this app. The steps are listed below:

  1. First is to create the database to store the notes information, location and color
  2. Second we’ll wire frame the site with HTML and then style it with some CSS
  3. Third is to create the PHP backend to display all the notes already in the database and also allow for deletion, creation and updating of the notes
  4. The last step is to add some jQuery. jQuery will tie everything together with interaction and sending data to and from our PHP file.

Before We Begin…

For this tutorial I’m assuming you’re comfortable with HTML and CSS. I’m going to focus mostly on PHP and jQuery, so if you have intermediate knowledge in these two you’ll be fine. If you do get lost or confused please contact me or leave a comment and I’ll try to get you on the right track. With that let’s get started on the database!

Also I’d like to thank bittbox for the paper texture used and famfamfam for the delete icon.

Creating the Database

We’re going to create only one database called noteninja, which will contain a table named notes. The table notes will contain 5 rows, note_id, note_text, note_x, note_y and note_color.

Open up phpMyAdmin or your mySQL console and enter the following SQL:

CREATE DATABASE `noteninja`;

CREATE TABLE `notes` (
`note_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`note_text` TEXT NOT NULL,
`note_x` INT(10) NOT NULL,
`note_y` INT(10) NOT NULL,
`note_color` TEXT NOT NULL
);

Here’s an explanation of what each of these rows will contain:

  • note_id will allow us to reference specific notes with a unique number id
  • note_text will contain what the note will say
  • note_x and note_y hold the x and y position of the note
  • note_color is going to have an rgb color value for our note (I’m not using hexidecimal since a jQuery function we’ll be using won’t work with it)

Before we finish up with the database let’s create two dummy notes, this will help us test our PHP later on.

INSERT INTO `notes` (`note_id` , `note_text` , `note_x` , `note_y` , `note_color`) VALUES
(NULL , 'This is my first note!', '50', '50', 'rgb(184, 195, 178)'),
(NULL , 'This is my second note!', '150', '100', 'rgb(184, 195, 178)');

So with the first dummy note it’ll be positioned 50px from the top, 50px from the left and have a light blue color.

That’s all were going to need for our database, let’s start fleshing out the app with some HTML and CSS.

HTML & CSS

This site is going to only really have two elements, the logo, which will always be on the top left of the screen, and the individual notes which will float freely inside a containing div.
To give you a good idea of the layout the image below shows the elements used and how it’ll look once we add the CSS. The images we’ll be using are packaged inside our project file which can be found at the top of this post.

The anatomy of a note

As you can see most of the action is going to be inside the note class. The note class has two elements nested within it, the text and options class.

The text class is going to display the textual information of the note and will be visible at all times. The options class on the other hand will only be visible on hover and contains a colorlist, which will allow the user to change the note’s color, and an x button to delete the note.

Let’s get started creating the HTML wire frame. Create a new file called index.php and write the following HTML within it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Note Ninja - Most Honorable Sticky Notes</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body id="notewall">
		<img src="images/logo.png" alt="Note Ninja" />

		<div class="note" style="background:#E8BF56; top:100px; left:50px;">
			<div class="ninjastar">
				Ninja'd!
			</div>
			<span class="text">This is a test note</span>
			<textarea class="inputtext">This is a test note</textarea>

			<div class="options">
				<ul class="colorlist">
					<li class="blue">a</li>
					<li class="red">a</li>
					<li class="yellow">a</li>
				</ul>
				<div class="x">
					<img src="images/delete.png" alt="" />
				</div>
			</div>
		</div>

	</body>
</html>

First thing we do is link to the style sheet, style.css, which we’ll be creating shortly. Next we have our logo image which when we style the page will stick to the top left edge.

Inside the note div you’ll see the parts that I’ve mentioned. A span tag with the text class which will hold the note’s text, the options div that has an unordered list of colors and an image of a delete button.

What’s new though is the ninjastar and textarea class, which will make more sense once we add some jQuery. The ninjastar is going to be an image of a ninjastar that will animate when we delete a note, and the textarea is a duplication of our text but in an editable form so we can change the text easily. You can get a better idea of how these two will work by trying the demo linked at the top of this post.

You’re HTML page should look like this, a mess, until we add our style sheet

Let’s make this page look more like a proper app with some CSS. Create a new file called style.css and write the following CSS within it:

/*- General -------------------------------*/
* { padding:0px; margin:0px; }
body { background:url(images/wood.gif); }
#notewall { position:relative; }

/*- Note ----------------------------------*/
.note { width:150px; position:absolute; padding:4px; font-family: Arial, Helvetica, sans-serif; color:#1a1a1a; font-size:12px; line-height:1.5em; }
	.note .inputtext { display:none; width:150px; border:none; font-family: Arial, Helvetica, sans-serif; color:#1a1a1a; font-size:12px; }

.options { position:relative; display:none; margin-top:10px; }
	.colorlist { float:left; }
		.colorlist li { list-style:none; width:10px; height:10px; border:1px solid #1a1a1a; cursor:pointer; text-indent:1000%; overflow:hidden; margin:1px; display:inline-block; }
		.red { background:#B8C3B2; }
		.blue { background:#C75233; }
		.yellow { background:#E8BF56; }
	.x { float:right; cursor:pointer; padding:0px 4px; }
	.ninjastar { position:absolute; background:url(images/ninjastar.png) no-repeat; width:68px; height:116px; overflow:hidden; text-indent:1000%; z-index:2; margin-top: -40px; margin-left:55px; display:none; }

The General section resets the default styles for our page, adds the background image and makes the container have a relative position. A relative position for the container allows the nested elements within it, like the notes, to float freely.

Our Note section adds some styles to our notes, like colors, fonts and sizes. We also have our .options, .ninjastar and .inputtext set to display:none, so we don’t see them until they’re needed.

With our stylesheet in place our site is now taking shape

That’s it for our HTML and CSS, now we can make this page more dynamic with PHP!

Adding Some PHP

Were going to use php in two areas, first we’ll add a block of code into our index.php file that will loop through and display the notes already in our database. Second we’ll have a remote file, newnote.php, which will process requests to update, delete and add notes.

Before we can do any of this we need to create a connection to our database, so create a new file called mysql_connect.php and write the following PHP inside it:

<?php

$host = "localhost"; // Host name, usually localhost
$username = "root"; // MySQL username, default is root
$password = "YourPassword"; // MySQL password, make sure you change this!
$database_name = "noteninja"; // Database name, we called ours noteninja

mysql_connect("$host", "$username", "$password")or die("cannot connect");

?>

We set up four values, our host, username, password and the database we want to use. With these were able to use the mysql_connect() method to allow us to interact with our database. Now if we want to make a connection to the database we only need to use the include() function to include this file.

With our database ready to get to work let’s start getting the two test notes within our database to display. Remove the old note and add the bolded code to your index.php file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Note Ninja - Most Honorable Sticky Notes</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body id="notewall">
		<img src="images/logo.png" alt="Note Ninja" />

		<?php
			include 'mysql_connect.php';
			mysql_select_db($database_name) or die ('Cannot connect to database');
			$query = "SELECT * FROM notes";
			$ans = mysql_query($query);
			while($row = mysql_fetch_array($ans)) {
				$x = $row['note_x'];
				$y = $row['note_y'];
				$text = $row['note_text'];
				$color = $row['note_color'];
				$id = $row['note_id'];

				echo '
					<div class="note" style="top: '. $y .'px; left: '. $x .'px; background-color:'. $color .'; ">
						<div class="ninjastar">
							Ninja\'d!
						</div>
						<span id="'. $id .'" class="text">'. $text .'</span>
						<textarea class="inputtext">'. $text .'</textarea>

						<div class="options">
							<ul class="colorlist">
								<li class="blue">a</li>
								<li class="red">a</li>
								<li class="yellow">a</li>
							</ul>
							<div class="x">
								<img src="images/delete.png" alt="" />
							</div>
						</div>
					</div>
				';

			}
		?>
	</body>
</html>

Even though this looks like a big block of code it’s actually quite simple. We first include our mysql_connect.php file to give us a connection to the database.
After that we store our MySQL query to select all notes from the notes table as a string in $query and then the response’s value we get back is stored in $ans.

The value stored in $ans is an array of the database rows. So to print them out we’re going to use the mysql_fetch_array() method to give us the values in a more usable form then store them in $row.
Inside our loop we store each of the $row’s values into a new value for convenience ($text is easier to write then $row[‘note_text’]).

After that we echo out the html note we made previously but now with a few modifications. We replace the note div’s top, left and background-color values with the database values ($x, $y and $color). Also we add a unique id to the notes text span to identify it from other notes. Lastly we replace the dummy text of both the text span and the textarea with the $text value.

With all this in place you should have two notes displaying on your page

Huzzah, our two test notes from the database! Now our notes inherit their position, text and color from the database, and if you look at the source you can see our note spans have unique id’s

We can now setup a script with php that will take AJAX requests and depending on the information sent will add, update or delete notes. We’ll do this by creating an if/else chain that will react depending on the $_POST information sent.

We’ll tackle this file in 3 parts starting with updating since it’s the hardest. Create a new file called newnote.php and write the following php code in it:

<?php
include 'mysql_connect.php';
mysql_select_db($database_name) or die('Cannot connect to database');

function cleanUp($data) {
	$data = trim(htmlentities(strip_tags(mysql_real_escape_string($data))));
	return $data;
}

if($_POST) {
	if(isset($_POST['updateid'])) { // Update the...
		if(isset($_POST['updatetext'])) { // Text
			$updatetext = cleanUp($_POST['updatetext']);
			$updateid = cleanUp($_POST['updateid']);
			$query = "UPDATE notes SET note_text = '". $updatetext ."' WHERE note_id = '". $updateid ."';";
			$ans = mysql_query($query);

		} elseif(isset($_POST['updatecolor'])) { // Color
			$updatecolor = $_POST['updatecolor'];
			$updateid = $_POST['updateid'];
			$query = "UPDATE notes SET note_color = '". $updatecolor ."' WHERE note_id = '". $updateid ."';";
			$ans = mysql_query($query);

		} else { // Position
			$updatex = $_POST['updatex'];
			$updatey = $_POST['updatey'];
			$updateid = $_POST['updateid'];
			$query = "UPDATE notes SET note_x = '". $updatex ."', note_y = '". $updatey . "' WHERE note_id = '". $updateid ."';";
			$ans = mysql_query($query);
		}
	}
}
?>

Again we begin by connection to the database, we also create a function called cleanUp(). Since we’re going to be inputting data into the database we don’t want it to be damaged by SQLinjections or other attacks. So to prevent this we’re going to sanitize our text value by putting it through this function, just in case the user puts in malicious code.

Next our if/else chain begins and is going to work like this: if we receive POST data we send it through each if statement to figure out were it fits depending on the information given. For example we get two POST requests with the names updateid and updatecolor. Our updateid will be taken into the first if() statement and then matched with one of three options, in this case changing the color since we also have an updatecolor request. Hang in there if you’re confused because you’ll be able to see this in action once we add our JavaScript.

Now we’re going to check for a request to add a new note. Add the bolded PHP code to newnote.php:

<?php
include 'mysql_connect.php';
mysql_select_db($database_name) or die('Cannot connect to database');

function cleanUp($data) {
	$data = trim(htmlentities(strip_tags(mysql_real_escape_string($data))));
	return $data;
}

if($_POST) {
	if(isset($_POST['updateid'])) { // Update the...
		if(isset($_POST['updatetext'])) { // Text
			$updatetext = cleanUp($_POST['updatetext']);
			$updateid = cleanUp($_POST['updateid']);
			$query = "UPDATE notes SET note_text = '". $updatetext ."' WHERE note_id = '". $updateid ."';";
			$ans = mysql_query($query);

		} elseif(isset($_POST['updatecolor'])) { // Color
			$updatecolor = $_POST['updatecolor'];
			$updateid = $_POST['updateid'];
			$query = "UPDATE notes SET note_color = '". $updatecolor ."' WHERE note_id = '". $updateid ."';";
			$ans = mysql_query($query);

		} else { // Position
			$updatex = $_POST['updatex'];
			$updatey = $_POST['updatey'];
			$updateid = $_POST['updateid'];
			$query = "UPDATE notes SET note_x = '". $updatex ."', note_y = '". $updatey . "' WHERE note_id = '". $updateid ."';";
			$ans = mysql_query($query);
		}
	} elseif(isset($_POST['x'], $_POST['text'], $_POST['y'])) {	// Add

			$x = $_POST['x'];
			$y = $_POST['y'];
			$text = $_POST['text'];
			$color = 'rgb(232, 191, 86)';

			$query = "INSERT INTO notes (note_text, note_x, note_y, note_color) VALUES ('". $text ."', '". $x ."', '". $y ."', '". $color ."');";
			$ans = mysql_query($query);
			$newid = mysql_insert_id();
			echo $newid;

	}
}
?>

Now if the POST request isn’t named updateid then it might be for adding a new note. We can tell because the POST data would have an x position, y position and note text.

If this is true we set the values sent to us as variables and add a default yellow color. With that we query the database to add our note, and when we get a response we set the new notes id to $newid. Last we echo the $newid back to our index.php so the newly created note can be identified and updated or deleted like the rest.

If the POST data though isn’t for updating or adding a note then it has to be for deleting a note. Deletion will be handled with an else statement, add the bolded php to newnote.php:

<?php
include 'mysql_connect.php';
mysql_select_db($database_name) or die('Cannot connect to database');

function cleanUp($data) {
	$data = trim(htmlentities(strip_tags(mysql_real_escape_string($data))));
	return $data;
}

if($_POST) {
	if(isset($_POST['updateid'])) { // Update the...
		if(isset($_POST['updatetext'])) { // Text
			$updatetext = cleanUp($_POST['updatetext']);
			$updateid = cleanUp($_POST['updateid']);
			$query = "UPDATE notes SET note_text = '". $updatetext ."' WHERE note_id = '". $updateid ."';";
			$ans = mysql_query($query);

		} elseif(isset($_POST['updatecolor'])) { // Color
			$updatecolor = $_POST['updatecolor'];
			$updateid = $_POST['updateid'];
			$query = "UPDATE notes SET note_color = '". $updatecolor ."' WHERE note_id = '". $updateid ."';";
			$ans = mysql_query($query);

		} else { // Position
			$updatex = $_POST['updatex'];
			$updatey = $_POST['updatey'];
			$updateid = $_POST['updateid'];
			$query = "UPDATE notes SET note_x = '". $updatex ."', note_y = '". $updatey . "' WHERE note_id = '". $updateid ."';";
			$ans = mysql_query($query);
		}
	} elseif(isset($_POST['x'], $_POST['text'], $_POST['y'])) {	// Add

		$x = $_POST['x'];
		$y = $_POST['y'];
		$text = $_POST['text'];
		$color = 'rgb(232, 191, 86)';

		$query = "INSERT INTO notes (note_text, note_x, note_y, note_color) VALUES ('". $text ."', '". $x ."', '". $y ."', '". $color ."');";
		$ans = mysql_query($query);
		$newid = mysql_insert_id();
		echo $newid;

	} else {
		$deleteid = $_POST['deleteid'];
		$query = "DELETE FROM notes WHERE note_id = '". $deleteid ."' LIMIT 1;";
		$ans = mysql_query($query);
	}
}
?>

Deleting a note is much simpler, we set the soon to be deleted note’s id as a variable $deleteid and then use it in a mySQL query. We send the query on its’ merry way and it deletes the note for us.

That’s all the PHP we’re going to need, last we’re going to add our jQuery to tie everything together and complete our Note Ninja application

jQuery

We’re now reaching the final stretch of our project. With jQuery we have two things to set up, the interaction of the site (dragging, dropping, editing and animations) and sending AJAX requests to our newnote.php file.

Before we can do any of that we need to include 3 files to index.php, the jQuery library, jQuery ui library and our script file. The jQuery files can be found in the project file or if you’re stubborn you can download the jQuery library and UI directly (for the ui make sure you get the interactions, like dragging and dropping, packaged in).

Link the script files at the bottom of index.php right before the </html> tag:

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.ui.all.js" ></script>
<script type="text/javascript" src="script.js" ></script>

Create the script file, script.js, and write the following:

$(function() {
	$('.note .text').click(function() {
		$(this).hide().next('textarea').show();
	}); 

	$('textarea').click(function() {
		$(this).select();
	});

	$('.note').hover(function() {
		$(this).children('.options').show();
	}, function() {
		$(this).children('.options').hide();
	});

});

We first check if the DOM is ready and then add a click event to all the text classes within a note class. When this event is triggered by a click it hide’s the text within the span and reveals the hidden textarea. The second click event is binded to the revealed textarea and highlights all the text within it for the user, for convenience. This is a more intuitive way to edit notes as opposed to using traditional forms.

We also add a hover event to all the note’s. When it’s triggered it toggles the options class to either hide or show it.

The click and hover event in action

Other than the above code every new event we add will trigger an AJAX request. Since we’re going to make so many requests I decided to set up the common parameters, the url and type, so we don’t repeat ourselves. Add the following code to script.js at the beginning right after the opening braces:

$.ajaxSetup({url:'newnote.php', type:'post'});

We use $.ajaxSetup() to say were always going to send POST requests to newnote.php. If you’re unfamiliar with using AJAX in jQuery here’s what all the options we’ll be using will do:

  • url: is where we want to send our request, this is going to be our remote php file, newnote.php. We set this in $.ajaxSetup()
  • type: is the type of request we’re going to send, GET or POST. We set this as POST with $.ajaxSetup()
  • data: is the data we want the POST or GET request to store and deliver to our url
  • success: is the event that will be triggered after the data has been sent successfully

Let’s now make our first ajax request, this one will be for deletion. Add this to script.js right after the $.ajaxSetup():

$('.x').click(function() {
	var deleteid = $(this).parent().siblings('span').attr('id');
	var path = $(this);
	$.ajax({
		data: "deleteid=" + deleteid,
		success: function() {
			$(path).parent().siblings('.ninjastar').show();
			$(path).parent().parent('.note').animate({'opacity': '0', 'marginTop': '30px'}, 1000);
		}
	});
});

We bind a click event to the delete button on every note. When it’s triggered we get the note’s unique id by grabbing the text’s id attribute. We also save the current path as a value for convenience.

Now we use $.ajax() to deliver our request, since we already set the url and type, all we need to worry about is saying what values we want to send and what happens when the request is complete. In this case we want to send the deleteid as the data and the success event to animate the note’s deletion. This animation is done by revealing the hidden ninjastar class and having it slide down and fade out slowly making it and the note disappear.

The coolest way to delete a note!

After you’re done deleting your only two notes let’s add an event to add new notes. To create a note add the following code after the deletion request:

$().dblclick(function(e) { // Adding
	var x = e.pageX;
	var y = e.pageY;
	var text = 'New Note! Click to change me';
	var color = 'rgb(232, 191, 86)';

	$.ajax({
		data: "x=" + x + " &y=" + y + " &text=" + text + " &color=" + color,
		success: function(newid) {
			$('#notewall').append('<div class="note" style="top: '+ y +'px; left: '+ x +'px; background-color:'+ color +';"><div class="ninjastar">Ninja\'d!</div><span id="'+ newid +'" class="text">'+ text +'</span><textarea class="inputtext">'+ text +'</textarea><div class="options"><ul class="colorlist"><li class="blue">a</li><li class="red">a</li><li class="yellow">a</li></ul><div class="x"><img src="images/delete.png" alt="" /></div></div></div>');
		}
	});
});

We bind a double click event to the entire page, so when a user double clicks anywhere the event will trigger. When this is triggered we immediately get the mouse’s x and y position and then store them as variables. We also set a default color and text value to use.

We send a similar ajax request as deleting a note, except for the success function we’re asking for a newid variable. If you look back at the newnote.php file, at the end of the elseif() statement you’ll see $newid = mysql_insert_id(); echo $newid;
. What this does is store the newly created note’s id as a variable and then returns it to our script.js file to be used inside the success function.

After that all we do is append our new note inside of the notewall, we replace the top, left, background-color and id with our own values. Even though the append() method looks messy it has to be on one line or we get errors.

Summon new notes simply by double clicking the spot you want them to appear

All we need to do now is make the 3 ajax request for updating the color, position and text of a note. We’ll begin with changing the color and text, add the following to script.js:

$('.note textarea').change(function() {
	var updatetext = $(this).val();
	var updateid = $(this).prev().attr('id');
	var path = $(this);
	$.ajax({
		data: "updatetext= " + updatetext +" &updateid= " + updateid,
		success: function() {
			$(path).hide();
			$(path).prev('span').text(updatetext).show();
		}
	});
});
$('.colorlist li').click(function() {
	var updatecolor = $(this).css("backgroundColor");
	var updateid = $(this).parent().parent().siblings('span').attr('id');
	var path = $(this);
	$.ajax({
		data: "updatecolor= " + updatecolor + " &updateid= " + updateid,
		success: function() {
			$(path).parent().parent().parent().css({backgroundColor: " " + updatecolor + " "});
		}
	});
});

For changing the text of a note we bind an event to the textarea, whenever it’s changed it’ll be triggered. We first set our variables as usual, the id and the updated text. When the request is successful we simply hide the text area and popup the text span with its new information.

For changing the color of a note we bind a click event to the colorlist’s list items. When it’s triggered we gather the chosen color’s rgb value and the id. When the request is successful we select the note class and change it’s background-color to the new value.

Adding these two features make our notes much more customizable

The only update we need to worry about now is changing the position. Add the following to script.js
:

$('.note').draggable({ opacity: 0.5, cursorAt: { top: 0, left: 0 },delay: 250, stop:
	function(e) {
		var updatex = e.pageX;
		var updatey = e.pageY;
		var updateid = $(this).children('span').attr('id');
		$.ajax({
			data: "updatex=" + updatex + " &updatey=" + updatey + " &updateid=" + updateid
		});
	}
});

Instead of binding an event to the note class we make it draggable, which is a method from the jQuery UI. Inside of draggable() we change some setting when the note is dragged. We make the opacity 50%, the cursor will stay at the top left corner of the note, and it will have a slight delay of .25 seconds before we drag it. Also we’re able to add an event when the user drops the note, which is inside function(e) { }.

When this event’s triggered we gather the note’s new x and y coordinates and it’s id. We then send an ajax request, without any success event this time.

Dragging a note

All of our events are now handled, but there’s one problem. As it is right now when you add a new note you’re unable to interact with it until you refresh the page. The fix for this is simple, add the bolded code to script.js, this is how you’re whole file should look when it’s complete:

$(function() { // Note Wall
	$.ajaxSetup({url:'newnote.php', type:'post'});

	jQuery.fn.refreshing = function()  { 
		$('.note .text').click(function() { // Updating
			$(this).hide().next('textarea').show();
		}); 

		$('.note textarea').change(function() {
			var updatetext = $(this).val();
			var updateid = $(this).prev().attr('id');
			var path = $(this);
			$.ajax({
				data: "updatetext= " + updatetext +" &updateid= " + updateid,
				success: function() {
					$(path).hide();
					$(path).prev('span').text(updatetext).show();
				}
			});
		});
		$('.colorlist li').click(function() {
			var updatecolor = $(this).css("backgroundColor");
			var updateid = $(this).parent().parent().siblings('span').attr('id');
			var path = $(this);
			$.ajax({
				data: "updatecolor= " + updatecolor + " &updateid= " + updateid,
				success: function() {
					$(path).parent().parent().parent().css({backgroundColor: " " + updatecolor + " "});
				}
			});
		});
		$('.note').draggable({ opacity: 0.5, cursorAt: { top: 0, left: 0 },delay: 250, stop:
			function(e) {
				var updatex = e.pageX;
				var updatey = e.pageY;
				var updateid = $(this).children('span').attr('id');
				$.ajax({
					data: "updatex=" + updatex + " &updatey=" + updatey + " &updateid=" + updateid
				});
			}
		});
		$('.note').hover(function() {
			$(this).children('.options').show();
		}, function() {
			$(this).children('.options').hide();
		});
		$('.x').click(function() {
			var deleteid = $(this).parent().siblings('span').attr('id');
			var path = $(this);
			$.ajax({
				data: "deleteid=" + deleteid,
				success: function() {
					$(path).parent().siblings('.ninjastar').show();
					$(path).parent().parent('.note').animate({'opacity': '0', 'marginTop': '30px'}, 1000);
				}
			});
		});
		$('textarea').click(function() {
			$(this).select();
		});
	}
	$().refreshing();

	$().dblclick(function(e) { // Adding
		var x = e.pageX;
		var y = e.pageY;
		var text = 'New Note! Click to change me';
		var color = 'rgb(232, 191, 86)';

		$.ajax({
			data: "x=" + x + " &y=" + y + " &text=" + text + " &color=" + color,
			success: function(newid) {
				$('#notewall').append('<div class="note" style="top: '+ y +'px; left: '+ x +'px; background-color:'+ color +';"><div class="ninjastar">Ninja\'d!</div><span id="'+ newid +'" class="text">'+ text +'</span><textarea class="inputtext">'+ text +'</textarea><div class="options"><ul class="colorlist"><li class="blue">a</li><li class="red">a</li><li class="yellow">a</li></ul><div class="x"><img src="images/delete.png" alt="" /></div></div></div>');
				$().refreshing();
			}
		});
	});

});

All we do here is create a new function called refreshing() which will hold all of the events we want to bind to the note. When the page first loads we’re going to evoke it on the entire page once, $().refreshing(), this adds all the events to the current notes we have. We also include that same code at the end of the success event for adding a note, which fixes our problem of new notes not being interactive. With that we are done and if you have written everything correctly you should have a fully functional Note Ninja application!

Conclusion

I hope that you’ve learned techniques that could be applied to your own applications and websites. If you want more practice try adding additional features to this application, like the ability to resize notes, cleanly stack and group notes or add expiration dates. There’s really no limit to what you can do and make this application become.

Your application is complete, now use and build off of it!