script.aculo.us InPlaceEditor highlightEndColor Option

Last Updated : 30 Nov, 2020

The script.aculo.us library 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 highlightEndColor option is used to specify the color that the highlight of the editable element fades to. The color must be specified in six hex digits. The default color string is ”#FFFFFF”.

Syntax:

{ highlightEndColor : color }

Parameters: This option has a single value as mentioned above and described below:

color: This is a string that specifies the color that the highlight of the editable element fades to. The default color string is ”#FFFFFF”.

The below example illustrates the use of this option.

Example:

The below script is required to simulate the saving of data to the server.

PHP

<?php 
  if( isset($_REQUEST["value"]) ) { 
    $str = $_REQUEST["value"]; 
    echo $str; 
  } 
?>

The below script demonstrates this with the example:

HTML

<html> 
<head> 
  <script type="text/javascript"
          src="prototype.js"> 
  </script> 
  <script type="text/javascript" 
          src="scriptaculous.js?load = controls"> 
  </script> 
  <script type="text/javascript"> 
    window.onload = function () { 
  
      // Default InplaceEditor with no 
      // options 
      new Ajax.InPlaceEditor( 
        'editableElement', 
        'http://localhost/tmpscripts/inplace.php', 
      ); 
  
      // InPlaceEditor with a custom color 
      // assigned 
      new Ajax.InPlaceEditor( 
        'editableElement2', 
        'http://localhost/tmpscripts/inplace.php', 
        { 
  
          // Specify the color to 
          // be used to fade the  
          // highlight of the element 
          highlightEndColor: "#FF0000" 
        } 
      ); 
  
      // InPlaceEditor with a custom color 
      // assigned 
      new Ajax.InPlaceEditor( 
        'editableElement3', 
        'http://localhost/tmpscripts/inplace.php', 
        { 
  
          // Specify the color to 
          // be used to fade the  
          // highlight of the element 
          highlightEndColor: "#00FFEC" 
        } 
      ); 
    } 
  </script> 
</head> 
<body> 
  <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
  <h2>InPlaceEditor highlightEndColor Option</h2> 
    
<p>The "highlightEndColor" option is used 
    to specify the color that the highlight 
    of the editable element fades to.</p> 
  
  <b>This element has the highlightEndColor 
    as the default one.</b> 
  <div id="editableElement">Hover over this 
    element to see the highlightColor.</div> 
  <br> 
  <b>This element has the highlightEndColor 
    set to a custom color.</b> 
  <div id="editableElement2">Hover over this 
    element to see the highlightColor.</div> 
  <br> 
  <b>This element has the highlightEndColor 
    set to a another custom color.</b> 
  <div id="editableElement3">Hover over this 
    element to see another highlightColor.</div> 
</body> 
</html>