Inspired by this 24 Ways article (which in turn was inspired by Flickr-style editing), this script allows you to have elements which are highlighted when you hover over them and transform into a text field when you click on them.
- Make sure you are including jQuery in your tags.
- Place the script EditInPlace.1.0.0.js wherever you keep your javascript files
- Link it immediately before the
</body>tag using:
<script src="path/to/js/folder/EditInPlace.1.0.0.js"></script>
- Give any element (such as
<p>) you want to be editable a class of "editable" and make sure it has an ID
Note that the script does not save changes to a database, so it is reset when you refresh the page. To change this, open EditInPlace.1.0.0.js and edit the saveEdit() function to call the script or function you use to save data to the database (such as a PHP script).