A Table Generator

This is a simple app that creates and copies the code for tables that can be pasted into web pages.

Here is an example:

This is the code:

!DOCTYPE HTML>
html>
head>style>
input{position: relative;width:60px}
table{position: relative}
/style>/head>
body>
div id= “frame” style= “position: absolute; width: 100%; height: 100%; top: 50px”>/div>
center>input type = “text” id=”t5″ value=”” placeholder=”width” /> input type = “text” id=”t1″ value=”” placeholder=”# rows” /> input type = “text” id=”t2″ value=”” placeholder=”# cols” /> select id=”s1″>option>table/option>option>cell/option>/select> select id=”s2″>option>border/option>option>solid/option>option>ridge/option>option>groove/option>option>outset/option>option>inset/option>/select> select id=”s3″>option>border width/option>option>0/option>option>1/option>option>2/option>option>3/option>option>4/option>option>5/option>option>6/option>option>7/option>option>8/option>option>9/option>option>10/option>/select> select id=”s4″ onchange=’op();’>option>operation/option>option>create/option>option>save/option>/select>/center>
textarea id=”ta” Style = “position: absolute; width: 100%; height: 100%; top: 101%; background-color: #dddddd”>/textarea>

script>
var wd = “”; var ht = “”; var rows; var cols; var bw;
function op() {
if (document.getElementById(“s4”).value == “save”) {
sve();
} else {
bw = document.getElementById(“s3”).value + “px”;
rows = document.getElementById(“t1”).value; cols = document.getElementById(“t2”).value;
wd = document.getElementById(“t5”).value; var bd = document.getElementById(“s2”).value; //ht = “300px”;
var str = ‘center>table id=”tb” style = “border: ‘ + bw + ‘ ‘ + bd + ‘; border-collapse: collapse; text-align: center; width: ‘ + wd + ‘; height: ‘ + ht + ‘”>’;
for (var j = 1; j = rows; j ++ ) {
str += ‘tr>’;
for (var i = 1; i = cols; i ++ ) {
str += ‘td id = “td’ + j + i + ‘” style= “position: relative;padding:2px 10px; height: 50px; border: ‘ + bw + ‘ ‘ + bd + ‘” contenteditable = “true”>cell’ + j + i + ‘/td> ‘;
if (i == cols) str += “/tr>”
}
}
str += ‘/table>/center>’;
document.getElementById(“frame”).innerHTML = str;
}
}

function sve() {
document.getElementById(“ta”).value = document.getElementById(“frame”).innerHTML;
document.getElementById(“ta”).focus();
document.getElementById(“ta”).select();
success = document.execCommand(“copy”);
}
/script>
/body>/html>

The main function is called op().
A select with two options links to it. If “save” is chosen sve() is called:
function sve() {
document.getElementById(“ta”).value = document.getElementById(“frame”).innerHTML;
document.getElementById(“ta”).focus();
document.getElementById(“ta”).select();
success = document.execCommand(“copy”);
}

The table code is copied to a textarea which is then selected and its contents copied to the clipboard.

If “create” is chosen the following code creates the table:
bw = document.getElementById(“s3”).value + “px”;
rows = document.getElementById(“t1”).value; cols = document.getElementById(“t2”).value;
wd = document.getElementById(“t5”).value; var bd = document.getElementById(“s2”).value; //ht = “300px”;
var str = ”; for (var j = 1; j <= rows; j ++ ) { str += ”; for (var i = 1; i <= cols; i ++ ) { str += ‘ ‘; if (i == cols) str += “” } } str += ‘

cell’ + j + i + ‘

‘;
document.getElementById(“frame”).innerHTML = str;

The cells are contenteditable, which is then saved.

A width can be set for either the table or the cells.

The border style and border width can be set from select elements.

HTML Slideshow

This app creates slideshows for web pages.
It can be moved on the page and the individual images can be independently resized. There is a frame around each image which is automatically resized to fit the image.

This is a example;

It can either be saved, or the text between the body tags can be copied and pasted into another web page to add a slideshow.

This is the code:

chooseA-E/F-J/K-O/P-R/S-T/Animated GIF/


large change

The file element is set for multiple selection:

The image files are set in an array:

for (var i = 0; i < files.files.length; i ++) {
vals[i] = fld + files.files[i].name;
}

