Text foreground and background color picker : Color Chooser « GUI Components « JavaScript DHTML






Text foreground and background color picker

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>Ddraig</title>
  <style type="text/css" >
body {
  font-family: "Gill Sans MT", sans-serif;
}
table {
  border-collapse: collapse;
}
td, th {
  border: 2px ridge;
  padding: 5px;
}
code {
  font-family: monospace;
  font-weight: 700;
}
  </style>
  <script type="text/javascript">
   /**
  * Ddraig - a JavaScript API library
  * ---------------------------------
  *
  * Ddraig is a cross-browser JavaScript API library with the intention of
  * providing common functions to perform the same tasks in different web
  * browsers--thereby removing (to an extent) the problems of inconsistent
  * standards support in different browsers.
  *
  * Copyright (c) 2003 Chris Throup (chris [at] throup [dot] org [dot] uk)
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
  * the Free Software Foundation; either version 2 of the License, or
  * (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
  */

// Declare and define global variables
var ddraig_browserIsGecko = ddraig_browserIsOpera = ddraig_browserIsNN = ddraig_browserIsIE = false;
  // Currently only identifies Gecko derivatives (Mozilla, Netscape 6+, Galleon, etc.), Opera,
  // Netscape (pre v6) and Internet Explorer.  All unidentified browsers are considered to be 100%
  // standards compatible.
var ddraig_browserVersion = -1;
  // The browser version is stored in this variable.
  // If the browser is undetected, this will have a value of -1.
var ddraig_browserName = 'unknown';

ddraig_detectBrowser()
  // Does exactly what it says on the tin!

function ddraig_detectBrowser() {
  if (navigator.userAgent.indexOf('Opera') != -1) {  // Must detect Opera first because it will spoof anything!
    ddraig_browserIsOpera = true;
    ddraig_browserName = 'Opera';
    var ddraig_dummy1 = navigator.userAgent.indexOf('(', navigator.userAgent.indexOf('Opera'));
    var ddraig_dummy2 = navigator.userAgent.indexOf('[', navigator.userAgent.indexOf('Opera'));
    if (ddraig_dummy1 != -1) {
      ddraig_browserVersion = parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Opera') + 6, ddraig_dummy1))
    } else {
      ddraig_browserVersion = parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Opera') + 6, ddraig_dummy2))
    }
  }
  
  else
  
  if (navigator.product == 'Gecko') {  // Must detect Gecko before old Netscape versions.
    ddraig_browserIsGecko = true;
    ddraig_browserName = 'based on Gecko';
    var ddraig_dummy1 = navigator.userAgent.indexOf(';', navigator.userAgent.indexOf('rv:'));
    var ddraig_dummy2 = navigator.userAgent.indexOf('\)', navigator.userAgent.indexOf('rv:'));
    if (ddraig_dummy1 != -1) {
      ddraig_browserVersion = navigator.userAgent.substring(navigator.userAgent.indexOf('rv:') + 3, ddraig_dummy1)
    } else {
      ddraig_browserVersion = navigator.userAgent.substring(navigator.userAgent.indexOf('rv:') + 3, ddraig_dummy2)
    }
      // This returns the release version of the Gecko component, NOT the version of the browser being used.
      // For example, Netscape 7.1 will report version "1.4".
      // This is a much more accurate reflection of the standards available for use.
      // Note also that this returns a string rather than a numerical value as most rvs are of the form "x.y.z".
  }
  
  else
  
  if (navigator.appName == 'Netscape') {  // This will probably catch any browsers spoofing Netscape too,
                                        // but they will hopefully follow Netscape's *standards* (yeah!).
    ddraig_browserIsNN = true;
    ddraig_browserName = 'Netscape Navigator';
    ddraig_browserVersion = parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Mozilla') + 8, navigator.userAgent.indexOf('[', navigator.userAgent.indexOf('Mozilla'))))
  }
  
  else
  
  if (navigator.appName == 'Microsoft Internet Explorer') {  // This will probably catch any browsers spoofing IE too,
                                                           // but they will hopefully follow IE's *standards*.
    ddraig_browserIsIE = true;
    ddraig_browserName = 'Microsoft Internet Explorer';
    ddraig_browserVersion = parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('MSIE') + 5, navigator.userAgent.indexOf(';', navigator.userAgent.indexOf('MSIE'))))
  }  
}

