Click here to Skip to main content
Click here to Skip to main content

Floating annotation for web-based applications

, 4 Oct 2006
Rate this:
Please Sign up or sign in to vote.
DHTML notes that are moveable, resizeable, and persistent.

Sample Image - StickyNotes.gif

Introduction

This code has been stripped out of a much larger application I am currently writing, on the basis that I thought it might be helpful to others, and to show what can be achieved with just a little DHTML and AJAX (or SJAX in this instance; the code is actually synchronous although there's no particular requirement for that).

I was asked to provide the users of my application with the ability to add notes to certain pages. These notes had to be flexible, and ideally should be capable of being placed wherever the user wanted. In practice, it looked like DHTML would be the only real choice. The next problem was how to make the notes persistent. There's lots of code available on the web to show you how to implement moveable and resizeable DIVs; none of it addresses the fact that as soon as you close the browser window, all your creative positioning is lost. I also didn't want to interrupt the user by forcing them to refresh the page just to get the note saved to the database. The answer, as it turned out, was AJAX.

AJAX and persistence

The term has been bandied around enough already, and is all over CodeProject, so there's no point in talking about it here. Suffice it to say that AJAX allowed me to store the position and size of a note without requiring a round-trip to the server and a page refresh. This was important as there is no way any computer user is going to put up with that sort of behaviour when all he/she wants to do is resize or move an element in a window.

When the mouse-down event is fired anywhere in the page, the JavaScript checks to see which element the mouse pointer is in. If it's in one of our notes, and not in the resize hotspot at the bottom right, the note is marked as moveable, and any subsequent mouse-move event moves the note around the page. When the mouse-up event is fired, something a bit cleverer happens. The current position of the note is sent in an AJAX request to the server, and routines on the server save the position of the note in a database. Because the position of the note is only tracked on mouse-up, and not during mouse-move or on mouse-down, the drag action is kept nice and smooth.

The resize functionality is accomplished in the same way, except that the note is marked as resizeable when the mouse-down event occurs in the resize hotspot. On mouse-up, a request is sent to the server to record the new size.

Because the positional data is stored in a database and no longer solely held on the client, this data is now persistent, and the next time the page is loaded, all the notes will be in the right place.

Saving the note text

The text of the note is more problematic. There's simply no event we can fire to automatically store the text that doesn't radically affect the page's performance. At first, I sent the request on the key-up event, reasoning that every time a key was released, there was something new to send to the database. Unfortunately, this blocked input in a fairly disastrous way. I didn't want to do the request asynchronously, as I was afraid of swamping my server with what could be a very long string of requests.

I decided there was no real harm in creating a button to do the job, within the note itself. This meant I had a nice, simple on-click event to use. The button (or link in this case) is clicked, the request is fired, and the text gets written to the database. Nice and straightforward.

Housekeeping

At some point or other, somebody's going to come along and put something in a note that they want to retract. Let's face it, nobody's perfect. They have the opportunity to change the content of the note and save it again, but what if they didn't actually want a note in the first place? I added a delete button for this purpose. Its actual function is a little deceptive. To start with, it hides the note (with CSS, display: none). In order to complete the deletion, it then fires a request to the server, which removes the offending row from the database table. Next time the page is displayed, the note is no longer in the table, and it doesn't get displayed ever again.

The End

I hope I've described the process well enough. The code is fairly self-explanatory. It is arranged into a web user control (a button that creates notes), a web form (to hold the control), and a supplementary class file full of database routines. There is also a sql file which will create the required table and stored procedures. Edit the web.config file to your requirements (there are appConfig settings at the bottom, change them), create the database stuff, and run the project. It should just work.

This is my first submission to CodeProject; let me know if you like it, hate it, or whatever.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

orinoco77

United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
GeneralSecurity Check warning message Pinmemberambatisreedhar2-Jun-09 22:00 
Hi
 
I am Sreedhar Ambati.
I downloaded the application and it is working fine in the same machine where it is deployed.
I created a virtual directory also.
If I am accessing the url from the same machine it is working fine.
But if I am accessing the url from another machine and doing any operation like "Add Post It" ,"Move the post" I am getting this warning message.
 
"this page is accessing information that is not under its control. this poses a security risk. Do you
want to continue" message.
 
If I press "Ok" the operation is performing.If clicked on NO then nothing is happening.
 
I enabled the IE browser Tools->Internet Options-> Security tab -> Internet.. Custom Level .. I enabled "Access data sources across domains" under miscellaneous.
 
Still the problem is not solved.
 
Thanks
Sreedhar Ambati
http://ambatisreedharworks.wordpress.com
Please tell me how to solve this problem.
 
sreedhar ambati

GeneralProblem during operates scrollbar PinmemberChetan Sarode29-Dec-06 18:01 
GeneralRe: Problem during operates scrollbar Pinmemberorinoco778-Jan-07 0:26 
GeneralRe: Problem during operates scrollbar PinmemberChetan Sarode8-Jan-07 2:56 
GeneralRe: Problem during operates scrollbar Pinmemberorinoco778-Jan-07 2:58 
GeneralHelp with changes.. Pinmemberjawstress23-Oct-06 3:16 
GeneralRe: Help with changes.. Pinmemberorinoco7723-Oct-06 4:20 
GeneralRe: Help with changes.. Pinmemberjawstress23-Oct-06 5:35 
GeneralRe: Help with changes.. Pinmemberorinoco7723-Oct-06 22:13 
GeneralRe: Help with changes.. Pinmemberorinoco7723-Oct-06 22:31 
GeneralRe: Help with changes.. Pinmemberorinoco7723-Oct-06 22:49 
GeneralRe: Help with changes.. Pinmemberjawstress23-Oct-06 23:42 
GeneralRe: Help with changes.. Pinmemberorinoco7723-Oct-06 23:53 
GeneralUpcoming changes Pinmemberorinoco7718-Oct-06 0:07 
GeneralAbout Floating annotation tool [modified] Pinmembernannapanenikamalnath14-Oct-06 4:08 
GeneralRe: About Floating annotation tool Pinmemberorinoco7715-Oct-06 21:56 
GeneralI love it! - but olso have some remarks PinmemberAnders189-Oct-06 23:12 
GeneralRe: I love it! - but olso have some remarks Pinmemberorinoco779-Oct-06 23:26 
GeneralRe: I love it! - but olso have some remarks PinmemberAnders189-Oct-06 23:54 
GeneralRe: I love it! - but olso have some remarks Pinmemberorinoco779-Oct-06 23:58 
GeneralRe: I love it! - but olso have some remarks Pinmemberorinoco7710-Oct-06 0:45 
GeneralRe: I love it! - but olso have some remarks PinmemberAnders1810-Oct-06 1:15 
GeneralRe: I love it! - but olso have some remarks Pinmemberorinoco7710-Oct-06 5:22 
QuestionIs it cross-browser? Does it use any ajax libraries? Pinmembermikedepetris9-Oct-06 23:07 
AnswerRe: Is it cross-browser? Does it use any ajax libraries? Pinmemberorinoco779-Oct-06 23:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 5 Oct 2006
Article Copyright 2006 by orinoco77
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid