The script.aculo.us is a cross-browser library that aims at improving the user interface of a website. The Ajax.InPlaceEditor is used to make elements editable thereby allowing the user to edit the content on the page and submit the changes to the server.
The InPlaceEditor size option is used to define the width of the editable field.
Syntax:
{ size: value }
Parameters: This option has a single value as mentioned above and described below.
- value: This is a number which defines the width of the editable field.
Example:
To demonstrate the use of this function, refer to the following code. The JavaScript part of the code will create an in-place editor for specific elements. By clicking on Click me for size 10, you will see the in-place editor along with the set size.
HTML
<!DOCTYPE html> <html> <head> <!-- Include the required scripts --> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js?load = effects,controls"> </script> </head> <body> <p id="editme1">Click me for size 10</p> <p id="editme2">Click me for size 50</p> <p id="editme3">Click me for size 100</p> <!-- JavaScript part to initialize the objects --> <script type="text/javascript"> new Ajax.InPlaceEditor('editme1', 'test.html', { size: 10 }); new Ajax.InPlaceEditor('editme2', 'test.html', { size: 50 }); new Ajax.InPlaceEditor('editme3', 'test.html', { size: 50 }); </script> </body> </html> |
Output:
- Before Clicking the Button:
- After Clicking the Button:
test.html The following code is the content for the file “test.html” used in the above HTML code.
<!DOCTYPE html> <html> <body> neveropen </body> </html> |