changing the file element calls the function go() which starts the slideshow:
si = setInterval(“show()”, per);

per by default is 2 seconds but can be set.

show() loads the images:
if (cnt < vals.length) cnt ++; cnt = cnt % vals.length; cnt4 ++; if (cnt < vals.length) document.getElementById(“frame”).innerHTML = ‘‘;

the images cannot be sized until they are fully loaded so a slight delay is set by calling the function dummy():

setTimeout(“dummy()”,50);

The images are set once to their initial size:
if (cnt4 <= vals.length) setTimeout(“sz()”,100); function sz() { if (doc[cnt].clientWidth > doc[cnt].clientHeight) {
w[cnt] = 400;
h[cnt] = Math.round(400 * (doc[cnt].clientHeight/doc[cnt].clientWidth));
}
if (doc[cnt].clientHeight > doc[cnt].clientWidth){
h[cnt] = 400;
w[cnt] = Math.round(400 * (doc[cnt].clientWidth/doc[cnt].clientHeight));
}

}

show2() is then called which sizes the frame to fit:
setTimeout(‘show2()’,100);
function show2() {
doc[cnt].style.width = w[cnt] + “px”;
doc[cnt].style.height = h[cnt] + “px”;
var ml = doc.clientWidth/2;
ml = -ml;
document.getElementById(“frame”).style.width = doc[cnt].clientWidth + “px”;
document.getElementById(“frame”).style.height = doc[cnt].clientHeight + “px”;
document.getElementById(“frame”).style.top = t + “px”;
document.getElementById(“frame”).style.marginLeft = ml + “px”;
doc[cnt].style.visibility = “visible”;

}

There is a keydown listener to move and size the images:
document.addEventListener(‘keydown’, (e) => {
if (e.key == “t”) act = “top”;
if (e.key == “l”) act = “left”;
if (e.key == “w”) act = “width”;
if (e.key == “s”) sve();

 if (e.key == "=") {

   if (act == "top") {
     t ++ ;
     document.getElementById("frame").style.top = t + "px";
   }

   if (act == "left") {
    l ++ ;
     document.getElementById("frame").style.left = l + "px";
   }

   if (act == "width") {
     inc = 20;
 if (doc[cnt].clientWidth > doc[cnt].clientHeight) {
 w[cnt] += inc;
 h[cnt] = Math.round(w[cnt] * (doc[cnt].clientHeight/doc[cnt].clientWidth));
 }
 if (doc[cnt].clientHeight > doc[cnt].clientWidth) {
 h[cnt] +=Math.round(inc * (screen.height/screen.width));
 w[cnt] = Math.round(h[cnt] * (doc[cnt].clientWidth/doc[cnt].clientHeight));
 }
 w2 = w;
 h2 = h;
 }
 }

 if (e.key == "-") {
   if (act == "top") {
     t ++ ;
     document.getElementById("frame").style.top = t + "px";
   }

   if (act == "left") {
    l -- ;
     document.getElementById("frame").style.left = l + "px";
   }
    if (act == "width") {
     inc = -20;
 if (doc[cnt].clientWidth > doc[cnt].clientHeight) {
 w[cnt] += inc;
 h[cnt] = Math.round(w[cnt] * (doc[cnt].clientHeight/doc[cnt].clientWidth));
 }
 if (doc[cnt].clientHeight > doc[cnt].clientWidth) {
 h[cnt] +=Math.round(inc * (screen.height/screen.width));
 w[cnt] = Math.round(h[cnt] * (doc[cnt].clientWidth/doc[cnt].clientHeight));
 }
 w2 = w;
 h2 = h;
 }
 }

 });

The images are moved by moving the frame:
if (e.key == “=”) {

   if (act == "top") {
     t ++ ;
     document.getElementById("frame").style.top = t + "px";
   }

   if (act == "left") {
    l ++ ;
     document.getElementById("frame").style.left = l + "px";
   }

The images are resized individually by the keydown:
if (act == “width”) {
inc = 20;
if (doc[cnt].clientWidth > doc[cnt].clientHeight) {
w[cnt] += inc;
h[cnt] = Math.round(w[cnt] * (doc[cnt].clientHeight/doc[cnt].clientWidth));
}
if (doc[cnt].clientHeight > doc[cnt].clientWidth) {
h[cnt] +=Math.round(inc * (screen.height/screen.width));
w[cnt] = Math.round(h[cnt] * (doc[cnt].clientWidth/doc[cnt].clientHeight));
}
w2 = w;
h2 = h;
}
}

