robcowie/colour_picker.html

## colour_picker.html
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple colour picker</title>
    <style type="text/css">
        .colour {
            width: 40px;
            height: 40px;
            float: left;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
        }
        .red {background-color: #FF2622;}
        .green {background-color: #2B6DB9;}
        .blue {background-color: #4AFF41;}
        #selected-colour {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="container">
        <header>
            <h1>Simple colour picker</h1>
        </header>

        <div id="main">

            <form action="/pick_colour" method="get">
                <input type="hidden" name="colour" value="" id="colour">
                <div id="colour-picker">
                    <div class="colour red">&nbsp;</div>
                    <div class="colour green">&nbsp;</div>
                    <div class="colour blue">&nbsp;</div>
                </div>
                <p><input type="submit" value="Continue &rarr;"></p>
            </form>

            <br/>
            <div id="selected-colour"></div>

        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
    <script>
        $(document).ready(function() {
            $('.colour').click(function(event){
                // wrap the target element with jquery for convenience
                var $this = $(this);
                // toggle selected class, remove from other colour divs
                $this.toggleClass('selected').html('').siblings().removeClass('selected').html('');
                // add tick if selecting the colour
                if ($this.hasClass('selected')){
                    $this.html('&#10003;');
                    // get the background colour
                    var colour = $this.css('backgroundColor');
                    // Set the value of the hidden form input
                    $('input#colour').val(colour);
                    // display it (just an example of 'doing something')
                    $('#selected-colour').html(colour);
                } else {
                    // blank the hidden input
                    $('input#colour').val('');
                };
            });
        });
    </script>
</body>
</html>
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Simple colour picker</title>
	<style type="text/css">
	.colour {
	width: 40px;
	height: 40px;
	float: left;
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	}
	.red {background-color: #FF2622;}
	.green {background-color: #2B6DB9;}
	.blue {background-color: #4AFF41;}
	#selected-colour {
	margin-top: 10px;
	}
	</style>
	</head>

	<body>
	<div id="container">
	<header>
	<h1>Simple colour picker</h1>
	</header>

	<div id="main">

	<form action="/pick_colour" method="get">
	<input type="hidden" name="colour" value="" id="colour">
	<div id="colour-picker">
	<div class="colour red"> </div>
	<div class="colour green"> </div>
	<div class="colour blue"> </div>
	</div>
	<p><input type="submit" value="Continue →"></p>
	</form>

	<br/>
	<div id="selected-colour"></div>

	</div>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
	<script>
	$(document).ready(function() {
	$('.colour').click(function(event){
	// wrap the target element with jquery for convenience
	var $this = $(this);
	// toggle selected class, remove from other colour divs
	$this.toggleClass('selected').html('').siblings().removeClass('selected').html('');
	// add tick if selecting the colour
	if ($this.hasClass('selected')){
	$this.html('✓');
	// get the background colour
	var colour = $this.css('backgroundColor');
	// Set the value of the hidden form input
	$('input#colour').val(colour);
	// display it (just an example of 'doing something')
	$('#selected-colour').html(colour);
	} else {
	// blank the hidden input
	$('input#colour').val('');
	};
	});
	});
	</script>
	</body>
	</html>