{"id":71827,"date":"2026-01-27T03:01:00","date_gmt":"2026-01-26T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=71827"},"modified":"2026-01-28T18:44:38","modified_gmt":"2026-01-28T08:44:38","slug":"diagonal-element-nesting-analogue-clock-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/diagonal-element-nesting-analogue-clock-tutorial\/","title":{"rendered":"Diagonal Element Nesting Analogue Clock Tutorial"},"content":{"rendered":"
\"Diagonal<\/a>

Diagonal Element Nesting Analogue Clock Tutorial<\/p><\/div>\n

Those two diagonal lines produced in yesterday’s Diagonal Element Nesting Tutorial<\/a> made us wonder …<\/p>\n

\nWhat can you build with controlled rotation and involving two diagonal elements?\n<\/p><\/blockquote>\n

… and, of course, your Local Time Analogue Clock with it’s hour hand and minute hand is an example. And so we set forth creating that, featuring new Javascript<\/font> …<\/p>\n


\n function andthen() {
\n var tds=document.getElementsByTagName('td');
\n ourtwo=1;
\n for (var itds=0; itds<tds.length; itds++) {
\n if (('' + tds[itds].id).indexOf('cell') == 0) {
\n if (eval('' + tds[itds].innerText.length) < 7) {
\n \/\/alert(tds[0].innerHTML.split('rotate(')[1].split('deg')[0]);
\n var zx=(tds[0].innerHTML.replace(\/sub\/g,'sup').replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(360 - ten)).replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(360 - ten)).replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(360 - ten)).replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(360 - ten)));
\n ten=eval(-1 * ten);
\n ourtwo=itds;
\n tds[itds].innerHTML=tds[0].innerHTML.replace(' style=\"',' style=\"color:blue;margin-top:-256px;').replace(\/0001\/g,'0002').replace(\/sub\/g,'sup').replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(ten)).replace(\/\\,\\-20px\/g,',32px');
\n document.getElementById(('' + tds[itds].id).replace('cell','ecll')).innerHTML='<textarea rows=17 cols=80 id=' + ('' + tds[itds].id).replace('cell','taecll') + ' onblur=tait(this); style=width=100%;>' + document.getElementById('cell' + ('0000' + curcellnum).slice(-4)).innerHTML.replace(' style=\"',' style=\"color:blue;margin-top:-256px;').replace(\/0001\/g,'0002').replace(\/sub\/g,'sup').replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(ten)).replace(\/\\,\\-20px\/g,',32px') + '<\/textarea>';
\n } else {
\n tds[itds].innerHTML=tds[itds].innerHTML.replace(\/background\\-color\\:\\ pink\\;\/g, 'background-color: white;').replace(\/background\\-color\\:pink\\;\/g, 'background-color:white;');
\n document.getElementById(('' + tds[itds].id).replace('cell','ecll')).innerHTML='<textarea rows=17 cols=80 id=' + ('' + tds[itds].id).replace('cell','taecll') + ' onblur=tait(this); style=width=100%;>' + document.getElementById('cell' + ('0000' + curcellnum).slice(-4)).innerHTML + '<\/textarea>';
\n }
\n }
\n }
\n var recto=document.getElementById('fibothone').getBoundingClientRect();
\n \/\/document.getElementById('fibothtwo').style.position='absolute';
\n \/\/document.getElementById('fibothtwo').style.left='' + recto.left + 'px';
\n \/\/document.getElementById('fibothtwo').style.top='' + recto.top + 'px';
\n \/\/document.getElementById('fibothtwo').style.width='' + recto.width + 'px';
\n \/\/document.getElementById('fibothtwo').style.height='' + recto.height + 'px';<\/font>
\n document.getElementById('ifbothone').srcdoc=maybeclock(<\/font>tds[0].innerHTML.replace(' style=\"', ' style=\"margin-top:0px;margin-left:0px;'))<\/font>;
\n document.getElementById('ifbothtwo').srcdoc=tds[ourtwo].innerHTML;
\n recto=document.getElementById('ifbothone').getBoundingClientRect();
\n document.getElementById('ifbothtwo').style.position='absolute';
\n document.getElementById('ifbothtwo').style.left='' + recto.left + 'px';
\n document.getElementById('ifbothtwo').style.top='' + recto.top + 'px';
\n document.getElementById('ifbothtwo').style.width='' + recto.width + 'px';
\n document.getElementById('ifbothtwo').style.height='' + recto.height + 'px';
\n recto=document.getElementById('fibothone').getBoundingClientRect();
\n document.getElementById('fibothtwo').style.position='absolute';
\n document.getElementById('fibothtwo').style.left='' + recto.left + 'px';
\n document.getElementById('fibothtwo').style.top='' + recto.top + 'px';
\n document.getElementById('fibothtwo').style.width='' + recto.width + 'px';
\n document.getElementById('fibothtwo').style.height='' + recto.height + 'px';
\n document.getElementById('fiboththree').style.position='absolute';
\n document.getElementById('fiboththree').style.left='' + recto.left + 'px';
\n document.getElementById('fiboththree').style.top='' + recto.top + 'px';
\n document.getElementById('fiboththree').style.width='' + recto.width + 'px';
\n document.getElementById('fiboththree').style.height='' + recto.height + 'px';<\/font>
\n }
\n
\n function premaybeclock() {
\n if (glinh != '') {
\n \/\/alert('ct=' + ct + ' and glinh=' + glinh);
\n maybeclock(glinh);
\n }
\n }
\n
\n function minuteang() {
\n var tss=('' + new Date());
\n cconto.body.title=tss;
\n document.getElementById('fiboththree').title=tss;
\n var th=eval(tss.split(':')[0].split(' ')[eval(-1 + tss.split(':')[0].split(' ').length)] % 12);
\n var tm=eval(tss.split(':')[1]);
\n var ts=eval(tss.split(':')[2].split(' ')[0].split('.')[0]);
\n tm+=eval(ts \/ 60);
\n return '' + eval((90 + tm * 6) % 360);
\n }
\n
\n function hourang() {
\n var tss=('' + new Date());
\n var th=eval(tss.split(':')[0].split(' ')[eval(-1 + tss.split(':')[0].split(' ').length)] % 12);
\n var tm=eval(tss.split(':')[1]);
\n var ts=eval(tss.split(':')[2].split(' ')[0].split('.')[0]);
\n th+=eval(tm \/ 60);
\n th+=eval(ts \/ (60 * 60));
\n return '' + eval((90 + th * 30) % 360);
\n }
\n
\n function maybeclock(linh) {
\n var absbit='position:absolute;top:350px;left:300px;';
\n var rotv=linh.split('rotate(')[1].split('deg')[0];
\n var thisfs=linh.split('font-size:')[1].split('px')[0];
\n var huh='<br><br><br><br><br><br><br><br><br><br><br><br>';
\n document.getElementById('fibothone').srcdoc='' + linh.replace('>' + document.getElementById('chars').value + '<\/su', ' id=lastsu>' + document.getElementById('chars').value + '<\/su').replace('margin-top:','padding-top:').replace('margin-left:','padding-left:').replace('rotate(' + rotv,'rotate(' + hourang()).replace(' style=\"', ' style=\"' + ct + cl + absbit + 'transform-origin:50% 33%;') + '<style> sub:last-of-type { font-weight:bold; color: olive !important; } sup:last-of-type { font-weight:bold; color: olive !important; } <\/style>'; \/\/.replace(\/inline\\-block\\;\/g, 'inline;');
\n var origlinh=linh;
\n if (glinh == '') {
\n glinh=linh.replace('margin-top:','padding-top:').replace('margin-left:','padding-left:');
\n setInterval(premaybeclock, 5000);
\n }
\n while (origlinh.indexOf('font-size:' + thisfs + 'px') != -1) {
\n origlinh=origlinh.replace('font-size:' + thisfs + 'px', 'font-size:' + eval(-3 + eval('' + thisfs)) + 'px');
\n }
\n document.getElementById('fibothtwo').srcdoc='' + origlinh.replace('>' + document.getElementById('chars').value + '<\/su', ' id=lastsu>' + document.getElementById('chars').value + '<\/su').replace('margin-top:','padding-top:').replace('margin-left:','padding-left:').replace('rotate(' + rotv,'rotate(' + minuteang()).replace(' style=\"', ' style=\"' + absbit + 'text-shadow:-0.5px 0.5px 0.5px #95ff2d;transform-origin:50% 33%;color:rgba(0,0,255,0.4);') + '<style> sub:last-of-type { font-weight:bold; color: pink !important; } sup:last-of-type { font-weight:bold; color: pink !important; } <\/style>'; \/\/ + \"<style>.logo { width: 100vw; height: 100vh; position: relative; } .logo__svg { width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}<\/style><div class=\\\"logo\\\"><svg class=\\\"logo__svg\\\"><circle cx=\\\"50%\\\" cy=\\\"50%\\\" r=\\\"150\\\" style=\\\"fill:rgba(255,0,0,0.6);stroke:white;stroke-width:1;\\\"\/><\/svg><\/div>\"; \/\/.replace(\/inline\\-block\\;\/g, 'inline;');
\n document.getElementById('fiboththree').srcdoc=\"<head><title>\" + ('' + new Date()) + \"<\/title><style> .logo { width: 100vw; height: 100vh; position: relative; } .logo__svg { width: 312px; height: 312px; position: absolute; top: 47%; left: 49%; transform: translate(-50%, -50%); } <\/style><\/head><body id=xbody><div class=\\\"logo\\\"><svg class=\\\"logo__svg\\\"><circle cx=\\\"50%\\\" cy=\\\"50%\\\" r=\\\"155\\\" style=\\\"fill:rgba(255,0,0,1);stroke:white;stroke-width:1;\\\"\/><\/svg><\/div><\/body>\"; \/\/.replace(\/inline\\-block\\;\/g, 'inline;');
\n return linh;
\n }<\/font>
\n<\/code><\/p>\n