The frame is then resized when the show2() function is called evert 100ms.

The position can be changed by small or large amounts:
if (document.getElementById(“c1”).checked) inc = .5;
if (! document.getElementById(“c1”).checked) inc = .1;

The sve() function places the code for the slideshow into a textarea:
function sve() {
wd = ‘[‘;
for (var i = 0; i < w2.length; i ++) {
wd += w2[i] + ‘,’;
}
wd = wd.substr(0,wd.length – 1);
wd += ‘]’;

ht = '[';
for (var i = 0; i < h2.length; i ++) {
ht += h2[i] + ',';
}
ht = ht.substr(0,wd.length - 1);
ht += ']';

 ta.value = '<!DOCTYPE HTML><html><body>';
 ta.value +=  '<div id="frame" style = "position: absolute; width: 400px; height: 400px; margin-left: -200px; top: 40px; left: 50%;  border: 8px ridge"></div><script>\n';
 ta.value += 'var vals = [];var si; var cnt = -1; var doc;';

ta.value += ‘var fld = “‘ + fld + ‘”; var w = ‘ + wd + ‘; var i; var h = ‘ + ht + ‘; var sze = true; var t = ‘ + t + ‘; var l = ‘ + l + ‘;’;
ta.value += ‘ var cnt4 = -1; var act; var inc; var per = 2000; var oldURL = “tmp.html”; var ta = document.getElementById(“ta”); var pic; var val;’;
ta.value += ‘per = ‘ + per + ‘; clearInterval(si);’;

 val = '[';
for (var i = 0; i < vals.length; i ++) {
val += '"' + vals[i] + '",';
}
val = val.substr(0,val.length - 1);
val += ']';

ta.value += ‘vals = ‘ + val + ‘;’;
ta.value += ‘ si = setInterval(“show()”,’ + per + ‘);’;
ta . value += ‘function dummy() { } function sz() { }’;

 ta.value += 'function show() {      if (cnt < vals.length) cnt ++;      cnt = cnt % vals.length;      cnt4 ++;    if (cnt < vals.length) document.getElementById("frame").innerHTML = \'<img id="im\' + cnt + \'" + src = "\' + vals[cnt] + \'" />\';    setTimeout("dummy()",50);    doc = document.getElementById("im" + cnt);    if (cnt4 <= vals.length) setTimeout("sz()",100);    doc.style.visibility = "hidden";    setTimeout(\'show2()\',100); }    function show2() {      doc.style.width = w[cnt] + "px";      doc.style.height = h[cnt] + "px";      var ml = doc.clientWidth/2;      ml = -ml;     document.getElementById("frame").style.width =  doc.clientWidth + "px";     document.getElementById("frame").style.height =  doc.clientHeight + "px";     document.getElementById("frame").style.top =  t + "px";  document.getElementById("frame").style.left =  l + "px"; document.getElementById("frame").style.marginLeft = ml + "px";     doc.style.visibility = "visible";}';
 ta.value += '<\/script></body></html>';

}

Where it can be copied and pasted

A non dropdown “select”

This is a simulated “select” element in which the elements are not drop-down.

This is the code:

The options are set as items of an array. The “select” element is actually a layer in which the innerHTML is loaded by selecting an index of the array by means of keys:
var cnt = 0;
function setOption(e) {
if (e.keyCode == 187) cnt ++;
if (e.keyCode == 189) cnt –;

document.getElementById(“sel”).innerHTML = opt[cnt];

The indices recycle if the upper or lower limits of the array are exceeded:
if (document.getElementById(“sel”).innerHTML == “undefined” && cnt > opt.length -2) {
cnt = 0;
document.getElementById(“sel”).innerHTML = “item1”;
}
if (document.getElementById(“sel”).innerHTML == “undefined” && cnt < opt.length -2) {
cnt = 9;
document.getElementById(“sel”).innerHTML = “item10”;
}

In this example the choice of an “option” by either clicking the layer or hitting Enter lists the chosen value in an alert, but any other action could be programmed.