Open In App

script.aculo.us InPlaceEditor highlightColor Option

Improve
Improve
Like Article
Like
Save
Share
Report

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 content on the page and submit the changes to the server.

The InPlaceEditor highlightColor option is used to specify the color to be used when the user hovers over an editable element. The color must be specified in six hex digits. The default color is a shade of yellow.

Syntax:

{ highlightColor : color }

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

  • color: This is a string that specifies the color to be used when the user hovers over an editable element. The default color is a shade of yellow.

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




<!DOCTYPE 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 highlight the 
                    // element
                    highlightColor: "#00FF00"
                }
            );
  
            // InPlaceEditor with a custom color
            // assigned
            new Ajax.InPlaceEditor(
                'editableElement3',
                'http://localhost/tmpscripts/inplace.php',
                {
  
                    // Specify the color to
                    // be used to highlight the 
                    // element
                    highlightColor: "#FF00FF"
                }
            );
        }
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
  
    <h2>InPlaceEditor highlightColor Option</h2>
      
      
    <p>
        The "highlightColor" option is used to
        specify the color to be used when the
        user hovers over the editable element.
    </p>
  
    <b>
        This element has the highlightColor
        as the default one.
    </b>
      
    <div id="editableElement">
        Hover over this element to 
        see the highlightColor.
    </div>
    <br>
      
    <b>
        This element has the highlightColor 
        set to a custom color.
    </b>
      
    <div id="editableElement2">
        Hover over this element to 
        see the highlightColor.
    </div>
    <br>
      
    <b>
        This element has the highlightColor 
        set to a another custom color.
    </b>
    <div id="editableElement3">
        Hover over this element to see 
        another highlightColor.
    </div>
</body>
  
</html>


Output:



Last Updated : 26 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads