JavaScript DHTML/GUI Components/Color Chooser
Содержание
Color chooser in JavaScript
<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<body>
<CENTER><h1>Color chooser</h1>
<FORM name=colc>
<table border="1">
<td colspan=2>
<SCRIPT LANGUAGE="JavaScript">
function color() {
document.bgColor=(""+ colc.cc.value +"");
document.body.text=(""+ colc.tc.value +"");
}
</SCRIPT>
<B><center>Please Choose a Color</td><tr><td>
<b>Background:</td><td><select name="cc" size="1">
<option value="black">Black
<option value="blue">Blue
<option value="green">Green
<option value="skyblue">Light Blue
<option value="orange">Orange
<option value="purple">Purple
<option value="red">Red
<option value="silver">Silver
<option value="Yellow">Yellow
<option selected value="white">White
</select></td><tr><td>
<b>Text:</td><td>
<select name="tc" size="1">
<option selected value="black">Black
<option value="blue">Blue
<option value="green">Green
<option value="skyblue">Light Blue
<option value="orange">Orange
<option value="purple">Purple
<option value="red">Red
<option value="silver">Silver
<option value="Yellow">Yellow
<option value="white">White
</select>
</td><tr><td colspan=2>
<center><input type="button" name="button" value="Change Color!" onClick="color()">
</td>
</table>
</FORM>
</CENTER>
<p><center><h5>
By Greg Marut<br>
</h5>
</body>
</HTML>
Color picker (IE only)
<!--
##############################################
# WebFX Dynamic Webboard 2.0 #
# By Emil A Eklund (eae@eae.net) #
# and Erik Arvidson (erik@eae.net) #
# http://webfx.eae.net #
# April 13, 1999 #
##############################################
# Feel free to use this script for personal #
# and non profit web sites, as long as you #
# are giving us credits for it, in other #
# words, not removing nor modifying this #
# notice in any of the files it appears in #
##############################################
# For commercial use contact Emil or Erik #
##############################################
-->
<html>
<head>
<style>
<!--
body {background : buttonface; margin: 5; margin-top: 2;
border-top: 1 solid buttonhighlight;
border-left: 1 solid buttonhighlight;
border-right: 1 solid buttonshadow;
border-bottom: 1 solid buttonshadow;}
td {width : 10px; height : 10px; font-size : 1px; cursor: hand;}
-->
</style>
<script type="text/javascript">
<!--
var ie5 = document.getElementById != null;
function doOver() {
var el = window.event.srcElement;
bgc = el.style.backgroundColor;
if (bgc != "") {
el.style.borderTopColor = "white";
el.style.borderLeftColor = "white";
el.style.borderRightColor = "black";
el.style.borderBottomColor = "black";
colorBox.style.backgroundColor = bgc;
colorName.innerHTML = bgc;
}
}
function doClick() {
bgc = window.event.srcElement.style.backgroundColor;
window.event.srcElement.style.borderColor = bgc;
if (bgc != "") {
window.external.raiseEvent("colorchange", bgc);
}
}
function doOut() {
var el = window.event.fromElement;
bgc = el.style.backgroundColor;
if (bgc != "") {
el.style.borderColor = bgc;
}
}
window.onload = init;
function init() {
fixTitle();
}
function fixTitle() {
document.title = parent.document.title;
}
var colors = new Array("white", "snow", "floralwhite", "ghostwhite", "whitesmoke",
"ivory", "oldlace", "linen", "seashell", "antiquewhite","papayawhip","peachpuff",
"beige","bisque","blanchedalmond","cornsilk","lemonchiffon","lightyellow",
"lightgoldenrodyellow","palegoldenrod",
"wheat","moccasin","navajowhite","khaki","burlywood","tan","darkkhaki",
"gold","yellow","goldenrod","darkgoldenrod","peru","saddlebrown","sienna","chocolate","brown",
"mintcream", "aliceblue","azure","lightcyan","lightblue","powderblue",
"lightskyblue","skyblue","deepskyblue",
"cyan","aqua","aquamarine","paleturquoise","turquoise","darkturquoise","mediumturquoise",
"darkcyan","royalblue","cornflowerblue","dodgerblue","blue","mediumblue","darkblue","midnightblue","navy",
"darkslateblue","lightsteelblue","steelblue","cadetblue","slateblue","mediumslateblue",
"indigo","purple","darkmagenta","darkorchid","mediumorchid","blueviolet","mediumpurple","darkviolet","magenta",
"fuchsia","plum","thistle","violet","orchid","deeppink","hotpink",
"mediumvioletred","palevioletred",
"lavender","lavenderblush","mistyrose","pink","lightpink","salmon","lightsalmon",
"coral","darksalmon","sandybrown","orange","orangered","tomato",
"darkorange","crimson","red","firebrick","maroon","darkred","indianred","rosybrown","lightcoral",
"honeydew","springgreen","mediumspringgreen",
"palegreen","chartreuse","lawngreen","greenyellow",
"lime","lightgreen","limegreen",
"mediumaquamarine","lightseagreen","teal","mediumseagreen","seagreen","darkseagreen",
"yellowgreen","olive","olivedrab",
"forestgreen","green","darkgreen", "darkolivegreen",
"lightslategray","slategray","darkslategray",
"gainsboro","lightgrey","silver","darkgray","gray","dimgray","black");
var sysColors = new Array("activeborder","activecaption","appworkspace","background","buttonface",
"buttonhighlight","buttonshadow","buttontext","captiontext","graytext","highlight","highlighttext",
"inactiveborder","inactivecaption","inactivecaptiontext","infobackground","infotext","menu","menutext",
"scrollbar","threeddarkshadow","threedface","threedhighlight","threedlightshadow","threedshadow","window",
"windowframe","windowtext");
function writeRow(ar) {
var cells = 15;
var str = "";
for (var i=0; i<ar.length; ) {
str += "<tr>"
for (var j=0; j<=cells && i<ar.length; j++) {
str += "<td style="background-color: " + ar[i] + "; border: 1px outset " + ar[i] + ";">";
str += " </td>\n";
i++;
}
str += "</tr>\n";
}
return str;
}
//-->
</script>
</head>
<body>
<table cellspacing="0"
cellpadding="0"
onmouseover="doOver()"
onmouseout="doOut()"
onclick="doClick()"
style="width: 180;">
<tr>
<td colspan="15"
style="font-family: verdana, helvetica; font-size: 9px; color: button-text; cursor: default; height: 15px;">
<nobr>Named Colors:</nobr>
</td>
</tr>
<script>
document.write(writeRow(colors));
</script>
</table>
<table cellspacing="0"
cellpadding="0"
onmouseover="doOver()"
onmouseout="doOut()"
onclick="doClick()"
style="width: 180;">
<hr>
<script>
document.write(writeRow(sysColors));
</script>
</table>
<hr>
<table>
<tr>
<td id="colorBox" style="border: 1px inset window; width: 20; height: 20; font-size: 2px; cursor: default;"> </td>
<td id="colorName" style="border: 0; font-family: verdana, helvetica; font-size: 9px; color: button-text; cursor: default;">ColorName</td>
</tr>
</table></body></html>
Color Picker (Windows style)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Select Color</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript" type="text/javascript">
//-------------------------------------------------------
function _GetElByID_ ( _ID_ )
{
return document.getElementById ? document.getElementById ( _ID_ ) : document.all [ _ID_ ];
}
//-------------------------------------------------------
function _RGB2Hex_ ( _RGBColor_ )
{
var _r_, _g_, _b_;
var _i_, _j_, _len_;
var _HexColor_;
_RGBColor_ = _RGBColor_.toLowerCase ( );
if ( _RGBColor_.substring ( 0, 3 ) != "rgb" )
return "";
_i_ = _RGBColor_.indexOf ( "(" );
if ( _i_ == -1 )
return "";
_j_ = _RGBColor_.indexOf ( ",", _i_ + 1 );
if ( _j_ == -1 )
return "";
_r_ = parseInt ( _RGBColor_.substring ( _i_ + 1, _j_ ) );
_i_ = _j_;
_j_ = _RGBColor_.indexOf ( ",", _j_ + 1 );
if ( _j_ == -1 )
return "";
_g_ = parseInt ( _RGBColor_.substring ( _i_ + 1, _j_ ) );
_i_ = _j_;
_j_ = _RGBColor_.indexOf ( ")", _j_ + 1 );
if ( _j_ == -1 )
return "";
_b_ = parseInt ( _RGBColor_.substring ( _i_ + 1, _j_ ) );
_rs_ = _r_.toString ( 16 );
_rs_ = _r_ < 10 ? "0" + _rs_ : _rs_;
_gs_ = _g_.toString ( 16 );
_gs_ = _g_ < 10 ? "0" + _gs_ : _gs_;
_bs_ = _b_.toString ( 16 );
_bs_ = _b_ < 10 ? "0" + _bs_ : _bs_;
_HexColor_ = "#" + _rs_ + _gs_ + _bs_;
return _HexColor_.toUpperCase ( );
}
//---------------------------------------------
function SetPalette ( palette )
{
var tbl = document.getElementById ( "colortbl" );
var color, sR, sG, sB;
var r, g, b;
var i, j;
var bNoMore;
bNoMore = false;
switch ( palette )
{
case 0:
r = 0xFF; g = 0xFF; b = 0xFF;
for ( i = 0; i < tbl.rows.length; i++ )
{
for ( j = 0; j < tbl.rows [i].cells.length; j++ )
{
if ( !bNoMore )
{
sR = r.toString ( 16 );
if ( sR.length == 1 )
sR = "0" + sR;
sG = g.toString ( 16 );
if ( sG.length == 1 )
sG = "0" + sG;
sB = b.toString ( 16 );
if ( sB.length == 1 )
sB = "0" + sB;
color = "#" + sR + sG + sB;
tbl.rows [i].cells [j].__c = true;
}
tbl.rows [i].cells [j].style.backgroundColor = color;
if ( bNoMore )
continue;
if ( b > 0 )
b -= 0x33;
else
{
if ( g > 0 )
g -= 0x33;
else
{
if ( r > 0 )
r -= 0x33;
else
{
color = "";
bNoMore = true;
continue;
}
g = 0xFF;
}
b = 0xFF;
}
}
}
break;
case 1:
r = 0xFF;
for ( i = 0; i < tbl.rows.length; i++ )
{
for ( j = 0; j < tbl.rows [i].cells.length; j++ )
{
g = b = Math.round ( ( r / 15 ) * ( 15 - j ) );
sR = r.toString ( 16 );
if ( sR.length == 1 )
sR = "0" + sR;
sG = g.toString ( 16 );
if ( sG.length == 1 )
sG = "0" + sG;
sB = b.toString ( 16 );
if ( sB.length == 1 )
sB = "0" + sB;
color = "#" + sR + sG + sB;
tbl.rows [i].cells [j].__c = true;
tbl.rows [i].cells [j].style.backgroundColor = color;
}
r -= 16;
}
break;
case 2:
g = 0xFF;
for ( i = 0; i < tbl.rows.length; i++ )
{
for ( j = 0; j < tbl.rows [i].cells.length; j++ )
{
r = b = Math.round ( ( g / 15 ) * ( 15 - j ) );
sR = r.toString ( 16 );
if ( sR.length == 1 )
sR = "0" + sR;
sG = g.toString ( 16 );
if ( sG.length == 1 )
sG = "0" + sG;
sB = b.toString ( 16 );
if ( sB.length == 1 )
sB = "0" + sB;
color = "#" + sR + sG + sB;
tbl.rows [i].cells [j].__c = true;
tbl.rows [i].cells [j].style.backgroundColor = color;
}
g -= 16;
}
break;
case 3:
b = 0xFF;
for ( i = 0; i < tbl.rows.length; i++ )
{
for ( j = 0; j < tbl.rows [i].cells.length; j++ )
{
r = g = Math.round ( ( b / 15 ) * ( 15 - j ) );
sR = r.toString ( 16 );
if ( sR.length == 1 )
sR = "0" + sR;
sG = g.toString ( 16 );
if ( sG.length == 1 )
sG = "0" + sG;
sB = b.toString ( 16 );
if ( sB.length == 1 )
sB = "0" + sB;
color = "#" + sR + sG + sB;
tbl.rows [i].cells [j].__c = true;
tbl.rows [i].cells [j].style.backgroundColor = color;
}
b -= 16;
}
}
}
//-------------------------------------------------------
function FindCookie ( sCookieName )
{
var iNameLen = sCookieName.length;
var sCookieData = document.cookie;
var iCLen = sCookieData.length;
var i, j;
var CEnd;
i = 0;
while ( i < iCLen )
{
j = i + iNameLen;
if ( sCookieData.substring ( i, j ) == sCookieName )
{
iCEnd = sCookieData.indexOf ( ";", j );
if ( iCEnd == -1 )
iCEnd = sCookieData.length;
return unescape ( sCookieData.substring ( j + 1, iCEnd ) );
}
i++;
}
return null;
}
//-------------------------------------------------------
function DownColor ( _evt_ )
{
_evt_ = _evt_ ? _evt_ : window.event;
if ( !_evt_ )
return;
_target_el_ = _evt_.target ? _evt_.target : _evt_.srcElement;
if ( _target_el_.__c )
{
_color_ = _target_el_.style.backgroundColor.toUpperCase ( );
if ( _color_.charAt ( 0 ) == "R" )
_color_ = _RGB2Hex_ ( _color_ );
SetColor ( _color_ );
}
}
//-------------------------------------------------------
function SetColor ( color )
{
document.getElementById ( "new_col" ).style.backgroundColor = color;
document.forms [0].r_col.value = parseInt ( color.substring ( 1, 3 ), 16 );
document.forms [0].g_col.value = parseInt ( color.substring ( 3, 5 ), 16 );
document.forms [0].b_col.value = parseInt ( color.substring ( 5, 7 ), 16 );
document.forms [0].html_col.value = color;
var tbl = document.getElementById ( "recentcolortbl" );
var color;
for ( i = 0; i < tbl.rows [0].cells.length; i++ )
if ( tbl.rows [0].cells [i].style.backgroundColor == "" ||
tbl.rows [0].cells [i].style.backgroundColor == "transparent" )
{
tbl.rows [0].cells [i].style.backgroundColor = color;
tbl.rows [0].cells [i].__c = true;
return;
}
for ( i = 0; i < tbl.rows [0].cells.length - 1; i++ )
tbl.rows [0].cells [i].style.backgroundColor = tbl.rows [0].cells [i + 1].style.backgroundColor;
tbl.rows [0].cells [7].style.backgroundColor = color;
tbl.rows [0].cells [7].cells [i].__c = true;
}
//-------------------------------------------------------
function LoadRecentColors ( )
{
var tbl = document.getElementById ( "recentcolortbl" );
var color;
for ( i = 0; i < tbl.rows [0].cells.length; i++ )
{
if ( color = FindCookie ( "__CPRC" + i ) )
tbl.rows [0].cells [i].__c = true;
else
color = "";
tbl.rows [0].cells [i].style.backgroundColor = color;
}
}
//-------------------------------------------------------
function PlaceCookie ( name, value )
{
var exp = new Date ( );
var iExpT = exp.getTime ( ) + 31536000000;
exp.setTime ( iExpT );
document.cookie = name + "=" + value + "; expires=" + exp.toGMTString();
}
//-------------------------------------------------------
function SaveRecentColors ( )
{
var tbl = document.getElementById ( "recentcolortbl" );
var color;
for ( i = 0; i < tbl.rows [0].cells.length; i++ )
{
color = tbl.rows [0].cells [i].currentStyle.backgroundColor;
if ( color == "" )
break;
PlaceCookie ( "__CPRC" + i, color )
}
}
//-------------------------------------------------------
function SetColorOnExit ( )
{
opener.c_colorpick_callback ( _GetElByID_ ( "new_col" ).style.backgroundColor );
}
//-------------------------------------------------------
document.write ( "<FORM style="font-family: MS Sans Serif, sans-serif; font-size: 10pt">" );
document.write ( "<TABLE border="0"><TR style="vertical-align: top"><TD>" );
document.write ( "<SELECT name="palette" onChange="javascript: SetPalette ( this.selectedIndex );" style="font-family: MS Sans Serif, sans-serif; font-size: 10pt"><OPTION selected>Browser Safe Palette</OPTION><OPTION>Red Shades</OPTION><OPTION>Green Shades</OPTION><OPTION>Blue Shades</OPTION></SELECT><BR><BR>" );
document.write ( "<TABLE id="colortbl" style="border-width: 2; border-style: inset">" );
for ( i = 0; i < 16; i++ )
{
document.write ( "<TR style="height: 10">" );
for ( j = 0; j < 16; j++ )
document.write ( "<TD style="width: 8">" );
}
document.write ( "</TABLE>" );
document.write ( "<TD style="padding-left: 10">" );
document.write ( "<TABLE border ="0">" );
document.write ( "<TR style="font-family: MS Sans Serif, sans-serif; font-size: 10pt; vertical-align: top"><TD><BR style="line-height: 20px">Original:<BR><BR style="line-height: 20px">New:<BR><BR style="line-height: 32px">Red:<BR><BR style="line-height: 24px">Green:<BR><BR style="line-height: 24px">Blue:<BR><BR style="line-height: 24px">HTML:" );
document.write ( "<TD><DIV style="border-width: 2; border-style: inset"><DIV id="orig_col" style="width: 59; height: 40; cursor: default"></DIV><DIV id="new_col" style="width: 59; height: 40"></DIV></DIV><BR><INPUT name="r_col" type="text" style="width: 40"><BR><BR><INPUT name="g_col" type="text" style="width: 40"><BR><BR><INPUT name="b_col" type="text" style="width: 40"><BR><BR><INPUT name="html_col" type="text" style="width: 60">" );
document.write ( "</TABLE>" );
document.write ( "</TABLE>" );
document.write ( "Recent Colors:<BR><BR style="line-height: 4px">" );
document.write ( "<TABLE id="recentcolortbl" style="border-width: 2; border-style: inset"><TR style="height: 25">" );
for ( i = 0; i < 8; i++ )
document.write ( "<TD style="width: 20">" );
document.write ( "</TABLE>" );
document.write ( "<BR style="line-height: 4px">" );
document.write ( "<TABLE border="0" style="width: 395"><TR><TD>" );
document.write ( "<INPUT type="button" value="Load" style="width: 60" onClick="javascript: LoadRecentColors ( );"> " );
document.write ( "<INPUT type="button" value="Save" style="width: 60" onClick="javascript: SaveRecentColors ( );"> " );
document.write ( "<TD style="test-align: right">" );
document.write ( "<INPUT type="button" value="OK" style="width: 60" onClick="javascript: SetColorOnExit ( ); window.close ( );"> " );
document.write ( "<INPUT type="button" value="Cancel" style="width: 60" onClick="javascript: window.close ( );">" );
document.write ( "</TABLE>" );
document.write ( "</FORM>" );
SetPalette ( 0 );
LoadRecentColors ( );
document.onmousedown = DownColor;
_color_ = opener.c_colorpick_oldcolor;
_color_ = _color_.toUpperCase ( );
if ( _color_.charAt ( 0 ) == "R" )
_color_ = _RGB2Hex_ ( _color_ );
document.getElementById ( "orig_col" ).style.backgroundColor = _color_;
document.getElementById ( "new_col" ).style.backgroundColor = _color_;
document.forms [0].html_col.value = _color_;
</SCRIPT>
</HTML>
DHTML Color Picker
<A href="http://www.wbex.ru/Code/JavaScriptDownload/DHTML_Color_Picker.zip">DHTML_Color_Picker.zip( 15 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/JavaScriptColorPicker.htm">JavaScript ColorPicker</a> <A href="/Code/JavaScript/GUI-Components/JavaScriptColorPicker.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/Textforegroundandbackgroundcolorpicker.htm">Text foreground and background color picker</a> 3. <A href="/Code/JavaScript/GUI-Components/ColorPickerWindowsstyle.htm">Color Picker (Windows style)</a> 4. <A href="/Code/JavaScript/GUI-Components/ColorpickerIEonly.htm">Color picker (IE only)</a> 5. <A href="/Code/JavaScript/GUI-Components/ColorchooserinJavaScript.htm">Color chooser in JavaScript</a> 6. <A href="/Code/JavaScript/GUI-Components/FarbtasticjQuerycolorpickerplugin.htm">Farbtastic: jQuery color picker plug-in</a> <A href="/Code/JavaScript/GUI-Components/FarbtasticjQuerycolorpickerplugin.htm"></a>
Farbtastic: jQuery color picker plug-in
<A href="http://www.wbex.ru/Code/JavaScriptDownload/farbtastic.zip">farbtastic.zip( 29 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/JavaScriptColorPicker.htm">JavaScript ColorPicker</a> <A href="/Code/JavaScript/GUI-Components/JavaScriptColorPicker.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/Textforegroundandbackgroundcolorpicker.htm">Text foreground and background color picker</a> 3. <A href="/Code/JavaScript/GUI-Components/ColorPickerWindowsstyle.htm">Color Picker (Windows style)</a> 4. <A href="/Code/JavaScript/GUI-Components/ColorpickerIEonly.htm">Color picker (IE only)</a> 5. <A href="/Code/JavaScript/GUI-Components/ColorchooserinJavaScript.htm">Color chooser in JavaScript</a> 6. <A href="/Code/JavaScript/GUI-Components/DHTMLColorPicker.htm">DHTML Color Picker</a> <A href="/Code/JavaScript/GUI-Components/DHTMLColorPicker.htm"></a>
JavaScript ColorPicker
<html>
<head>
<title>DynAPI Examples - HTML ColorPicker</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("TemplateManager");
dynapi.library.include("HTMLColorPicker");
</script>
<script language="Javascript">
var img = dynapi.functions.getImage("./dynapiexamples/images/colpick.gif",21,12);
var t = "This is the Template:<center><table border="0"><tr><td width="200">Select a Color: <br>{@cPicker}</td></tr></table></center>";
var tp = new Template(t,100,100,350,200,"#EEEEEE");
tp.addChild(new HTMLColorPicker(null,img.getHTML()),"cPicker");
dynapi.document.addChild(tp);
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
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>