<html>
<head>
<title>Contenteditable in Table Primer - RJM Programming - March, 2018</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type="text/javascript">
var x, y;
var ask='';
var sofar=',-1,';
var csofar=',';
var curp=0, fcurp=-1;
var prefix='';
if (document.URL.indexOf('https:') != -1) {
prefix='https:';
} else {
prefix='http:';
}

var mypictures = new Array(prefix + "//www.rjmprogramming.com.au/images/01c.gif",
prefix + "//www.rjmprogramming.com.au/images/01d.gif",
prefix + "//www.rjmprogramming.com.au/images/01h.gif",
prefix + "//www.rjmprogramming.com.au/images/01s.gif",
prefix + "//www.rjmprogramming.com.au/images/02c.gif",
prefix + "//www.rjmprogramming.com.au/images/02d.gif",
prefix + "//www.rjmprogramming.com.au/images/02h.gif",
prefix + "//www.rjmprogramming.com.au/images/02s.gif",
prefix + "//www.rjmprogramming.com.au/images/03c.gif",
prefix + "//www.rjmprogramming.com.au/images/03d.gif",
prefix + "//www.rjmprogramming.com.au/images/03h.gif",
prefix + "//www.rjmprogramming.com.au/images/03s.gif",
prefix + "//www.rjmprogramming.com.au/images/04c.gif",
prefix + "//www.rjmprogramming.com.au/images/04d.gif",
prefix + "//www.rjmprogramming.com.au/images/04h.gif",
prefix + "//www.rjmprogramming.com.au/images/04s.gif",
prefix + "//www.rjmprogramming.com.au/images/05c.gif",
prefix + "//www.rjmprogramming.com.au/images/05d.gif",
prefix + "//www.rjmprogramming.com.au/images/05h.gif",
prefix + "//www.rjmprogramming.com.au/images/05s.gif",
prefix + "//www.rjmprogramming.com.au/images/06c.gif",
prefix + "//www.rjmprogramming.com.au/images/06d.gif",
prefix + "//www.rjmprogramming.com.au/images/06h.gif",
prefix + "//www.rjmprogramming.com.au/images/06s.gif",
prefix + "//www.rjmprogramming.com.au/images/07c.gif",
prefix + "//www.rjmprogramming.com.au/images/07d.gif",
prefix + "//www.rjmprogramming.com.au/images/07h.gif",
prefix + "//www.rjmprogramming.com.au/images/07s.gif",
prefix + "//www.rjmprogramming.com.au/images/08c.gif",
prefix + "//www.rjmprogramming.com.au/images/08d.gif",
prefix + "//www.rjmprogramming.com.au/images/08h.gif",
prefix + "//www.rjmprogramming.com.au/images/08s.gif",
prefix + "//www.rjmprogramming.com.au/images/09c.gif",
prefix + "//www.rjmprogramming.com.au/images/09d.gif",
prefix + "//www.rjmprogramming.com.au/images/09h.gif",
prefix + "//www.rjmprogramming.com.au/images/09s.gif",
prefix + "//www.rjmprogramming.com.au/images/10c.gif",
prefix + "//www.rjmprogramming.com.au/images/10d.gif",
prefix + "//www.rjmprogramming.com.au/images/10h.gif",
prefix + "//www.rjmprogramming.com.au/images/10s.gif",
prefix + "//www.rjmprogramming.com.au/images/11c.gif",
prefix + "//www.rjmprogramming.com.au/images/11d.gif",
prefix + "//www.rjmprogramming.com.au/images/11h.gif",
prefix + "//www.rjmprogramming.com.au/images/11s.gif",
prefix + "//www.rjmprogramming.com.au/images/12c.gif",
prefix + "//www.rjmprogramming.com.au/images/12d.gif",
prefix + "//www.rjmprogramming.com.au/images/12h.gif",
prefix + "//www.rjmprogramming.com.au/images/12s.gif",
prefix + "//www.rjmprogramming.com.au/images/13c.gif",
prefix + "//www.rjmprogramming.com.au/images/13d.gif",
prefix + "//www.rjmprogramming.com.au/images/13h.gif",
prefix + "//www.rjmprogramming.com.au/images/13s.gif"
);

var sarray;


