screen shot

Edit Regions

click on a yellow region

Still very beta. feel free to contact me with bugs, suggestions etc.

support:
edit regions was tested on firefox 2 and IE 6. Not sure if it will work in safari or konq.

UPDATE: Edit regions now tentatively works with Safari. Safari code was contributed by Brian.


Resize the edit interface using the gray square. Move the interface using the light gray area between the resize square and the save/cancel buttons. Editable regions have been colored yellow in this demo.

To install and use Edit Regions, download MouseState.js and EditRegions.js then reference them in your page using:

<script type="text/javascript" src="MouseState.js"></script>
<script type="text/javascript" src="EditRegions.js"></script>


In your markup, include the classname "editInPlace" for any div elements you would like to be made editable.
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros. .

Morbi vitae magna. Phasellus laoreet lorem ut lorem. Phasellus eu justo. Curabitur tristique.
Sed vel mauris. Phasellus sem libero, varius vel, pulvinar id, sollicitudin nec, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros.
Morbi vitae magna. Phasellus laoreet lorem ut lorem. Phasellus eu justo. Curabitur tristique.
Sed vel mauris. Phasellus sem libero, varius vel, pulvinar id, sollicitudin nec, sem.

Phasellus sem purus, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec gravida. Etiam dignissim. Quisque ultricies. In hac habitasse platea dictumst. Pellentesque nec ligula. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros. .
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros. .

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros. .

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros. .
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros. .

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros. .

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros. .

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultricies. In hac habitasse platea dictumst. Donec gravida. Etiam dignissim. Pellentesque nec ligula. Phasellus sem purus, convallis non, ornare ut, iaculis eu, eros. .