function ddraig_objectGet(ddraig_objectToGet) {
  var ddraig_objectToReturn;
  if (typeof ddraig_objectToGet == 'string') {
    if (document.getElementById) {
      ddraig_objectToReturn = document.getElementById(ddraig_objectToGet);
    } else if (ddraig_browserIsNN) {
      ddraig_objectToReturn = eval('document.' + ddraig_objectToGet);
    }
  } else {
    ddraig_objectToReturn = ddraigObjectToGet;
  }
  return ddraig_objectToReturn;
}

function ddraig_styleSetBackgroundColour(ddraig_objectID, ddraig_colour) {
  var ddraig_objectToChange = ddraig_objectGet(ddraig_objectID);
  if (ddraig_browserIsNN) {
    if (ddraig_objectToChange) {
      ddraig_objectToChange.bgcolor = ddraig_colour;
      return true;
    } else {
      return false;
    }
  } else {
    ddraig_objectToChange.style.backgroundColor = ddraig_colour;
    return true;
  }
}

function ddraig_styleSetBackgroundColor(ddraig_objectToChange, ddraig_color) {
  return ddraig_styleSetBackgroundColour(ddraig_objectToChange, ddraig_color);
}
function ddraig_styleSetColour(ddraig_objectID, ddraig_colour) {
  var ddraig_objectToChange = ddraig_objectGet(ddraig_objectID);
  if (ddraig_browserIsNN) {
    if (ddraig_objectToChange) {
      ddraig_objectToChange.color = ddraig_colour;
      return true;
    } else {
      return false;
    }
  } else {
    ddraig_objectToChange.style.color = ddraig_colour;
    return true;
  }
}

function ddraig_styleSetColor(ddraig_objectToChange, ddraig_color) {
  return ddraig_styleSetColour(ddraig_objectToChange, ddraig_color);
}
  
  </script>
</head>

