stilist/alphabet loop.html

## alphabet loop.html
<!doctype html>
<html lang='en'>
 <head>
  <title>JavaScript Solari Board</title>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
  <script>
$(document).ready(function () {
  $("body").append($("<div id='rack'>"));

  var from_string = "Hello";
  var to_string = "Goodbye";

  while (from_string.length < to_string.length) {
    from_string += " ";
  }
  while (to_string.length < from_string.length) {
    to_string += " ";
  }

  for (i = 0; i < from_string.length; i++) {
    var cell_id = create_cell();
    cycle_characters(from_string.charCodeAt(i), to_string.charCodeAt(i), cell_id);
  }
});

var create_cell = function() {
  var $rack = $("#rack");
  var cell_id = "cell_" + $("#rack .cell").size() + 1;
  $rack.append($("<span class='cell first_run'>").attr("id", cell_id));
  return cell_id;
}

var cycle_characters = function (from, to, cell_id) {
  // 32 = space; 126 = tilde
  // low-range ASCII only
  var lower_limit = 32;
  var upper_limit = 126;

  var from = parseInt(from);
  var to = parseInt(to);

  if (from > upper_limit || from < lower_limit) {
    from = lower_limit;
  }
  if (to > upper_limit || to < lower_limit) {
    to = lower_limit;
  }

  if ("string" != typeof cell_id) {
    cell_id = $(cell_id).attr("id");
  }

  var $cell = $("#" + cell_id);

  $cell.text(String.fromCharCode(from));
  if (to != from) {
    var call = "cycle_characters(" + (from + 1) + ", " + to + ", " + cell_id + ")";
    if ($cell.hasClass("first_run")) {
      $cell.removeClass("first_run");
      setTimeout(call, 1000);
    } else {
      setTimeout(call, 75);
    }
  }
}
  </script>
  <style>
body {
 background-color: #000;
 color: #fc0;
}
#rack {
 margin: 0 auto;
}
#rack .cell {
 background-color: #333;
 color: #fff;
 display: block;
 float: left;
 font: 60pt "Helvetica Neue", sans-serif;
 height: 95px;
 margin-right: 10px;
 padding: 20px 40px;
 text-align: center;
 width: 70px;

 border-radius: 7px;
 -webkit-border-radius: 7px;
}
  </style>
 </head>
 <body>
 </body>
</html>
	<!doctype html>
	<html lang='en'>
	<head>
	<title>JavaScript Solari Board</title>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
	<script>
	$(document).ready(function () {
	$("body").append($("<div id='rack'>"));

	var from_string = "Hello";
	var to_string = "Goodbye";

	while (from_string.length < to_string.length) {
	from_string += " ";
	}
	while (to_string.length < from_string.length) {
	to_string += " ";
	}

	for (i = 0; i < from_string.length; i++) {
	var cell_id = create_cell();
	cycle_characters(from_string.charCodeAt(i), to_string.charCodeAt(i), cell_id);
	}
	});

	var create_cell = function() {
	var $rack = $("#rack");
	var cell_id = "cell_" + $("#rack .cell").size() + 1;
	$rack.append($("<span class='cell first_run'>").attr("id", cell_id));
	return cell_id;
	}

	var cycle_characters = function (from, to, cell_id) {
	// 32 = space; 126 = tilde
	// low-range ASCII only
	var lower_limit = 32;
	var upper_limit = 126;

	var from = parseInt(from);
	var to = parseInt(to);

	if (from > upper_limit \|\| from < lower_limit) {
	from = lower_limit;
	}
	if (to > upper_limit \|\| to < lower_limit) {
	to = lower_limit;
	}

	if ("string" != typeof cell_id) {
	cell_id = $(cell_id).attr("id");
	}

	var $cell = $("#" + cell_id);

	$cell.text(String.fromCharCode(from));
	if (to != from) {
	var call = "cycle_characters(" + (from + 1) + ", " + to + ", " + cell_id + ")";
	if ($cell.hasClass("first_run")) {
	$cell.removeClass("first_run");
	setTimeout(call, 1000);
	} else {
	setTimeout(call, 75);
	}
	}
	}
	</script>
	<style>
	body {
	background-color: #000;
	color: #fc0;
	}
	#rack {
	margin: 0 auto;
	}
	#rack .cell {
	background-color: #333;
	color: #fff;
	display: block;
	float: left;
	font: 60pt "Helvetica Neue", sans-serif;
	height: 95px;
	margin-right: 10px;
	padding: 20px 40px;
	text-align: center;
	width: 70px;

	border-radius: 7px;
	-webkit-border-radius: 7px;
	}
	</style>
	</head>
	<body>
	</body>
	</html>