And so, again, feel free to try out this the changed<\/a> second draft<\/a> Nested Diagonal Elements<\/a> web application below<\/a>.<\/p>\n

\n

\n

Previous relevant Diagonal Element Nesting Tutorial<\/a> is shown below.<\/p>\n

\"Diagonal<\/a>

Diagonal Element Nesting Tutorial<\/p><\/div>\n

A variation on yesterday’s Nesting Primer Tutorial<\/a>, as well as being inspired by that work is today’s …<\/p>\n

    \n
  1. diagonal element … via …<\/li>\n
  2. nested …\n
      \n
    • display: inline;<\/li>\n
    • display: inline-block;<\/li>\n<\/ul>\n

      … <\/p>\n

        \n
      • sub<\/i><\/a> topleft<\/sup> to bottomright<\/sup> diagonal componentry element look<\/li>\n
      • sup<\/i><\/a> bottomleft<\/sup> to topright<\/sup> diagonal componentry element look<\/li>\n<\/ul>\n

        … we noticed working (ie. achieving nested “diagonal<\/a>it<\/sup>y<\/a>“) yesterday<\/font>\n<\/li>\n<\/ol>\n

        … functionality. Yes, this might be thought of as “overkill” compared to …<\/p>\n

          \n
        • hr<\/i> element rotations … and\/or …<\/li>\n
        • SVG<\/li>\n<\/ul>\n

          … arguably easier means to achieve a “diagonal element” look. Nevertheless, the more ways to achieve an objective up your sleeve, the better, we reckon!<\/p>\n

          Again, feel free to try out this proof of concept<\/a> Nested Diagonal Elements<\/a> web application below …<\/p>\n