Email

Filed In:

JavaScript

Cryptogram Script

3. Crypto Head Script

More of this Feature

Introduction Array Script Alternate Script Stylesheet/HTML

There are two scripts that you need to incorporate into the head of your web page to put a cryptogram on the page. The first of these is the array script that you have already generated with your texts in it. The second script is always the same code and is the one that does most of the work.

I have actually created two versions of this script. The one on this page reloads the whole page each time a selection is made (useful for displaying a selection of ads etc while people are visiting. The alternate version doesn't reload the page.

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

// Cryptogram Javascript
// copyright 18th 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 page = self.location.toString(); page = page.substr(0,page.indexOf('?'));var qsParm = new Array();function qs() {var query = window.location.search.substring(1);var parms = query.split('&');for (var i=0; i<parms.length; i++) {var pos = parms[i].indexOf('=');if (pos > 0) {var key = parms[i].substring(0,pos);var val = parms[i].substring(pos+1);qsParm[key] = val;}}}qsParm['w'] = null;qsParm['c'] = null;qs();var rs = decode = '--------------------------'; var undf = '-';if (qsParm['w']) decode = qsParm['w'];if (qsParm['c']) codenum = qsParm['c']; 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;} top.location = page + '?c='+codenum+'&w='+r;}}function letterConv() {var txt = '<div id="lca"><span class="cy" onclick="decode = rs;top.location = page + \'?c=\'+codenum"><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.