194 |
} |
} |
195 |
</style> |
</style> |
196 |
|
|
197 |
|
<script type="text/javascript" src="hide.js"></script> |
198 |
<script type="text/javascript" src="range.js"></script> |
<script type="text/javascript" src="range.js"></script> |
199 |
<script type="text/javascript" src="timer.js"></script> |
<script type="text/javascript" src="timer.js"></script> |
200 |
<script type="text/javascript" src="slider.js"></script> |
<script type="text/javascript" src="slider.js"></script> |
202 |
</head> |
</head> |
203 |
<body> |
<body> |
204 |
<div id="sitewidth"> |
<div id="sitewidth"> |
|
<div id="news" style="display: none;"> |
|
|
<h1>ColorMatch Remix</h1> |
|
|
<p>This colorpicker is based heavily upon the code from <a href="http://colormatch.dk">ColorMatch 5k</a>. I've made it more compatible - it now works in Mozilla, and should also work in Opera, since I'm using a much better slider control. I've also added 3 more colors, bringing the total auto-generated colors to 9, and the ability to export your colors to a Photoshop color table.</p> |
|
|
<p>You can also download the full source code <a href="colormatch.zip" title="Source Code">here.</a></p> |
|
|
<p><b>What's New:</b></p> |
|
|
<ul> |
|
|
<li>Jun. 12, 2004: Fixed a text export bug (finally!), added CMYK output, and the ability to bookmark colors. Also added colors to the dropdown theme list. Zipfile updated.</li> |
|
|
<li>Feb. 01, 2004: Added Sample Page rendering, cleaned up code, added config file.</li> |
|
|
<li>Jan. 29, 2004: Woo! <a href="http://zeldman.com" title="The Daily Report">Jeffrey Zeldman</a> has linked to this! Sweet!</li> |
|
|
<li>Jan. 23, 2004: <a href="http://hlrnet.com" title="Hans' site">Hans Le Roy</a> has put up a mirror of <a href="http://hlrnet.com/colormatch/" title="multilingual!">ColorMatch Remix</a>, with 3 translations - Spanish, French, and Dutch.</li> |
|
|
<li>Jan. 19, 2004: I've <a href="colormatch.zip" title="Everything you need.">zipped up</a> all the code, along with a dump of the database, for those of you who'd like to run it on your own server. All I request is that you link back to my main page.</li> |
|
|
<li>Dec. 06, 2003: This site featured in Lockergnome's <a href="http://channels.lockergnome.com/windows/backissues/20031205.phtml">Windows Fanatics</a> newsletter! (Thanks for the link, Chris!) </li> |
|
|
</ul> |
|
|
</div> |
|
205 |
<div id="allsliders"> |
<div id="allsliders"> |
206 |
<div class="spacer"></div> |
<div class="spacer"></div> |
207 |
<div id="slideleft"> |
<div id="slideleft"> |
316 |
</div> |
</div> |
317 |
<div class="spacer"></div> |
<div class="spacer"></div> |
318 |
</div> |
</div> |
319 |
|
|
320 |
|
<a href="#" onClick="javascript:toggle_display('news',1);">site news</a> |
321 |
|
<div id="news" style="display: none;"> |
322 |
|
<h1>ColorMatch Remix</h1> |
323 |
|
<p>This colorpicker is based heavily upon the code from <a href="http://colormatch.dk">ColorMatch 5k</a>. I've made it more compatible - it now works in Mozilla, and should also work in Opera, since I'm using a much better slider control. I've also added 3 more colors, bringing the total auto-generated colors to 9, and the ability to export your colors to a Photoshop color table.</p> |
324 |
|
<p>You can also download the full source code <a href="colormatch.zip" title="Source Code">here.</a></p> |
325 |
|
<p><b>What's New:</b></p> |
326 |
|
<ul> |
327 |
|
<li>Oct. 03, 2004: First modification by Dobrica Pavlinusic: lighter and darker selections, speedup using getElementById cache</li> |
328 |
|
<li>Jun. 12, 2004: Fixed a text export bug (finally!), added CMYK output, and the ability to bookmark colors. Also added colors to the dropdown theme list. Zipfile updated.</li> |
329 |
|
<li>Feb. 01, 2004: Added Sample Page rendering, cleaned up code, added config file.</li> |
330 |
|
<li>Jan. 29, 2004: Woo! <a href="http://zeldman.com" title="The Daily Report">Jeffrey Zeldman</a> has linked to this! Sweet!</li> |
331 |
|
<li>Jan. 23, 2004: <a href="http://hlrnet.com" title="Hans' site">Hans Le Roy</a> has put up a mirror of <a href="http://hlrnet.com/colormatch/" title="multilingual!">ColorMatch Remix</a>, with 3 translations - Spanish, French, and Dutch.</li> |
332 |
|
<li>Jan. 19, 2004: I've <a href="colormatch.zip" title="Everything you need.">zipped up</a> all the code, along with a dump of the database, for those of you who'd like to run it on your own server. All I request is that you link back to my main page.</li> |
333 |
|
<li>Dec. 06, 2003: This site featured in Lockergnome's <a href="http://channels.lockergnome.com/windows/backissues/20031205.phtml">Windows Fanatics</a> newsletter! (Thanks for the link, Chris!) </li> |
334 |
|
</ul> |
335 |
|
</div> |
336 |
|
|
337 |
<p class="footer"> |
<p class="footer"> |
338 |
Based on <a href="http://colormatch.dk">ColorMatch 5K</a> by Kim Jensen. | Modified by <a href="http://twysted.net">Twyst</a> (mail: twyst AT twysted dot net)<br /> |
Based on <a href="http://colormatch.dk">ColorMatch 5K</a> by Kim Jensen. | Modified by <a href="http://twysted.net">Twyst</a> (mail: twyst AT twysted dot net) and <a href="http://www.rot13.org/~dpavlin/">Dobrica Pavlinusic</a> (mail: dpavlin AT rot13 dot org)<br /> |
339 |
This page validates as <a href="http://validator.w3.org/check/referer">XHTML 1.0 transitional.</a> |
This page validates as <a href="http://validator.w3.org/check/referer">XHTML 1.0 transitional.</a> |
340 |
</p> |
</p> |
341 |
|
|
345 |
|
|
346 |
|
|
347 |
// init code |
// init code |
348 |
var r = new Slider(document.getElementById("red-slider"), document.getElementById("red-slider-input")); |
var r = new Slider(element_id("red-slider"), document.getElementById("red-slider-input")); |
349 |
r.setMaximum(255); |
r.setMaximum(255); |
350 |
var g = new Slider(document.getElementById("green-slider"), document.getElementById("green-slider-input")); |
var g = new Slider(element_id("green-slider"), document.getElementById("green-slider-input")); |
351 |
g.setMaximum(255); |
g.setMaximum(255); |
352 |
var b = new Slider(document.getElementById("blue-slider"), document.getElementById("blue-slider-input")); |
var b = new Slider(element_id("blue-slider"), document.getElementById("blue-slider-input")); |
353 |
b.setMaximum(255); |
b.setMaximum(255); |
354 |
|
|
355 |
var ri = document.getElementById("red-input"); |
var ri = element_id("red-input"); |
356 |
ri.onchange = function () { |
ri.onchange = function () { |
357 |
r.setValue(parseInt(this.value)); |
r.setValue(parseInt(this.value)); |
358 |
}; |
}; |
359 |
|
|
360 |
var gi = document.getElementById("green-input"); |
var gi = element_id("green-input"); |
361 |
gi.onchange = function () { |
gi.onchange = function () { |
362 |
g.setValue(parseInt(this.value)); |
g.setValue(parseInt(this.value)); |
363 |
}; |
}; |
364 |
|
|
365 |
var bi = document.getElementById("blue-input"); |
var bi = element_id("blue-input"); |
366 |
bi.onchange = function () { |
bi.onchange = function () { |
367 |
b.setValue(parseInt(this.value)); |
b.setValue(parseInt(this.value)); |
368 |
}; |
}; |
369 |
|
|
370 |
r.onchange = g.onchange = b.onchange = function () { |
r.onchange = g.onchange = b.onchange = function () { |
371 |
var cr = document.getElementById("color-result"); |
var cr = element_id("color-result"); |
372 |
cr.style.backgroundColor = "rgb(" + r.getValue() + "," + g.getValue() + "," + b.getValue() + ")"; |
cr.style.backgroundColor = "rgb(" + r.getValue() + "," + g.getValue() + "," + b.getValue() + ")"; |
373 |
rg.r = ri.value = r.getValue(); |
rg.r = ri.value = r.getValue(); |
374 |
rg.g = gi.value = g.getValue(); |
rg.g = gi.value = g.getValue(); |