September 27th, 2005, 08:54 AM
|
 |
Senior Fire Wizard
|
|
Join Date: Feb 2005
Location: Ashford, Kent. England
|
|
|
X-Browser Web Safe Color Picker + Demo
I have decided to post this here in case anyone can
use it
save this code as cw.asp
Code:
<%
function createColourCube()
dim arrWebSafe(5)
dim strHTML, strHTMLColour
dim lngRed, lngGreen, lngBlue
arrWebSafe(0) = "00"
arrWebSafe(1) = "33"
arrWebSafe(2) = "66"
arrWebSafe(3) = "99"
arrWebSafe(4) = "CC"
arrWebSafe(5) = "FF"
strHTML = "<table style=""padding: 0px; border: 0px;"" cellspacing=""0"">" & vbcrlf
for lngRed = 0 to uBound(arrWebSafe)
strHTML = strHTML & "<tr>" & vbcrlf
for lngGreen = 0 to uBound(arrWebSafe)
for lngBlue = 0 to uBound(arrWebSafe)
strHTMLColour = arrWebSafe(lngRed) & arrWebSafe(lngGreen) & arrWebSafe(lngBlue)
strHTML = strHTML & "<td class=""colour"" id=""h" & strHTMLColour & """ style=""width: 5px; height: 5px; cursor: pointer; background-color: #" & strHTMLColour & """ colour=""#" & strHTMLColour & """> </td>" & vbcrlf
next
next
strHTML = strHTML & "</tr>" & vbcrlf
next
strHTML = strHTML & "</table>" & vbcrlf
createColourCube = strHTML
end function
function createPreview()
dim strHTML
strHTML = strHTML & "<table style=""padding: 0px; border: 1px solid black; margin-top: 10px; float: left; text-align: center; ertical-align: middle;"" cellspacing=""0"">" & vbcrlf
strHTML = strHTML & "<tr>" & vbcrlf
strHTML = strHTML & "<td id=""preview"" style=""width: 150px; height: 50px;""> </td>" & vbcrlf
strHTML = strHTML & "</tr>" & vbcrlf
strHTML = strHTML & "</table>" & vbcrlf
createPreview = strHTML
end function
%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Colour Safe</title>
<script type="text/javascript" language="ECMAScript">
window.onload=function WindowLoad(event) {
if (!document.getElementsByTagName) return;
var csc = document.getElementsByTagName("td");
for (var i=0; i<csc.length; i++) {
var cs = csc[i];
if (cs.className == "colour") {
cs.onmouseover = doPreview;
cs.onmouseout = clearPreview;
cs.onclick = applyValue;
}
}
document.getElementById("closeButton").onclick = function() { window.close(); }
}
function doPreview(event) {
//read IE event:
if ((typeof event == "undefined")||(!event))
event = window.event;
//read sender element:
var objSender=event.target||event.srcElement;
//maybe non IE and non standard browser:
if (!objSender)
return false;
//read attributes:
var strValue=objSender.attributes["colour"].value;
document.getElementById("preview").style.background = strValue;
document.getElementById("preview").innerHTML = strValue;
}
function clearPreview(event) {
//read IE event:
if ((typeof event == "undefined")||(!event))
event = window.event;
//read sender element:
var objSender=event.target||event.srcElement;
//maybe non IE and non standard browser:
if (!objSender)
return false;
document.getElementById("preview").style.background = "#FFFFFF";
document.getElementById("preview").innerHTML = " ";
}
function applyValue(event) {
//read IE event:
if ((typeof event == "undefined")||(!event))
event = window.event;
//read sender element:
var objSender=event.target||event.srcElement;
//maybe non IE and non standard browser:
if (!objSender)
return false;
//read attributes:
var strValue=objSender.attributes["colour"].value;
window.opener.setColour(strValue);
window.close();
}
</script>
</head>
<body style="margin: 0px;">
<div style="width: 240px;">
<%= createColourCube() %>
<%= createPreview() %>
<button id="closeButton" style="float: right; margin-top: 10px; height: 50px;">Close</button><br />
</div>
</body>
</html>
Save this as test.html and open it in the browser
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New document</title>
<script type="text/javascript" language="ECMAScript">
function setColour(theColour) {
document.body.style.background = theColour;
alert(theColour);
}
function doColour() {
window.open("cw.asp","cw","width=240,height=200");
}
</script>
</head>
<body>
<a href="javascript: doColour();">Go on then</a>
</body>
</html>
__________________
And he picked it all up... in his pick-up.
Friends of Shemzilla
|
ASP Free Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