function shuffle() {
var cis='', lasti='', lasttitle='';
var ic=-1;
var rect = document.getElementById('ccell').getBoundingClientRect();
x=Math.floor(eval(('' + rect.left).replace('px','')));
y=Math.floor(eval(('' + rect.top).replace('px','')));
//alert(x + ',' + y);
for (var ii=mypictures.length; ii>=1; ii--) {
while (sofar.indexOf((',' + ic + ',')) != -1) {
ic=Math.floor(Math.random() * mypictures.length);
}
//sarray[eval(-1 + ii)]=mypictures[ic]; //sarray.push(mypictures[ic]);
sofar+='' + ic + ',';
//csofar='' + mypictures[ic].replace(prefix + '//www.rjmprogramming.com.au/images/','').replace('.gif','') + ',' + csofar;
csofar=',' + mypictures[ic] + csofar;
//document.title=sofar;
lasti=ic;
lasttitle=mypictures[ic];
if (lasttitle.indexOf('//www.rjmprogramming.com.au/images/') != -1) lasttitle=mypictures[ic].replace(prefix + '//www.rjmprogramming.com.au/images/','').replace('s.gif',' of spades').replace('d.gif',' of diamonds').replace('c.gif',' of clubs').replace('h.gif',' of hearts').replace('01','Ace').replace('11','Jack').replace('12','Queen').replace('13','King').replace('10','Ten').replace('0','').replace('Ten','10');
cis+='<img title="' + lasttitle + '" onclick="changethings(this.src);" id=i' + ii + ' style="position:absolute;top:' + eval(y + eval(ii * 5) - 5) + 'px;left:' + eval(x + eval(ii * 5) - 5) + 'px;" src="' + mypictures[lasti] + '"></img>'; // + cis;
}
cis+='<img title="Reshuffle on ' + lasttitle + '" onclick="location.href=document.URL;" id=i0 style="position:absolute;top:' + eval(y) + 'px;left:' + eval(x) + 'px;" src="' + mypictures[lasti] + '"></img>'; // + cis;
sarray=csofar.substring(1).split(',');
//alert(cis);
//document.getElementById('myh3').innerHTML=csofar;
document.getElementById('ccell').innerHTML=cis;
document.getElementById('hcell').innerHTML=mypictures[lasti];
document.getElementById('hcell').title=mypictures[lasti].replace(prefix + '//www.rjmprogramming.com.au/images/','').replace('s.gif',' of spades').replace('d.gif',' of diamonds').replace('c.gif',' of clubs').replace('h.gif',' of hearts').replace('01','Ace').replace('11','Jack').replace('12','Queen').replace('13','King').replace('10','Ten').replace('0','').replace('Ten','10');
setTimeout(nextone, 10000);
}

function nextone() {
if (fcurp >= 0) {
curp=fcurp;
} else {
curp=eval((curp + 1) % sarray.length);
}
fcurp=-1;
for (var ii=0; ii<mypictures.length; ii++) {
document.getElementById('i' + eval(1 + ii)).src=sarray[eval(eval(0 + curp + ii) % mypictures.length)];
document.getElementById('i' + eval(1 + ii)).title=sarray[eval(eval(0 + curp + ii) % mypictures.length)].replace(prefix + '//www.rjmprogramming.com.au/images/','').replace('s.gif',' of spades').replace('d.gif',' of diamonds').replace('c.gif',' of clubs').replace('h.gif',' of hearts').replace('01','Ace').replace('11','Jack').replace('12','Queen').replace('13','King').replace('10','Ten').replace('0','').replace('Ten','10');
}
document.getElementById('i0').src=sarray[eval(eval(0 + curp) % mypictures.length)];
if (document.getElementById('i0').src.indexOf('//www.rjmprogramming.com.au/images/') != -1) {
document.getElementById('i0').title='Reshuffle on ' + sarray[eval(eval(0 + curp) % mypictures.length)].replace(prefix + '//www.rjmprogramming.com.au/images/','').replace('s.gif',' of spades').replace('d.gif',' of diamonds').replace('c.gif',' of clubs').replace('h.gif',' of hearts').replace('01','Ace').replace('11','Jack').replace('12','Queen').replace('13','King').replace('10','Ten').replace('0','').replace('Ten','10');
document.getElementById('hcell').title=sarray[eval(eval(0 + curp) % mypictures.length)].replace(prefix + '//www.rjmprogramming.com.au/images/','').replace('s.gif',' of spades').replace('d.gif',' of diamonds').replace('c.gif',' of clubs').replace('h.gif',' of hearts').replace('01','Ace').replace('11','Jack').replace('12','Queen').replace('13','King').replace('10','Ten').replace('0','').replace('Ten','10');
} else {
document.getElementById('i0').title='Reshuffle on ' + sarray[eval(eval(0 + curp) % mypictures.length)];
document.getElementById('hcell').title=sarray[eval(eval(0 + curp) % mypictures.length)];
}
document.getElementById('hcell').innerHTML=sarray[eval(eval(0 + curp) % mypictures.length)];
setTimeout(nextone, 10000);
}

