Styling Raphael.js Elements With CSS

Recently finished up a project in which one of the major requirements was that everything be re-skinnable. This meant that every interface element needed to be styled through the style sheet. Swap out a single file to completely change the look of the site.

In theory, this shouldn’t be a problem; that is the raison d’etre for Cascading Style Sheets. Where things got  little complicated, however, was in the many, many charts created using Raphael.js. Even the colors used therein needed to be accessible from the .css files.

Raphael produces SVG elements, which are added dynamically to the DOM. I found that the easiest way to style them was to, at the point of creating the individual elements, use Javascript (jQuery, in this case) to add class names. And that simply, everything works! See an example here. Reload the page to re-render the elements. Code follows:

<!doctype html>
<html>
	<head>
		<title>Styling Raphael.js Elements with CSS</title>
		<script type="text/javascript" src="jquery-1.7.1.min_.js"></script>
		<script type="text/javascript" src="raphael-min.js"></script>
		<script type="text/javascript">
			var r1,r2,i
			$(document).ready(function(){
				r1 = new Raphael('raph1',320,320);
				for(i=0;i<50;i++) {
					var s1 = Math.round(Math.random()*300)+10;
					var s2 = Math.round(Math.random()*300)+10;
					var e1 = Math.round(Math.random()*300)+10;
					var e2 = Math.round(Math.random()*300)+10;
					var s = Math.round(Math.random()*5);
					var c = Math.round(Math.random()*5);
					var p = "M"+s1+","+s2+"L"+e1+","+e2;
					var out = r1.path(p).attr({"stroke-width":s});
					$(out.node).attr('class','c'+c);
				}
				r2 = new Raphael('raph2',320,320);
				for(i=0;i<50;i++) {
					var x = Math.round(Math.random()*320);
					var y = Math.round(Math.random()*320);
					var r = Math.round(Math.random()*32);
					var s = Math.round(Math.random()*5);
					var c = Math.round(Math.random()*5);
					var f = Math.round(Math.random()*5);
					var out = r2.circle(x,y,r).attr({"stroke-width":s});
					$(out.node).attr('class','c'+c + ' f'+f);
				}
			});
		</script>
		<style type="text/css">
			* {margin:0;padding:0;}
			h4 {margin:20px 20px 0 20px;}
			.demo {width:320px;height:320px;margin:5px 20px 20px 20px;border:1px solid #cccccc;}
			.c0 {stroke:#ff0000;}
			.c1 {stroke:#00ff00;}
			.c2 {stroke:#0000ff;}
			.c3 {stroke:#ffff00;}
			.c4 {stroke:#ff00ff;}
			.c5 {stroke:#00ffff;}
			
			.f0 {fill:#222222;}
			.f1 {fill:#444444;}
			.f2 {fill:#666666;}
			.f3 {fill:#888888;}
			.f4 {fill:#aaaaaa;}
			.f5 {fill:#cccccc;}
		</style>
	</head>
	<body>
		<h4>Styling stroke color</h4>
		<div class="demo" id="raph1"></div>
		<h4>Styling stroke color and fill color</h4>
		<div class="demo" id="raph2"></div>
	</body>
</html>

and so forth. CSS classes and IDs work the same for SVG elements as they do for HTML elements. The big difference is that SVG styles which mimic HTML styles use different key words. Where you would set a background color on a HTML element using background-color:#cccccc, in SVG you would use fill:#cccccc. Stroke is the SVG version of border.

Here is a short list of helpful links for styling SVG with CSS:

SVG and CSS

Style reference at Mozilla Developer Network

3D Langton’s Ant, in Actionscript 3 Using Away3d

Fast on the heels of the 3D Langton’s Ants in Javascript  using Three.js, here is a version done in Actionscript 3 using Away3d. This will look better on faster computers. Click the image to launch the experiment.

Other than some additional rotation around the main axis, it is identical to the Javascript version, including a glitch that kicks in somewhere around 1200 cubes. In the Javascript version, Chrome would crash at around 700 cubes. In this version, it starts to get a little glitchy at 1600, then progressively more glitchy until it eventually stops updating the screen completely. Oddly, the script continues to run; you will be able to see the number of cubes increment in the upper left corner. I am not sure if this is a hard limit built into Away3d, or the Flash 3D API, or if there is a memory limit of some kind being reached. I suspect – based on the occasional warnings which popped up during development – that it is a hard-coded polygon limit within Away3d. There is probably some way around it, but I don’t (yet) have the know-how to go in and fix it.

Anyway, here is the code for the experiment. Comment out any lines which use the “org.eccesignum.*” files; they assume you have the code for my custom InfoPanel in your library path.

package {
	import away3d.cameras.Camera3D;
	import away3d.containers.ObjectContainer3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.entities.Mesh;
	import away3d.lights.DirectionalLight;
	import away3d.lights.PointLight;
	import away3d.materials.ColorMaterial;
	import away3d.materials.lightpickers.*;
	import away3d.primitives.SphereGeometry;
	import away3d.primitives.CubeGeometry;
	
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.geom.Vector3D;
	import flash.utils.Timer;
	
	import org.eccesignum.utilities.InfoPanel;
	
	[SWF(width=640,height=480,frameRate=32,backgroundColor=0x000000)]
	
	public class Main extends Sprite {
		internal var _info:InfoPanel;
		private var view:View3D;
		private var cubeContainer:ObjectContainer3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var directionalLight:DirectionalLight;
		private var lightPicker:StaticLightPicker
		private var cMaterial:ColorMaterial;
		private var antX:Number = 32,
			antY:Number = 32,
			antZ:Number = 32,
			nextX:Number,
			nextY:Number,
			nextZ:Number,
			cellsX:int = 64,
			cellsY:int = 64,
			cellsZ:int = 64,
			cellWidth:int = 8,
			cellHeight:int = 8,
			cellDepth:int = 8,
			antSize:int = 7,
			maxDirections:Number = 8,
			colorMultiplier:Number = Math.round(256/cellsX),
			xOff:Number = cellsX/2*cellWidth,
			yOff:Number = cellsY/2*cellHeight,
			zOff:Number = cellsZ/2*cellDepth,
			objects:Array,
			antDirection:Number = 1,
			filledCells:int = 0;
		
		public function Main():void {
			addEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {
			removeEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			init();
		}
		private function init():void {
			_info = new InfoPanel(this,100,50);
			scene = new Scene3D();
			camera = new Camera3D();
			view = new View3D(null,camera);
			view.antiAlias = 2;
			camera.x = 0;
			camera.z = 150;
			camera.y = -300;
			cubeContainer = new ObjectContainer3D();
			cubeContainer.rotationY=0;
			cubeContainer.rotationZ=45;
			
			directionalLight = new DirectionalLight(0,150,-300);
			directionalLight.diffuse = 1;
			directionalLight.specular = 0.3;
			directionalLight.color=0xffffff;
			scene.addChild(directionalLight);
			lightPicker = new StaticLightPicker([directionalLight]);
			
			cMaterial = new ColorMaterial(0x999999);
			cMaterial.lightPicker  = lightPicker;
			
			scene.addChild(cubeContainer);
			camera.lookAt(new Vector3D(0,0,0));
			view.scene = scene;
			addChild(view);

			objects = new Array(cellsX);
			for(var i:int=0;i<objects.length;i++) {
				objects[i] = new Array(cellsY);
				for(var j:int=0;j<objects[i].length;j++) {
					objects[i][j] = new Array(cellsZ);
				}
			}
			view.render();
			addEventListener(Event.ENTER_FRAME,onEnterFrame);
		}
		private function onEnterFrame(e:Event):void {
			if(!objects[antX][antY][antZ]) {
				antDirection++;
				if(antDirection == maxDirections) antDirection = 0;
				addObject(antX,antY,antZ);
			} else {
				removeObject(antX,antY,antZ);
				antDirection--;
				if(antDirection == -1) antDirection = maxDirections-1;
			}
			switch(antDirection) {
				case 0:
					antZ--;
					break;
				case 1:
					antX++;
					break;
				case 2:
					antY++;
					break;
				case 3:
					antX--;
					break;
				case 4:
					antZ++;
					break;
				case 5:
					antX++;
					break;
				case 6:
					antY--;
					break;
				case 7:
					antX--;
					break;
				default:
					break;
			}
			if(antY < 0) antY += cellsY;
			if(antY >= cellsY) antY -= cellsY;
			if(antX < 0) antX += cellsX;
			if(antX >= cellsX) antX -= cellsX;
			if(antZ < 0) antZ += cellsZ;
			if(antZ >= cellsZ) antZ -= cellsZ;

			cubeContainer.rotationZ+=.5;
			cubeContainer.rotationY+=.5;
			cubeContainer.rotationX+=.5;
			_info.update(filledCells.toString(),true);
			view.render();
		}
		private function addObject(x:int,y:int,z:int):void {
			var cGeometry:CubeGeometry = new CubeGeometry();
				cGeometry.width = antSize;
				cGeometry.height = antSize;
				cGeometry.depth = antSize;
			var cMesh:Mesh = new Mesh(cGeometry,cMaterial);
				cMesh.x = x*cellWidth-xOff;
				cMesh.y = y*cellHeight-yOff;
				cMesh.z = z*cellDepth-zOff;
			cubeContainer.addChild(cMesh);
			objects[x][y][z] = cMesh;
			filledCells++;
		}
		private function removeObject(x:int,y:int,z:int):void {
			cubeContainer.removeChild(objects[x][y][z]);
			objects[x][y][z].material.dispose();
			objects[x][y][z].dispose();
			objects[x][y][z] = null;
			filledCells--;
		}
		private function getRGB(r:int,g:int,b:int):int {
			var rgb:int = parseInt((r*colorMultiplier).toString(16) + (g*colorMultiplier).toString(16) + (b*colorMultiplier).toString(16),16);
			return rgb;
		}
			
	}
}

Feel free to use and modify the code to your heart’s content. If you come up with anything nifty, post a link to it in the comments.

Making Tinyscrollbar.js Easier to Implement

On a recent project I had the opportunity to play around with the TinyScrollbar.js jQuery plugin, which is used to add custom scrollbars to blocks of content. The project had to play nice with both standard browsers and mobile versions, and there was a lot of modular content, so it was either have some scrolling or a lot of little pages. We went with scrolling.

Using TinyScrollbar.js is fairly simple – find the block of content to which you want to add the scrollbars, add some HTML, and make a function call. The one down side is that the extra HTML needs to be added by hand. I think that is inefficient, and contrary to the idea of separating style and content. So, I played around a little and came up with a simple function, using jQuery, to do all of the wrapping for me.

The usage is simple enough: Feed in the jQuery selector string for the element to which you wish to add scroll bars. If they are to be customized, also feed in a Javascript object containing key:value pairs, which will be fed into the method call for Tinyscrollbar.

Code follows:

<!doctype html>
<html>
	<head>
		<title>TinyScrollBar test</title>
		<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="jquery.tinyscrollbar.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				scrollify('#scrollbar1');
				scrollify('#scrollbar2',{sizethumb:15});
			});
			
			function scrollify(element,options) {	//	'#element', {list:of,key:values}
				$(element).children().wrapAll('<div class="viewport"><div class="overview"></div></div>');
				$(element).prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');
				$(element).tinyscrollbar(options);
			}
		</script>
		<style type="text/css">
			* {margin:0;padding:0;}
			.scrollBox { width: 520px; clear: both; margin: 20px auto; }
			.scrollBox .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
			.scrollBox .overview { list-style: none; position: absolute; left: 0; top: 0; }
			.scrollBox .thumb .end,.scrollBox .thumb { background-color: #00ff00; }
			.scrollBox .scrollbar { position: relative; float: right; width: 15px; border-radius:15px;}
			.scrollBox .track { 
				background-color: #D8EEFD; 
				height: 100%; 
				width:13px; 
				position: relative; 
				padding: 0 1px; 
				border-radius:15px;
				-webkit-box-shadow: inset 0px 0px 5px 5px #ededed;
				-moz-box-shadow: inset 0px 0px 5px 5px #ededed;
				box-shadow: inset 0px 0px 5px 5px #ededed;
				}
			.scrollBox .thumb {
				height: 20px; 
				width: 13px; 
				cursor: pointer; 
				overflow: hidden; 
				position: absolute; 
				top: 0; 
				border-radius:15px;
				-webkit-box-shadow: inset 0px 0px 5px 5px #333333;
				-moz-box-shadow: inset 0px 0px 5px 5px #333333;
				box-shadow: inset 0px 0px 5px 5px #333333;
				}
			.scrollBox .thumb .end {
				overflow: hidden; 
				height: 15px; 
				width: 13px; 
				border-radius:15px;
				position:absolute;left:0;top:0;
				-webkit-box-shadow: inset 0px 0px 5px 5px #333333;
				-moz-box-shadow: inset 0px 0px 5px 5px #333333;
				box-shadow: inset 0px 0px 5px 5px #333333;
				clip:rect(0px,13px,5px,0px);
				}
			.scrollBox .disable{ display: none; }

			.scrollBox p {
				
			}
			
		</style>
	</head>
	<body>
		<div id="scrollbar1" class="scrollBox">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
		</div>
		
		<div id="scrollbar2" class="scrollBox">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
		</div>
	</body>
</html>

And that’s all there is to it. Fairly straight forward, and works across all major browsers. Click here to see this example in action.