Adding a new feature to add color value via typing. Unnecessary whitespace removed.

bubbly.js

@@ -1,18 +1,24 @@
+function changeValue(who){
+	if(who=='picker') picker_color.value = color.value;
+	if(who=='color') color.value = picker_color.value;
+	update();
+}
+
 function update() {
 	var side = getRadioValue('side'),
 	    triangle = getRadioValue('triangle');
-	    
+
 	code.textContent = bubbleCSS('.speech-bubble', {
 		side: side,
 		triangle: triangle,
 		size: size.value,
 		color: color.value,
 		ems: ems.checked
 	});
-	
+
 	// Update labels
 	var labelCSS ='';
-	
+
 	['top', 'right', 'bottom', 'left'].forEach(function(value) {
 		labelCSS += bubbleCSS('label[for="side-' + value + '"]', {
 			side: value,
@@ -21,7 +27,7 @@ function update() {
 			color: 'yellowgreen'
 		}) + '\n\n';
 	});
-	
+
 	['symmetrical', 'right', 'left'].forEach(function(value) {
 		labelCSS += bubbleCSS('label[for="triangle-' + value + '"]', {
 			side: side,
@@ -30,17 +36,17 @@ function update() {
 			color: 'deeppink'
 		}) + '\n\n';
 	});
-	
+
 	labels.textContent = labelCSS;
 }
 
 function bubbleCSS(selector, settings) {
 	var props = {}, propsBefore = {};
-	
+
 	props['position'] = 'relative';
 	props['background'] = settings.color;
 	props['border-radius'] = '.4em';
-	
+
 	var side = settings.side,
 	    triangle = settings.triangle,
 	    isHorizontal = side == 'top' || side == 'bottom',
@@ -51,61 +57,61 @@ function bubbleCSS(selector, settings) {
 			'left': 'right'
 		}[side],
 		offset = isHorizontal? 'left' : 'top';
-	
+
 	propsBefore['content'] = "''";
 	propsBefore['position'] = 'absolute';
 	propsBefore[side] = '0';
 	propsBefore[offset] = '50%';
-	
+
 	propsBefore['width'] = '0';
 	propsBefore['height'] = '0';
-	
+
 	propsBefore['border'] = getLength(settings.size, settings.ems) + ' solid transparent';
 	propsBefore['border-' + opposite + '-color'] = settings.color;
 	propsBefore['border-' + side] = '0';
-	
+
 	if (triangle != 'symmetrical') {
 		propsBefore['border-' + (isHorizontal? triangle : (triangle == 'right'? 'top' : 'bottom'))] = '0';
 	}
-	
+
 	propsBefore['margin-' + offset] = getLength(-settings.size/(triangle == 'symmetrical'? 1 : 2), settings.ems); // to center it
 	propsBefore['margin-' + side] = getLength(-settings.size, settings.ems); // to put it outside the box
-	
+
 	return cssRule(selector, props) + '\n\n' + cssRule(selector + ':after', propsBefore);
 }
 
 function getLength(px, useEms) {
 	if (useEms) {
 		var base = parseInt(getComputedStyle($('.speech-bubble')).fontSize);
-		
+
 		return Math.round(1000 * px/base)/1000 + 'em';
 	}
-	
+
 	return px + 'px';
 }
 
 function cssRule(selector, props) {
 	var css = selector + ' {\n';
-	
-	
+
+
 	$u.each(props, function (value, property) {
 		css += '	' + property + ': ' + value + ';\n';
 	});
-	
+
 	css += '}';
-	
+
 	return css;
 }
 
 function getRadioValue(name) {
 	var radios = document.getElementsByName(name);
-	
+
 	for (var i=0, radio; radio = radios[i++];) {
 		if (radio.checked) {
 			return radio.value;
 		}
 	}
-	
+
 	return '';
 }
 
@@ -117,4 +123,4 @@ $$('input[type="radio"] + label').forEach(function (label) {
 	label.title = label.textContent;
 });
 
-update();
+update();

index.html

@@ -18,38 +18,38 @@ <h2>CSS speech bubbles made easy!</h2>
 
 <section>
 	<h1>Side</h1>
-	
+
 	<input type="radio" name="side" value="top" id="side-top" />
 	<label for="side-top">Top</label>
-	
+
 	<input type="radio" name="side" value="right" id="side-right" />
 	<label for="side-right">Right</label>
-	
+
 	<input type="radio" name="side" value="bottom" id="side-bottom" checked />
 	<label for="side-bottom">Bottom</label>
-	
+
 	<input type="radio" name="side" value="left" id="side-left" />
 	<label for="side-left">Left</label>
 </section>
 
 <section>
 	<h1>Pointer triangle</h1>
-	
+
 	<input type="radio" name="triangle" value="symmetrical" id="triangle-symmetrical" />
 	<label for="triangle-symmetrical">Symmetrical</label>
-	
+
 	<input type="radio" name="triangle" value="right" id="triangle-right" />
 	<label for="triangle-right">Right</label>
-	
+
 	<input type="radio" name="triangle" value="left" id="triangle-left" checked />
 	<label for="triangle-left">Left</label>
 </section>
 
 <section>
 	<h1>Pointer size</h1>
-	
+
 	<input type="range" min="2" max="100" value="20" name="size" id="size" />
-	
+
 	<label>
 		<input type="checkbox" name="ems" id="ems" />
 		Use ems
@@ -58,8 +58,8 @@ <h1>Pointer size</h1>
 
 <section>
 	<h1>Background color</h1>
-
-	<input type="color" id="color" value="#00aabb" />
+	<input type="color" id="picker_color" value="#00aabb" onchange="changeValue('color')" />
+	<input type="text" id="color" value="#00aabb" maxlength="7" onchange="changeValue('picker')" />
 </section>
 
 <footer></footer>

style.css

@@ -1,5 +1,5 @@
 html {
-	
+
 }
 
 body {
@@ -42,7 +42,7 @@ body {
 		font-size: 150%;
 		font-family: sniglet;
 	}
-	
+
 	.speech-bubble h2 {
 		margin: 0;
 		font-size: 40%;
@@ -63,7 +63,7 @@ input[type="radio"] + label {
 }
 
 input[type="radio"]:checked + label {
-	
+
 }
 
 input[type="radio"]:checked + label:before {