function changethings(tiv) {
var done=false;
if (tiv.indexOf(',') != -1) {
location.href=document.URL.split('#')[0].split('?')[0] + '?ask=' + encodeURIComponent(tiv);
}
for (var jj=1; jj<=sarray.length; jj++) {
if (!done && tiv == sarray[eval(-1 + jj)]) {
done=true;
//alert(document.getElementById('i' + jj).src);
fcurp=eval(-1 + jj);
for (var ii=0; ii<mypictures.length; ii++) {
//if (ii == 0) alert('' + eval(eval(1 + fcurp + ii) % mypictures.length) + ' ... ' + sarray[-1 + eval(eval(1 + fcurp + ii) % mypictures.length)]);
document.getElementById('i' + eval(1 + ii)).src=sarray[eval(eval(0 + fcurp + ii) % mypictures.length)];
if (document.getElementById('i' + eval(1 + ii)).src.indexOf('//www.rjmprogramming.com.au/images/') != -1) {
document.getElementById('i' + eval(1 + ii)).title=sarray[eval(eval(0 + curp + ii) % mypictures.length)].replace(prefix + '//www.rjmprogramming.com.au/images/','').replace('s.gif',' of spades').replace('d.gif',' of diamonds').replace('c.gif',' of clubs').replace('h.gif',' of hearts').replace('01','Ace').replace('11','Jack').replace('12','Queen').replace('13','King').replace('10','Ten').replace('0','').replace('Ten','10');
} else {
document.getElementById('i' + eval(1 + ii)).title=sarray[eval(eval(0 + curp + ii) % mypictures.length)];
}
}
document.getElementById('hcell').innerHTML=tiv;
if (tiv.indexOf('//www.rjmprogramming.com.au/images/') != -1) {
document.getElementById('hcell').title=tiv.replace(prefix + '//www.rjmprogramming.com.au/images/','').replace('s.gif',' of spades').replace('d.gif',' of diamonds').replace('c.gif',' of clubs').replace('h.gif',' of hearts').replace('01','Ace').replace('11','Jack').replace('12','Queen').replace('13','King').replace('10','Ten').replace('0','').replace('Ten','10');
document.getElementById('i0').title='Reshuffle on ' + tiv.replace(prefix + '//www.rjmprogramming.com.au/images/','').replace('s.gif',' of spades').replace('d.gif',' of diamonds').replace('c.gif',' of clubs').replace('h.gif',' of hearts').replace('01','Ace').replace('11','Jack').replace('12','Queen').replace('13','King').replace('10','Ten').replace('0','').replace('Ten','10');
} else {
document.getElementById('hcell').title=tiv;
document.getElementById('i0').title='Reshuffle on ' + tiv;
}
document.getElementById('i0').src=tiv;
}
}
}

function myask() {
var huha=prompt('Enter comma separated URL list using double quote delimitation.','');
if (huha != null) {
if (huha != '') {
if (huha.indexOf('"') == -1) {
if (huha.indexOf("'") != -1) {
huha=huha.replace(/\'/g,'"');
} else {
huha=('"' + huha + '"').replace(/\,/g,'","');
}
}
eval('mypictures=[' + huha + '];');
document.getElementById('carda').innerHTML='a';
prefix='';
if (huha.indexOf('https:') != -1) {
prefix='https:';
} else {
prefix='http:';
}
}
}
}

</script>
</head>
<body onload="ask=(location.search.split('ask=')[1] ? decodeURIComponent(location.search.split('ask=')[1].split('&')[0]) : ask); if (ask.indexOf(',') != -1) { if (ask.indexOf(String.fromCharCode(39)) != -1 || ask.indexOf(String.fromCharCode(34)) != -1) { document.getElementById('carda').innerHTML='a'; prefix=''; if (ask.indexOf('https:') != -1) { prefix='https:'; } else { prefix='http:'; } if (ask.indexOf(String.fromCharCode(39)) != -1) { eval('mypictures=[' + ask + ']'); } else { eval('mypictures=[' + ask + '];'); } } else { eval('mypictures=[' + String.fromCharCode(34) + ask.replace(/\,/g,String.fromCharCode(34) + ',' + String.fromCharCode(34)) + String.fromCharCode(34) + '];'); } } else if (ask != '') { myask(); } shuffle();" style='border:5px solid green; padding: 4px 4px 4px 4px;'>
<h1 id='myh1'>Contenteditable in <a onclick="location.href=document.URL.split('#')[0].split('?')[0] + '?ask=y';" title="Comma separated URL data list source by clicking here, or if you are quick enough, into the table cell header contenteditable field below (probably via a paste command, followed by a tabbing out)." style="cursor:pointer:text-decoration:underline;" id="carda">Card</a> Table Primer</h1>
<h3 id='myh3'>RJM Programming - March, 2018</h3>
<table cellpadding=8>
<tr><th id='hcell' contenteditable=true onblur='changethings(this.innerHTML);' style='border:1px solid pink;'>Editable Heading Cell</th></tr>
<tr><td id='ccell'>Editable Cell</td></tr>
</table>
<input type=text value='' style='position:absolute;top:-120px;left:-120px;'></input>
</body>
</html>