If you are not familiar with how flickr handles editing data, here’s a short summary.
- 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).

It shows how to write a little code to emulate flickr edit style effect almost perfectly.
The script is not using any third party libraries. There is a lot of html code involved, i don’t recommend it
if you intend to use a ‘plugin’ like edit in place script. On top of that, php and html is mixed together meaning more difficult to customize the script.
code_editor

Demo: http://www.ajaxdaddy.com/flickr-like-edit-in-place.html

Download: http://dbachrach.com/blog/wp-content/uploads/2007/01/showFlickrEdit.php

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

Related Listings:

1. Flickr Like Edit in Place How to edit in place using AJAX? If you are...
2. Ajax Inline Quick Edit in Place Ajax Inline Edit in Place Script is a fast forward...
3. Inline Edit Plugin – Moo Script An even newer version of inlineEdit is out! Check out...
4. Dynamic flickr Badge Script A work colleague who runs Tobago Retreats asked me to...
5. Ajax Instant Inline Text Edit Ajax Instant Edit Text User can edit the inline text...

Do you like this post?

Email: