Draw lines on the screen at absolute offsets

color-rule.js

// draw a colored rule across the page
function drawRule(label, offset, options) {
	// setting global color enum, step counter, and index
	window.crColors = window.crColors || ['#000', '#f00', '#0f0', '#00f', '#ff0', '#0ff', '#f0f', '#fff'];
	window.crStep = window.crStep || 0;
	window.crOffset = window.crOffset || 0;
	window.crOffsetScale = 200;
	window.crIndex = window.crIndex || 9001
	
	// set defaults or compute values
	var color = (options && options.color) ? options.color : window.crColors[window.crStep++ % window.crColors.length];
    var parent = (options && options.parent) ? options.parent : 'body';
	
	// build and attach the rule, then set the offset
	var el = $('<div>').append($('<span>').addClass('cr-label-' + label).css({
		position: 'relative',
		left: (window.crOffset++ % 3) * window.crOffsetScale + 'px',
		color: color
	}).text(label + ': ' + offset + ' (' + parent + ')')).css({
		display: 'block',
		height: '1px',
		width: '100%',
		'background-color': color,
		border: 0,
		margin: '0 auto',
		padding:0,
		'z-index': window.crIndex++ + ' !important'
	}).addClass('rule-' + label);
	$(parent).append(el);
	el.offset({top: offset, left: 0});
}