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)) } } elseif (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". } elseif (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')))) } elseif (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); } elseif (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
