Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

58 lines (52 sloc) 2.156 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Farbtastic</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />
<style type="text/css" media="screen">
.colorwell {
border: 2px solid #fff;
width: 6em;
text-align: center;
cursor: pointer;
}
body .colorwell-selected {
border: 2px solid #000;
font-weight: bold;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#demo').hide();
var f = $.farbtastic('#picker');
var p = $('#picker').css('opacity', 0.25);
var selected;
$('.colorwell')
.each(function () { f.linkTo(this); $(this).css('opacity', 0.75); })
.focus(function() {
if (selected) {
$(selected).css('opacity', 0.75).removeClass('colorwell-selected');
}
f.linkTo(this);
p.css('opacity', 1);
$(selected = this).css('opacity', 1).addClass('colorwell-selected');
});
});
</script>
</head>
<body>
<h1>jQuery Color Picker: Farbtastic</h1>
<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
<form action="" style="width: 500px;">
<div id="picker" style="float: right;"></div>
<div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>
</form>
<p>More info on <a href="http://www.acko.net/dev/farbtastic">Acko.net</a>.</p>
<p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.