{"id":71868,"date":"2026-01-29T03:01:00","date_gmt":"2026-01-28T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=71868"},"modified":"2026-01-28T19:39:02","modified_gmt":"2026-01-28T09:39:02","slug":"diagonal-element-square-nesting-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/diagonal-element-square-nesting-tutorial\/","title":{"rendered":"Diagonal Element Square Nesting Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Diagonal Element Square Nesting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley_square.jpg\" title=\"Diagonal Element Square Nesting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Diagonal Element Square Nesting Tutorial<\/p><\/div>\n<p>We&#8217;re adding onto the day before yesterday&#8217;s <a title='Diagonal Element Nesting Analogue Clock Tutorial' href='#denact'>Diagonal Element Nesting Analogue Clock Tutorial<\/a> some diagonal &#8230;<\/p>\n<ul>\n<li>display: inline;<\/li>\n<li>display: inline-block;<\/li>\n<\/ul>\n<p> &#8230; nested diagonals across a square, testing more placement accuracy concepts &#8230;<\/p>\n<p><code> function analyze(iois) {<br \/>\n   var arecto=null, brecto=null, brecto=null, elesa=[], subsups=[], huh='';<br \/>\n   if (!oktolook) { return ''; }<br \/>\n   if (iois != null) {<br \/>\n   var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n   if (aconto != null) {<br \/>\n   if (aconto.document) { aconto = aconto.document; }<br \/>\n   if (aconto.body != null) {<br \/>\n     elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('&lt;')[2].split(' ')[0].split('&gt;')[0]);<br \/>\n     for (var ivb=0; ivb&lt;elesa.length; ivb+=eval(elesa.length \/ 2)) {<br \/>\n       arecto=elesa[ivb].getBoundingClientRect();<br \/>\n       if (ivb == 0 && iois.id == 'ifleft') {<br \/>\n         subsups=aconto.getElementsByTagName('sub');<br \/>\n         brecto=subsups[0].getBoundingClientRect();<br \/>\n         crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();<br \/>\n         huh='arecto brecto crecto ' + String.fromCharCode(10);<br \/>\n         huh+='  left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);<br \/>\n         huh+='   top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);<br \/>\n         huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);<br \/>\n         huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);<br \/>\n         aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; \/\/'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';<br \/>\n         \/\/prompt(huh,'one;' + iois.id);<br \/>\n         \/\/aconto.body.innerHTML+='&lt;div style=\"position:absolute;left:' + Math.max(0,arecto.left) + 'px;top:' + brecto.top + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(255,0,0,0.5);\"&gt;&lt;\/div&gt;';<br \/>\n         elesa[ivb].style.left='50px';<br \/>\n         elesa[ivb].style.marginTop='75px';<br \/>\n         for (var iop=0; iop&lt;15; iop++) {<br \/>\n         elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('&lt;\/sub&gt;','') + subsups[eval(-1 + subsups.length)].outerHTML + '&lt;\/sub&gt;');<br \/>\n         }<br \/>\n         lconto=aconto;<br \/>\n         lconto.querySelectorAll('sub').forEach(xsub =&gt; {<br \/>\n         xsub.addEventListener('click', () =&gt; {<br \/>\n           alert('Diagonal to square 276 x 276 ... ' + (eval(276 \/ Math.sin(45))) + ' pixels long');<br \/>\n         });<br \/>\n         });<br \/>\n       } else {<br \/>\n         subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('&lt;\/su')[1].split('&gt;')[0]);<br \/>\n         brecto=subsups[0].getBoundingClientRect();<br \/>\n         crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();<br \/>\n         huh='arecto brecto crecto ' + String.fromCharCode(10);<br \/>\n         huh+='  left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);<br \/>\n         huh+='   top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);<br \/>\n         huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);<br \/>\n         huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);<br \/>\n         if (iois.id == 'ifright') {<br \/>\n         elesa[ivb].style.left='50px';<br \/>\n         subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('&lt;\/su')[1].split('&gt;')[0]);<br \/>\n         brecto=subsups[0].getBoundingClientRect();<br \/>\n         crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();<br \/>\n         \/\/prompt(huh,'two;' + iois.id);<br \/>\n         }<br \/>\n         aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; \/\/'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';<br \/>\n         \/\/aconto.body.innerHTML+='&lt;div style=\"position:absolute;left:' + Math.max(0,arecto.left) + 'px;bottom:' + arecto.bottom + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(0,255,0,0.5);\"&gt;&lt;\/div&gt;';<br \/>\n   if (iois.id == 'ifright') {<br \/>\n     oktolook=false;<br \/>\n     var xtdcrect=null;<br \/>\n     if (document.getElementById('ifleft')) {<br \/>\n     xtdcrect=document.getElementById('ifleft').getBoundingClientRect();<br \/>\n     } else {<br \/>\n     xtdcrect=document.getElementById('tdcontainer').getBoundingClientRect();<br \/>\n     }<br \/>\n     iois.style.top='' + xtdcrect.top + 'px';<br \/>\n     iois.style.left='' + xtdcrect.left + 'px';<br \/>\n     elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('&lt;')[2].split(' ')[0].split('&gt;')[0]);<br \/>\n         subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('&lt;\/su')[1].split('&gt;')[0]);<br \/>\n         arecto=elesa[ivb].getBoundingClientRect();<br \/>\n         brecto=subsups[0].getBoundingClientRect();<br \/>\n         crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();<br \/>\n         \/\/aconto.getElementById('mycontainer').style.width='' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';<br \/>\n         for (var iozp=0; iozp&lt;15; iozp++) {<br \/>\n         elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('&lt;\/sup&gt;','') + subsups[eval(-1 + subsups.length)].outerHTML + '&lt;\/sup&gt;');<br \/>\n         }<br \/>\n         huh='arecto brecto crecto ' + String.fromCharCode(10);<br \/>\n         huh+='  left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);<br \/>\n         huh+='   top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);<br \/>\n         huh+='     x: ' + arecto.x + ' ' + brecto.x + ' ' + crecto.x + ' ' + String.fromCharCode(10);<br \/>\n         huh+='     y: ' + arecto.y + ' ' + brecto.y + ' ' + crecto.y + ' ' + String.fromCharCode(10);<br \/>\n         huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);<br \/>\n         huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);<br \/>\n         \/\/prompt(huh,'tWo;' + iois.id);<br \/>\n         aconto.getElementById('xbr').style.position='absolute';<br \/>\n         aconto.getElementById('xbr').style.left='33px';<br \/>\n         aconto.getElementById('xbr').style.top='40px';<br \/>\n         aconto.getElementById('xbr').style.width='276px';<br \/>\n         aconto.getElementById('xbr').style.height='276px';<br \/>\n         aconto.getElementById('xbr').style.backgroundColor='orange';<br \/>\n         aconto.getElementById('xbr').title='Square 276 x 276';<br \/>\n         rconto=aconto;<br \/>\n         rconto.querySelectorAll('sup').forEach(xsub =&gt; {<br \/>\n         xsub.addEventListener('click', () =&gt; {<br \/>\n           alert('Diagonal to square 276 x 276 ... ' + (eval(276 \/ Math.sin(45))) + ' pixels long');<br \/>\n         });<br \/>\n         });<br \/>\n         \/\/subsups[eval(-1 + subsups.length)].title='Diagonal to square 276 x 276 ... ' + (eval(276 \/ Math.sin(45))) + ' pixels long';<br \/>\n         \/\/setTimeout(function(){ document.getElementById('precon').style.display='table-cell'; }, 3000);<br \/>\n         enableScroll();<br \/>\n   }<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   <br \/>\n   if (iois.id == 'ifright' && 5 == 7) {<br \/>\n    var xtdcrect=parent.document.getElementById('ifleft').getBoundingClientRect();<br \/>\n    iois.style.top='' + xrectcrect.top + 'px';<br \/>\n    iois.style.left='' + xrectcrect.left + 'px';<br \/>\n   }<br \/>\n }<br \/>\n<br \/>\nfunction jccheck() {<br \/>\n  if (document.URL.indexOf('justclock=') != -1) {<br \/>\n    setTimeout(function() { document.getElementById('fibothone').scrollIntoView(); }, 15000);<br \/>\n  }<br \/>\n  if (document.URL.indexOf('justsquare=') != -1) {<br \/>\n    setTimeout(function() { document.getElementById('prerrow').scrollIntoView(); }, 15000);<br \/>\n  }<br \/>\n<br \/> <br \/>\n  setTimeout(function(){<br \/>\n  if (document.getElementById('taecll0001') && document.getElementById('taecll0002')) {<br \/>\n  \/\/alert(document.getElementById('taecll0001').value.replace(' style=\"',' style=\"margin-left:40px;'));<br \/>\n    document.getElementById('mycontainer').innerHTML=document.getElementById('taecll0001').value.replace(' style=\"',' style=\"margin-left:40px;').replace(\/rotate\\(8\/g, 'rotate(0').replace(\/rotate\\(\\-8\/g, 'rotate(0').replace(' id=\"', ' id=tl class=\"') + document.getElementById('taecll0002').value.replace(\/rotate\\(8\/g, 'rotate(0').replace(\/rotate\\(\\-8\/g, 'rotate(0').replace(' id=\"', ' id=br class=\"');<br \/>\n    var rectbr=document.getElementById('br').getBoundingClientRect();<br \/>\n    document.getElementById('mycontainer').style.width='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';<br \/>\n    document.getElementById('mycontainer').style.height='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';<br \/>\n    sd=document.getElementById('taecll0001').value.replace(' style=\"',' style=\"margin-left:40px;').replace('margin-top:-256px;','').replace(\/rotate\\(8\/g, 'rotate(0').replace(' id=\"', ' id=tl class=\"rotated-text-tl-to-br ');<br \/>\n    sd=sd +'&lt;\/div&gt;' + document.getElementById('taecll0001').value.replace(' style=\"margin-left:40px;',' style=\"').replace('margin-top:-256px;','').replace(\/rotate\\(8\/g, 'rotate(0').replace(' id=\"', ' id=xtl class=\"rotated-text-tl-to-br ').replace(\/\\ id\\=\\\"\/g, ' id=\"x').replace(\/\\ class\\=\\\"\/g, ' class=\"x').replace(' style=\"', ' style=\"padding-top:20px;opacity:0.2;color:transparent;');<br \/>\n    sdtwo=document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(\/rotate\\(8\/g, 'rotate(0').replace(\/rotate\\(\\-8\/g, 'rotate(0').replace(\/rotate\\(\\-8\/g, 'rotate(0').replace(' id=\"', ' id=br class=\"rotated-text-bl-to-tr ');<br \/>\n    sdtwo=sdtwo + '&lt;\/div&gt;' + document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(\/rotate\\(8\/g, 'rotate(0').replace(\/rotate\\(\\-8\/g, 'rotate(0').replace(\/rotate\\(\\-8\/g, 'rotate(0').replace(' id=\"', ' id=xbr class=\"rotated-text-bl-to-tr ').replace(\/\\ id\\=\\\"\/g, ' id=\"x').replace(\/\\ class\\=\\\"\/g, ' class=\"x').replace('color:blue;','').replace(' style=\"', ' style=\"margin-top:-256px;opacity:0.3;color:transparent;'); \/\/ used to be -520<br \/>\n    setTimeout(function(){<br \/>\n    var tdcrect=document.getElementById('tdcontainer').getBoundingClientRect();<br \/>\n    document.getElementById('tdcontainer').innerHTML='&lt;iframe frameborder=0 id=ifleft onload=\"analyze(this);\" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc=\"&lt;style&gt;' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(\/\\\"\/g,\"'\").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '&lt;\/style&gt;' + document.getElementById('mycontainer').outerHTML.split('&gt;')[0].replace(' style=\"',' style=\"background-color:white;').replace(\/\\\"\/g,\"'\") + '&gt;' + sd.replace(\/\\\"\/g,\"'\") + '&lt;\/div&gt;'.replace('&lt;\/div&gt;','') + '\"&gt;&lt;\/iframe&gt;' + '&lt;iframe frameborder=0 id=ifright onload=\"analyze(this);\" style=\"position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;\" srcdoc=\"&lt;style&gt;' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(\/\\\"\/g,\"'\").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '&lt;\/style&gt;' + document.getElementById('mycontainer').outerHTML.split('&gt;')[0].replace(' style=\"',' style=\"background-color:white;').replace(\/\\\"\/g,\"'\") + '&gt;' + sdtwo.replace(\/\\\"\/g,\"'\").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '&lt;\/div&gt;'.replace('&lt;\/div&gt;','') + '\"&gt;&lt;\/iframe&gt;';<br \/>\n    \/\/document.getElementById('rrow0001').innerHTML='&lt;td id=tdcontainer colspan=2 style=text-align:center;&gt;&lt;iframe frameborder=0 id=ifleft onload=\"analyze(this);\" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc=\"&lt;style&gt;' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(\/\\\"\/g,\"'\").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '&lt;\/style&gt;' + document.getElementById('mycontainer').outerHTML.split('&gt;')[0].replace(' style=\"',' style=\"background-color:white;').replace(\/\\\"\/g,\"'\") + '&gt;' + sd.replace(\/\\\"\/g,\"'\") + '&lt;\/div&gt;'.replace('&lt;\/div&gt;','') + '\"&gt;&lt;\/iframe&gt;' + '&lt;iframe frameborder=0 id=ifright onload=\"analyze(this);\" style=\"position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;\" srcdoc=\"&lt;style&gt;' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(\/\\\"\/g,\"'\").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '&lt;\/style&gt;' + document.getElementById('mycontainer').outerHTML.split('&gt;')[0].replace(' style=\"',' style=\"background-color:white;').replace(\/\\\"\/g,\"'\") + '&gt;' + sdtwo.replace(\/\\\"\/g,\"'\").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '&lt;\/div&gt;'.replace('&lt;\/div&gt;','') + '\"&gt;&lt;\/iframe&gt;&lt;\/td&gt;';<br \/>\n    }, 2000);<br \/>\n  }<br \/>\n  }, 2000);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Yet again, feel free to try out <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html--GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html--GETME\" rel=\"noopener\">third draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html\" rel=\"noopener\">Nested Diagonal Elements<\/a> web application with <a onclick=\"document.getElementById('ifclock').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html?justclock=y';\" href='#ifclock'>it&#8217;s analogue clock<\/a> or <a onclick=\"document.getElementById('ifclock').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html?justsquare=y';\" href='#ifclock'>it&#8217;s square diagonals<\/a> below.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/diagonal-element-nesting-analogue-clock-tutorial\/' rel=\"noopener\">New Diagonal Element Nesting Analogue Clock Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n\n\n<p id='denact'>Previous relevant <a target=\"_blank\" title='Diagonal Element Nesting Analogue Clock Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/diagonal-element-nesting-analogue-clock-tutorial\/' rel=\"noopener\">Diagonal Element Nesting Analogue Clock Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Diagonal Element Nesting Analogue Clock Tutorial\"]<a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Diagonal Element Nesting Analogue Clock Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_clock.gif\" title=\"Diagonal Element Nesting Analogue Clock Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>Those two diagonal lines produced in yesterday's <a title='Diagonal Element Nesting Tutorial' href='#dent'>Diagonal Element Nesting Tutorial<\/a> made us wonder ...<\/p>\n\n\n\n\n\n<blockquote>\nWhat can you build with controlled rotation and involving two diagonal elements?\n<\/blockquote>\n\n\n\n\n\n<p> ... 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, <font color=blue>featuring new Javascript<\/font> ...<\/p>\n\n\n\n<code>\n function andthen() {\n   var tds=document.getElementsByTagName('td');\n   ourtwo=1;\n   for (var itds=0; itds&lt;tds.length; itds++) {\n     if (('' + tds[itds].id).indexOf('cell') == 0) {\n      if (eval('' + tds[itds].innerText.length) &lt; 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='&lt;textarea rows=17 cols=80 id=' + ('' + tds[itds].id).replace('cell','taecll') + ' onblur=tait(this); style=width=100%;&gt;' + 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') + '&lt;\/textarea&gt;';\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='&lt;textarea rows=17 cols=80 id=' + ('' + tds[itds].id).replace('cell','taecll') + ' onblur=tait(this); style=width=100%;&gt;' + document.getElementById('cell' + ('0000' + curcellnum).slice(-4)).innerHTML + '&lt;\/textarea&gt;';\n      }\n     }\n   }\n   var <font color=blue>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=<font color=blue>maybeclock(<\/font>tds[0].innerHTML.replace(' style=\"', ' style=\"margin-top:0px;margin-left:0px;')<font color=blue>)<\/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   <font color=blue>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 <br \/>\n <font color=blue>function premaybeclock() {\n   if (glinh != '') {\n      \/\/alert('ct=' + ct + ' and glinh=' + glinh);\n      maybeclock(glinh);\n   }\n }\n <br \/>\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 <br \/>\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 <br \/>\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='&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;';\n   document.getElementById('fibothone').srcdoc='' + linh.replace('&gt;' + document.getElementById('chars').value + '&lt;\/su', ' id=lastsu&gt;' + document.getElementById('chars').value + '&lt;\/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%;') + '&lt;style&gt; sub:last-of-type { font-weight:bold; color: olive !important; } sup:last-of-type { font-weight:bold; color: olive !important; } &lt;\/style&gt;'; \/\/.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('&gt;' + document.getElementById('chars').value + '&lt;\/su', ' id=lastsu&gt;' + document.getElementById('chars').value + '&lt;\/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);') + '&lt;style&gt; sub:last-of-type { font-weight:bold; color: pink !important; } sup:last-of-type { font-weight:bold; color: pink !important; } &lt;\/style&gt;'; \/\/ + \"&lt;style&gt;.logo {  width: 100vw;  height: 100vh;  position: relative; } .logo__svg {  width: 300px;  height: 300px;  position: absolute;  top: 50%; left: 50%;  transform: translate(-50%, -50%);}&lt;\/style&gt;&lt;div class=\\\"logo\\\"&gt;&lt;svg class=\\\"logo__svg\\\"&gt;&lt;circle cx=\\\"50%\\\" cy=\\\"50%\\\" r=\\\"150\\\" style=\\\"fill:rgba(255,0,0,0.6);stroke:white;stroke-width:1;\\\"\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\"; \/\/.replace(\/inline\\-block\\;\/g, 'inline;');\n   document.getElementById('fiboththree').srcdoc=\"&lt;head&gt;&lt;title&gt;\" + ('' + new Date()) + \"&lt;\/title&gt;&lt;style&gt; .logo {  width: 100vw;  height: 100vh;  position: relative; } .logo__svg {  width: 312px;  height: 312px;  position: absolute;  top: 47%; left: 49%;  transform: translate(-50%, -50%); } &lt;\/style&gt;&lt;\/head&gt;&lt;body id=xbody&gt;&lt;div class=\\\"logo\\\"&gt;&lt;svg class=\\\"logo__svg\\\"&gt;&lt;circle cx=\\\"50%\\\" cy=\\\"50%\\\" r=\\\"155\\\" style=\\\"fill:rgba(255,0,0,1);stroke:white;stroke-width:1;\\\"\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/body&gt;\"; \/\/.replace(\/inline\\-block\\;\/g, 'inline;');\n   return linh;\n }<\/font>\n<\/code>\n\n\n\n<p>And so, again, feel free to try out this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html-GETME\" rel=\"noopener\">second draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html\" rel=\"noopener\">Nested Diagonal Elements<\/a> web application <a onclick=\"document.getElementById('ifclock').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html?justclock=y';\" href='#ifclock'>below<\/a>.<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/diagonal-element-square-nesting-tutorial\/' rel=\"noopener\">Diagonal Element Square Nesting Tutorial<\/a>.<\/p-->\n<hr>\n<p id='dent'>Previous relevant <a target=\"_blank\" title='Diagonal Element Nesting Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/diagonal-element-nesting-tutorial\/' rel=\"noopener\">Diagonal Element Nesting Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Diagonal Element Nesting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.jpg\" title=\"Diagonal Element Nesting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Diagonal Element Nesting Tutorial<\/p><\/div>\n<p>A variation on yesterday&#8217;s <a title='Nesting Primer Tutorial' href='#npt'>Nesting Primer Tutorial<\/a>, as well as being inspired by that work is today&#8217;s &#8230;<\/p>\n<ol>\n<li>diagonal element &#8230; via &#8230;<\/li>\n<li>nested &#8230;\n<ul>\n<li>display: inline;<\/li>\n<li>display: inline-block;<\/li>\n<\/ul>\n<p> &#8230; <\/p>\n<ul>\n<li><a target=\"_blank\" title='sub element information from W3schools' href='https:\/\/www.w3schools.com\/tags\/tag_sub.asp' rel=\"noopener\"><i>sub<\/i><\/a> top<sup>left<\/sup> to bottom<sup>right<\/sup> diagonal componentry element look<\/li>\n<li><a target=\"_blank\" title='sup element information from W3schools' href='https:\/\/www.w3schools.com\/tags\/tag_sup.asp' rel=\"noopener\"><i>sup<\/i><\/a> bottom<sup>left<\/sup> to top<sup>right<\/sup> diagonal componentry element look<\/li>\n<\/ul>\n<p><font size=1> &#8230; we noticed working (ie. achieving nested &#8220;diagon<a target=\"_blank\" href='https:\/\/www.youtube.com\/watch?v=5W-a0tl9Fu0' rel=\"noopener\">al<\/a><sup>it<\/sup><a target=\"_blank\" href='https:\/\/www.youtube.com\/watch?v=5W-a0tl9Fu0' rel=\"noopener\">y<\/a>&#8220;)  yesterday<\/font>\n<\/li>\n<\/ol>\n<p> &#8230; functionality.  Yes, this might be thought of as &#8220;overkill&#8221; compared to &#8230;<\/p>\n<ul>\n<li><i>hr<\/i> element rotations &#8230; and\/or &#8230;<\/li>\n<li>SVG<\/li>\n<\/ul>\n<p> &#8230; arguably easier means to achieve a &#8220;diagonal element&#8221; look.  Nevertheless, the more ways to achieve an objective up your sleeve, the better, we reckon!<\/p>\n<p>Again, feel free to try out this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html_GETME\" rel=\"noopener\">proof of concept<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html\" rel=\"noopener\">Nested Diagonal Elements<\/a> web application below &#8230;<\/p>\n<div style=\"z-index:987;width:900px;height:2400px;-webkit-overflow-scrolling:touch;overflow:auto;\"><iframe id=ifclock src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/diagon_alley.html\" style=\"width:1500px;height:4400px;\"><\/iframe><\/div>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/diagonal-element-nesting-tutorial\/' rel=\"noopener\">Diagonal Element Nesting Tutorial<\/a>.<\/p-->\n<hr>\n<p id='npt'>Previous relevant <a target=\"_blank\" title='Nesting Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/nesting-primer-tutorial\/' rel=\"noopener\">Nesting Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nesting.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Nesting Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nesting.gif\" title=\"Nesting Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Nesting Primer Tutorial<\/p><\/div>\n<p>The text (which can include emojis) &#8230;<\/p>\n<ul>\n<li>display: inline;<\/li>\n<li>display: inline-block;<\/li>\n<\/ul>\n<p> &#8230; HTML elements are endlessly fascinating in our eyes, regarding the &#8220;nesting&#8221; of elements.<\/p>\n<p>You can read all you like about this at a website like <a target=\"_blank\" title='W3schools' href='http:\/\/www.w3schools.com' rel=\"noopener\">W3schools<\/a> but we find endless surprises, so we decided to code for a web application with scope within a table cell &#8220;parent&#8221; element &#8230;<\/p>\n<ul>\n<li>reinitialize (ie. append) span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element to the end of table cell content<\/li>\n<li>nest span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element onto the end of the most outer table cell element&#8217;s content within the table cell content, or a clicked element flagged with a pink background<\/li>\n<\/ul>\n<p>We find it interesting changing up the choice above and font-size and new element content textbox settings and seeing what happens.  You see the resultant HTML innards below in a textarea element which changes to are reflected above <font size=1>(and in this way, you can pick an element type not listed above, if you like)<\/font>, as are changes to second and on table cell content&#8217;s on the top row.<\/p>\n<p>Feel free to try out this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nesting.html_GETME\" rel=\"noopener\">proof of concept<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nesting.html\" rel=\"noopener\">Nesting<\/a> web application below &#8230;<\/p>\n<p><iframe src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/nesting.html\" style=\"width:100%;height:1200px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d71803' onclick='var dv=document.getElementById(\"d71803\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/nest\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71803' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d71813' onclick='var dv=document.getElementById(\"d71813\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/diagonal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71813' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d71827' onclick='var dv=document.getElementById(\"d71827\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/clock\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71827' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d71868' onclick='var dv=document.getElementById(\"d71868\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/square\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71868' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re adding onto the day before yesterday&#8217;s Diagonal Element Nesting Analogue Clock Tutorial some diagonal &#8230; display: inline; display: inline-block; &#8230; nested diagonals across a square, testing more placement accuracy concepts &#8230; function analyze(iois) { var arecto=null, brecto=null, brecto=null, elesa=[], &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/diagonal-element-square-nesting-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[3084,1580,1933,5405,5406,341,484,576,2487,3580,1525,652,2521,1546,2621,997,1071,1072,2771,1238,1581,1254,5404,1319],"class_list":["post-71868","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-analogue-clock","tag-cell","tag-clock","tag-diagonal","tag-diagonality","tag-display","tag-geometry","tag-html","tag-inline","tag-inline-block","tag-innerhtml","tag-javascript","tag-nest","tag-nested","tag-nesting","tag-programming","tag-rotate","tag-rotation","tag-square","tag-table","tag-table-cell","tag-text","tag-texxtarea","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/71868"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=71868"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/71868\/revisions"}],"predecessor-version":[{"id":71873,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/71868\/revisions\/71873"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=71868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=71868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=71868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}