Email

Filed In:

JavaScript

Cryptogram Script

4. Alternate Head Script

More of this Feature

Introduction Array Script Crypto Head Script Stylesheet/HTML

Here is the version of the script that simply updates the cryptogram in place without reloading the page.

To obtain this version of the second script simply copy and save the following code as crypthead.js.

// Alternate Cryptogram Javascript
// copyright 19th April 2006, 2nd September 2006 by Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration

var rs = decode = '--------------------------'; var undf = '-';codestr = code[codenum];var cyl = from = to = '';document.getElementsByClassName = function(cl) {var retnode = [];var myclass = new RegExp('\\b'+cl+'\\b');var elem = this.getElementsByTagName('*');for (var i = 0; i < elem.length; i++) {var classes = elem[i].className;if (myclass.test(classes)) retnode.push(elem[i]);}return retnode;};function conv(codestr,decode) {var destr = '';for (var i = codestr.length - 1; i >= 0;i--) {var a = codestr.charCodeAt(i); if (a > 64 && a < 91) destr = decode.charAt(a-65)+destr; else destr = codestr.charAt(i)+destr;}return destr;}function displayCode(codestr,decode) {var cs = spLine(codestr,29);var destr = conv(cs,decode); var a = cs.replace(/\n/g,'<br \/>');var b = destr.replace(/\n/g,'<br \/>');return '<div id="cr"><h5>Cryptogram<\/h5><p class="fx">'+a+'<\/p><h5>My Decoded Version<\/h5><p class="dc fx">'+b+'<\/p><\/div>';}function spLine(st,n) {var b = ''; var s = st;while (s.length > n) {var c = s.substring(0,n);var d = c.lastIndexOf(' ');var e = c.lastIndexOf('\n');if (e != -1) d = e; b += c.substring(0,d) + '\n';s = s.substring(d+1);}return b+s;}function count(lt,str) {var cnt = 0;for (var i = str.length - 1; i >= 0; i--) if (lt == str.charAt(i)) cnt++;return cnt;}function freq(codestr) {var txt = '<table id="frq"><tr><td colspan="13">Letter Frequencies and Mapping<\/td><\/tr><tr>';for (var i = 0; i < 13; i++) txt += '<td>'+String.fromCharCode(65+i)+'<\/td>';txt += '<\/tr><tr>';for (var i = 0; i < 13; i++) txt += '<td class="dc">'+decode.charAt(i)+'<\/td>';txt += '<\/tr><tr>';for (var i = 0; i < 13; i++) txt += '<td>'+count(String.fromCharCode(65+i),codestr)+'<\/td>';txt += '<\/tr><tr><td colspan="13" class="dv"><\/td><\/tr><tr>';for (var i = 13; i < 26; i++) txt += '<td>'+String.fromCharCode(65+i)+'<\/td>';txt += '<\/tr><tr>';for (var i = 13; i < 26; i++) txt += '<td class="dc">'+decode.charAt(i)+'<\/td>';txt += '<\/tr><tr>';for (var i = 13; i < 26; i++) txt += '<td>'+count(String.fromCharCode(65+i),codestr)+'<\/td>';txt += '<\/tr><\/table>';return txt;}function undo() {for (var i = cyl.length - 1; i >= 0; i--)cyl[i].style.backgroundColor = '#fff';}function set(f,t) {if (f != '') {undo();from = f;document.getElementById('from'+f).style.backgroundColor = '#ccc';} if (t != '') {undo();to = t;document.getElementById('to'+t).style.backgroundColor = '#ccc';}if (from != '' && to != '' && from != to) {var r = ''; for (var i = 0; i < 26; i++) {var b = decode.charAt(i); if (i == from.charCodeAt(0)-65) r += to; else if (to == b) r += undf; else r += b;} decode = r; document.getElementById('crypto').innerHTML = displayCode(codestr,decode) + letterConv() + freq(codestr);}}function letterConv() {var txt = '<div id="lca"><span class="cy" onclick="decode = rs;document.getElementById(\'crypto\').innerHTML = displayCode(codestr,decode) + letterConv() + freq(codestr);"><restart><\/span><br \/>The Encrypted Letter<br \/>'; for(var i = 0; i < 26; i++) {myVar = String.fromCharCode(65+i);txt += '<span id="from'+myVar+'" class="cy" onclick="set(\''+myVar+'\',\'\');return false">'+myVar+'<\/span> ';} txt += '<br \/>represents<br \/>';for(var i = 0; i < 26; i++) {myVar = String.fromCharCode(65+i);txt += '<span id="to'+myVar+'" class="cy" onclick="set(\'\',\''+myVar+'\');return false">'+myVar+'<\/span> ';} txt += '<span id="toblk" class="cy" onclick="set(\'\',\''+undf+'\');return false">'+undf+'<\/span><\/div>'; return txt;}function start() {document.getElementById('crypto').innerHTML = displayCode(codestr,decode) + letterConv() + freq(codestr);cyl = document.getElementsByClassName('cy');}
var pageLoaded = 0;
window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {
if (document.getElementById &&
document.getElementById(i) != null) f();
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
loaded('crypto',start);

You then link the scripts into the head of your page using the following code (don't forget to change the name of the first script if you saved your array script to a different name):

<script src="cryptoarray.js" type="text/javascript">
</script>
<script src="cryptohead.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="crypto.css" />

As you can see, we have included code to link in a stylesheet. We had better get the cryptogram stylesheet next.

Stephen Chapman

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

©2009 About.com, a part of The New York Times Company.

All rights reserved.