Long story short: best implementation of a color picker? [Archive] - HTML Forums

Tygur

01-25-2005, 01:27 AM

Ok, this doesn't fit very well into any of these forums, so I hope posting it here was an ok idea..

If you want to save time, you can easily skip this first paragraph and just read the second one. I have a private website just for people I know that can't be viewed without an account. One feature it has is the ability to choose a theme to view the site in. Basically, you can choose the look the site can have for you. Eventually, I started making new themes at the request of different people. In the beginning, it wasn't a problem, cause it wouldn't happen too often. But now I'm getting tired of adding new themes, so I decided that I should make something that allows people to create their own themes. One thing this requires is that people choose the colors for their themes.

So the purpose of this thread is to ask for opinions on how to best implement a color picker. I'm thinking JavaScript or Java, but each has its own shortcomings. I can't do Flash, because I have no software to make it with. It's been a while since I used Java, and I never used it for applets, but I think I can figure it out. The problem with it is I'm not sure how convenient Java is for the user. I've used JavaScript more recently, but I'm not looking forward to all the code mangling that would be necessary to get it to work in every browser. I'm also wondering if there's anything free I can just pop into my site. If not, I'm perfectly content trying to make my own.

Another thing I'm wondering about is if I should use a popup to show the actual color chooser, or just keep everything in the same browser window..

So..any suggestions?
Thanks in advance..

Pegasus

01-25-2005, 01:43 AM

Welcome to the zoo, Tygur! ;)

I think what you're asking for is a bit beyond simple HTML. What I'll do is pop this thread over to Server-Side Programming. Someone in there will either know how to make this or know where you can find a pre-made script for it. It's no trouble at all.

Pegasus
Moderator

Tygur

01-25-2005, 02:16 AM

Well, I did think of that, but the problem with server-side programming is that both Java and JavaScript are done on the client side..

scoutt

01-26-2005, 05:54 PM

you are correct Tygur, i have moved it to client side. ;)

Pegasus

01-26-2005, 06:24 PM

Well, I knew it was some sort of programming. Don't I get points for that? ;)

Thanks, Scoutt.

Peg

coothead

01-27-2005, 12:31 PM

Hi there Tygur,

here is something that I put together, it may suit your
requirements. It uses a pop-up for the style changes.

the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>the plain page</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
#link {
width:220px;
border:solid 1px #000;
text-align:center;
margin: 10px auto;
}
#link a {
font-family:verdana;
font-size:16px;
color:#000;
text-decoration:none;
margin:5px;
}
#container {
width:90%;
border:solid 0px #fff;
background:#fff;
margin:auto;
}
#par {
margin:2%;
padding:2%;
text-align:justify;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

function customize(id,type,inp){
if(type==0) {
document.getElementById(id).style.background=inp ;
}
else {
if(type==1) {
document.getElementById(id).style.color=inp;
}
else {
if(type==2) {
document.getElementById(id).style.fontFamily=inp;
}
else {
if(type==3) {
document.getElementById(id).style.fontSize=inp;
}
else {
if(type==4) {
document.getElementById(id).style.borderColor=inp;
}
else {
if(type==5) {
document.getElementById(id).style.borderStyle=inp;
}
else {
if(type==6) {
document.getElementById(id).style.borderWidth=inp;
}
}
}
}
}
}
}
}
function popItUp(url) {
var w = 388;
var h = 290;
var l=(screen.width-w)/2;
var t=(screen.height-h)/2;
var popup = window.open('styler.html','forminfo','left='+l+',top='+t+',width='+w+',height='+h+',toolbar=0');
}
//]]>
</script>

</head>
<body id="body">

<div id="link">
<a href="javascript:void(popItUp())">style change - click here</a>
</div>
<div id="container">
<p id="par">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit
venenatis purus. Integer massa libero, vehicula id, consequat sed, tincidunt
nec, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna non
magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc.
Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec
vulputate tincidunt turpis. Curabitur dignissim vestibulum nunc. Aliquam felis
lorem, ultrices sit amet, convallis a, accumsan vel, ante. Proin aliquam turpis
sed augue. In pellentesque, magna a pulvinar adipiscing, est orci adipiscing
felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</p>
</div>

</body>
</html>
styler.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>style setter</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#eef;
}
#form {
width:200px;
margin:8px auto;
}
.inst {
font-family:verdana;
font-size:12px;
text-align:center;
color:#006;
margin:2px;
}
.text {
width:60px;
font-family:verdana;
font-size:10px;
}
.butt {
width:110px;
font-family:verdana;
font-size:10px;
}
#link {
text-align:center;
}
#link a{
font-family:verdana;
font-size:12px;
color:#006;
text-decoration:none;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function setStyle(id,type,num){
val=document.forms[0][num].value;
window.opener.customize(id,type,val)
}
function tidyUp() {
window.close();
window.opener.document.getElementById("link").style.display="none";
}
//]]>
</script>

</head>
<body>

<div class="inst">
color values may be in hex(#) or word.
</div>
<div class="inst">
size values must end in 'px', 'em', 'pt' etc.
</div>
<div id="form">

<form action="#">
<div>
<input class="text" type="text"/>
<input class="butt" type="button" value="background color" onclick="setStyle('body',0,0)"/>
</div>
<div>
<input class="text" type="text"/>
<input class="butt" type="button" value="font color" onclick="setStyle('par',1,2)"/>
</div>
<div>
<input class="text" type="text"/>
<input class="butt" type="button" value="font family" onclick="setStyle('par',2,4)"/>
</div>
<div>
<input class="text" type="text"/>
<input class="butt" type="button" value="font size" onclick="setStyle('par',3,6)"/>
</div>
<div>
<input class="text" type="text"/>
<input class="butt" type="button" value="display color" onclick="setStyle('par',0,8)"/>
</div>
<div>
<input class="text" type="text"/>
<input class="butt" type="button" value="border color" onclick="setStyle('container',4,10)"/>
</div>
<div>
<input class="text" type="text"/>
<input class="butt" type="button" value="border style" onclick="setStyle('container',5,12)"/>
</div>
<div>
<input class="text" type="text"/>
<input class="butt" type="button" value="border width" onclick="setStyle('container',6,14)"/>
</div>
<div>
<input class="text" type="text"/>
<input class="butt" type="button" value="padding color" onclick="setStyle('container',0,16)"/>
</div>
</form>
</div>

<div id="link">
<a href="javascript:void(tidyUp())">when satisfied click here</a>
</div>

</body>
</html>