Vinod Kumar

Yada Yada Yada

flickr-like Editing Fields Using AJAX & CSS

		By Vinod Kumar Vasudevan in Web Development Published: Saturday, 05 January 08 - 07:48 PM (GMT +08:00) Last Updated: Saturday, 05 January 08 - 08:48 PM (GMT +08:00)

If you want to create flickr like edits in your webpage using AJAX and CSS then here's a nice solution for you to do that.

Here's how the edits happen on flickr.

• Show user the data field normally (for instance: the title of a picture)
• When mouse rolls over that title, make the background of the word yellow
• If the user clicks on the word, change that word to a input box with the word in it. Also show a “save” and “cancel” button
• A user can rename the picture and then push “save.”
• Run a little script that updates the name into the database
• Remove the input box and the buttons and return to the original title display (updated with new title).

You can go ahead and try the sample below which is actually hosted on the site "Dustin Bachrach a developer blog". I am just using an IFrame to show the demo right here.

If you liked it and want to get this solution on to your website then go ahead and follow the link below.

http://dbachrach.com/blog/2007/01/07/create-flickr-like-editing-fields-using-ajax-css/

Have your say on this article:

Name:

Email address:

Comment title:

Your comment:

Your homepage:

  I want to be notified by email of all further comments posted in this topic.