Click here to Skip to main content
15,889,528 members
Articles / Web Development / ASP.NET

Floating annotation for web-based applications

Rate me:
Please Sign up or sign in to vote.
4.19/5 (6 votes)
4 Oct 2006CPOL4 min read 68.7K   148   31   27
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)


Written By
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralSecurity Check warning message Pin
ambatisreedhar2-Jun-09 22:00
ambatisreedhar2-Jun-09 22:00 
GeneralProblem during operates scrollbar Pin
Chetan Sarode29-Dec-06 18:01
Chetan Sarode29-Dec-06 18:01 
GeneralRe: Problem during operates scrollbar Pin
orinoco778-Jan-07 0:26
orinoco778-Jan-07 0:26 
GeneralRe: Problem during operates scrollbar Pin
Chetan Sarode8-Jan-07 2:56
Chetan Sarode8-Jan-07 2:56 
GeneralRe: Problem during operates scrollbar Pin
orinoco778-Jan-07 2:58
orinoco778-Jan-07 2:58 
GeneralHelp with changes.. Pin
jawstress23-Oct-06 3:16
jawstress23-Oct-06 3:16 
GeneralRe: Help with changes.. Pin
orinoco7723-Oct-06 4:20
orinoco7723-Oct-06 4:20 
GeneralRe: Help with changes.. Pin
jawstress23-Oct-06 5:35
jawstress23-Oct-06 5:35 
GeneralRe: Help with changes.. Pin
orinoco7723-Oct-06 22:13
orinoco7723-Oct-06 22:13 
GeneralRe: Help with changes.. Pin
orinoco7723-Oct-06 22:31
orinoco7723-Oct-06 22:31 
GeneralRe: Help with changes.. Pin
orinoco7723-Oct-06 22:49
orinoco7723-Oct-06 22:49 
GeneralRe: Help with changes.. Pin
jawstress23-Oct-06 23:42
jawstress23-Oct-06 23:42 
GeneralRe: Help with changes.. Pin
orinoco7723-Oct-06 23:53
orinoco7723-Oct-06 23:53 
GeneralUpcoming changes Pin
orinoco7718-Oct-06 0:07
orinoco7718-Oct-06 0:07 
GeneralAbout Floating annotation tool [modified] Pin
nannapanenikamalnath14-Oct-06 4:08
nannapanenikamalnath14-Oct-06 4:08 
GeneralRe: About Floating annotation tool Pin
orinoco7715-Oct-06 21:56
orinoco7715-Oct-06 21:56 
GeneralI love it! - but olso have some remarks Pin
Anders189-Oct-06 23:12
professionalAnders189-Oct-06 23:12 
GeneralRe: I love it! - but olso have some remarks Pin
orinoco779-Oct-06 23:26
orinoco779-Oct-06 23:26 
Thanks for your comments! Smile | :)

I think an important thing to bear in mind here is that this code was literally taken straight from an app I'm in the process of writing, so it has certain features that might not be immediately comprehensible.

There's no user registration because in the context of the app, the user who posted the note is irrelevant, by all means add user registration to it, it should be extremely simple.

Again, in the context of the app, cookies wouldn't do the job. The purpose of the notes in the app I'm writing is to allow superusers to annotate pages within the app, so that ordinary users can see the annotations. When ordinary users view the pages with notes, they don't get the opportunity to move them around, delete them or modify them in any way, as far as they're concerned the notes are a static part of the page, only the superuser can annotate pages.

As it stands it will only work with IE. This is something I hope to fix, as I've mentioned in another comment, but again, for the purposes of the app I'm writing, IE is the only supported target anyway. We don't deploy anything else across our intranet and while I try to write cross browser/cross platform code as a matter of course, sometimes in this environment it's better to cut and run with something that works in IE, because no one's ever going to run it in anything else anyway. The comment has been taken on board however, and I'll try to spend some time working out the cross browser issues.

I'm not sure about your last point. I've had no problem getting it to store notes over multiple paragraphs, but I think it will depend on how long the note is. Because the data is passed in the querystring there's a limit to the amount of text it will take. Admittedly I ought to have enforced this, but the limit is sufficiently large for most practical applications I wanted to put it to. Again, this is something that should possibly be looked at. If I can find a way of altering the code to use a different transfer method that would be great. I thought of building a POST request, complete with form data instead of a GET, but GET was much easier and fitted my requirements.

As ever, this code is really just an example of what can be done, feel free to use it as a template and write your own solution around it.
GeneralRe: I love it! - but olso have some remarks Pin
Anders189-Oct-06 23:54
professionalAnders189-Oct-06 23:54 
GeneralRe: I love it! - but olso have some remarks Pin
orinoco779-Oct-06 23:58
orinoco779-Oct-06 23:58 
GeneralRe: I love it! - but olso have some remarks Pin
orinoco7710-Oct-06 0:45
orinoco7710-Oct-06 0:45 
GeneralRe: I love it! - but olso have some remarks Pin
Anders1810-Oct-06 1:15
professionalAnders1810-Oct-06 1:15 
GeneralRe: I love it! - but olso have some remarks Pin
orinoco7710-Oct-06 5:22
orinoco7710-Oct-06 5:22 
QuestionIs it cross-browser? Does it use any ajax libraries? Pin
mikedepetris9-Oct-06 23:07
mikedepetris9-Oct-06 23:07 
AnswerRe: Is it cross-browser? Does it use any ajax libraries? Pin
orinoco779-Oct-06 23:15
orinoco779-Oct-06 23:15 

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

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