<body>
  <h1 name="heading" id="heading">Ddraig</h1>
  <div>
    <table>
      <tr>
        <td>
          <code>
            ddraig_browserName
          </code>
        </td>
        <td>
          <script type="text/javascript">
          <!--
            document.write(
          ddraig_browserName
            );
          //-->
          </script>
          <noscript>
            JavaScript not supported.
          </noscript>
        </td>
      </tr>
      <tr>
        <td>
          <code>
            ddraig_browserVersion
          </code>
        </td>
        <td>
          <script type="text/javascript">
          <!--
            document.write(
          ddraig_browserVersion
            );
          //-->
          </script>
          <noscript>
            JavaScript not supported.
          </noscript>
        </td>
      </tr>
      <tr>
        <td>
          <code>
            ddraig_browserIsOpera
          </code>
        </td>
        <td>
          <script type="text/javascript">
          <!--
            document.write(
          ddraig_browserIsOpera
            );
          //-->
          </script>
          <noscript>
            JavaScript not supported.
          </noscript>
        </td>
      </tr>
      <tr>
        <td>
          <code>
            ddraig_browserIsGecko
          </code>
        </td>
        <td>
          <script type="text/javascript">
          <!--
            document.write(
          ddraig_browserIsGecko
            );
          //-->
          </script>
          <noscript>
            JavaScript not supported.
          </noscript>
        </td>
      </tr>
      <tr>
        <td>
          <code>
            ddraig_browserIsNN
          </code>
        </td>
        <td>
          <script type="text/javascript">
          <!--
            document.write(
          ddraig_browserIsNN
            );
          //-->
          </script>
          <noscript>
            JavaScript not supported.
          </noscript>
        </td>
      </tr>
      <tr>
        <td>
          <code>
            ddraig_browserIsIE
          </code>
        </td>
        <td>
          <script type="text/javascript">
          <!--
            document.write(
          ddraig_browserIsIE
            );
          //-->
          </script>
          <noscript>
            JavaScript not supported.
          </noscript>
        </td>
      </tr>
    </table>
  </div>
  <hr />
  <script type="text/javascript">
  <!--
    if (ddraig_browserIsNN) {
      document.write('\<style type\=\"text\/css\"\>\#colourTest \{background-color: #ff7f7f; border: #ff7f7f ridge 2px; padding: 5px;\}\<\/style\>');
      alert('hahahahahahaha');
      document.write('\<p style=\"font-style: italic;\"\>Unfortunately, the following functions do not work in Netscape pre version 6.  However, when they are called they will return a boolean value \'false\' in these browsers.\<\/p\>');
    }
  // -->
  </script>
  <noscript>
    <p>
      Unfortunately, the following functions will not work without JavaScript.  In fact, neither will any of the
      Ddraig library...
    </p>
  </noscript>
  <div id="colourTest" name="colourTest">
    <p>
      Use the following buttons to change the background colour of the heading at the top of this page.
      This makes use of the function <code>ddraig_styleSetBackgroundColour()</code>.
    </p>
    <form>
      <input type="button" value="white" onclick="ddraig_styleSetBackgroundColour('heading', '#ffffff');" />
      <input type="button" value="red" onclick="ddraig_styleSetBackgroundColour('heading', '#ff0000');" />
      <input type="button" value="orange" onclick="ddraig_styleSetBackgroundColour('heading', '#ff7f00');" />
      <input type="button" value="yellow" onclick="ddraig_styleSetBackgroundColour('heading', '#ffff00');" />
      <input type="button" value="green" onclick="ddraig_styleSetBackgroundColour('heading', '#00ff00');" />
      <input type="button" value="blue" onclick="ddraig_styleSetBackgroundColour('heading', '#0000ff');" />
      <input type="button" value="indigo" onclick="ddraig_styleSetBackgroundColour('heading', '#7f00ff');" />
      <input type="button" value="violet" onclick="ddraig_styleSetBackgroundColour('heading', '#ff00ff');" />
      <input type="button" value="black" onclick="ddraig_styleSetBackgroundColour('heading', '#000000');" />
    </form>
    <p>
      Use the following buttons to change the colour of the text in the heading at the top of this page.
      This makes use of the function <code>ddraig_styleSetColour()</code>.
    </p>
    <form>
      <input type="button" value="white" onclick="ddraig_styleSetColour('heading', '#ffffff');" />
      <input type="button" value="red" onclick="ddraig_styleSetColour('heading', '#ff0000');" />
      <input type="button" value="orange" onclick="ddraig_styleSetColour('heading', '#ff7f00');" />
      <input type="button" value="yellow" onclick="ddraig_styleSetColour('heading', '#ffff00');" />
      <input type="button" value="green" onclick="ddraig_styleSetColour('heading', '#00ff00');" />
      <input type="button" value="blue" onclick="ddraig_styleSetColour('heading', '#0000ff');" />
      <input type="button" value="indigo" onclick="ddraig_styleSetColour('heading', '#7f00ff');" />
      <input type="button" value="violet" onclick="ddraig_styleSetColour('heading', '#ff00ff');" />
      <input type="button" value="black" onclick="ddraig_styleSetColour('heading', '#000000');" />
    </form>
    <p>
      Or you can use both functions together to set both colours simultaneously.
    </p>
    <form>
      <input type="button" value="white/black" onclick="ddraig_styleSetBackgroundColour('heading', '#ffffff');ddraig_styleSetColour('heading', '#000000');" />
      <input type="button" value="red/cyan" onclick="ddraig_styleSetBackgroundColour('heading', '#ff0000');ddraig_styleSetColour('heading', '#00ffff');" />
      <input type="button" value="orange/cobalt" onclick="ddraig_styleSetBackgroundColour('heading', '#ff7f00');ddraig_styleSetColour('heading', '#007fff');" />
      <input type="button" value="yellow/blue" onclick="ddraig_styleSetBackgroundColour('heading', '#ffff00');ddraig_styleSetColour('heading', '#0000ff');" />
      <input type="button" value="green/violet" onclick="ddraig_styleSetBackgroundColour('heading', '#00ff00');ddraig_styleSetColour('heading', '#ff00ff');" />
      <input type="button" value="blue/yellow" onclick="ddraig_styleSetBackgroundColour('heading', '#0000ff');ddraig_styleSetColour('heading', '#ffff00');" />
      <input type="button" value="indigo/emerald" onclick="ddraig_styleSetBackgroundColour('heading', '#7f00ff');ddraig_styleSetColour('heading', '#7fff00');" />
      <input type="button" value="violet/green" onclick="ddraig_styleSetBackgroundColour('heading', '#ff00ff');ddraig_styleSetColour('heading', '#00ff00');" />
      <input type="button" value="black/white" onclick="ddraig_styleSetBackgroundColour('heading', '#000000');ddraig_styleSetColour('heading', '#ffffff');" />
    </form>
  </div>
</body>

</html>


           
         
  








Related examples in the same category

1.JavaScript ColorPicker
2.Color Picker (Windows style)
3.Color picker (IE only)
4.Color chooser in JavaScript
5.DHTML Color Picker
6.Farbtastic: jQuery color picker plug-in