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
