Diagonal Element Rubber Banding Tutorial
Some days before yesterday’s Diagonal Element Square Nesting Tutorial we compared this current “nesting” diagonal element logic to …
Yes, this might be thought of as “overkill” compared to …
- hr element rotations … and/or …
- SVG
… and, today, yes, we bring back “hr element rotation diagonal” thinking, inspired by the work done in the days of PDF Image and Text Nodes Windows Files Tutorial, adding some “what you might hear around the traps” referred to as “Rubber Banding”. Here we “Rubber Band” …
- after an initial click event
- followed by some mousemove (like “drag”) event user actions
… as a temporary look while in “mousemove” mode, but a detected “mouseout”, in our logic, retains that last “Rubber Banding”, featuring an “hr” diagonal, and overlayed, element set.
And so, yet again, feel free to try out the changed fourth draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below.
Previous relevant Diagonal Element Square Nesting Tutorial is shown below.
Diagonal Element Square Nesting Tutorial
We’re adding onto the day before yesterday’s Diagonal Element Nesting Analogue Clock Tutorial some diagonal …
- display: inline;
- display: inline-block;
… nested diagonals across a square, testing more placement accuracy concepts …
function analyze(iois) {
var arecto=null, brecto=null, brecto=null, elesa=[], subsups=[], huh='';
if (!oktolook) { return ''; }
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
for (var ivb=0; ivb<elesa.length; ivb+=eval(elesa.length / 2)) {
arecto=elesa[ivb].getBoundingClientRect();
if (ivb == 0 && iois.id == 'ifleft') {
subsups=aconto.getElementsByTagName('sub');
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//prompt(huh,'one;' + iois.id);
//aconto.body.innerHTML+='<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);"></div>';
elesa[ivb].style.left='50px';
elesa[ivb].style.marginTop='75px';
for (var iop=0; iop<15; iop++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sub>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sub>');
}
lconto=aconto;
lconto.querySelectorAll('sub').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
} else {
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
if (iois.id == 'ifright') {
elesa[ivb].style.left='50px';
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//prompt(huh,'two;' + iois.id);
}
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//aconto.body.innerHTML+='<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);"></div>';
if (iois.id == 'ifright') {
oktolook=false;
var xtdcrect=null;
if (document.getElementById('ifleft')) {
xtdcrect=document.getElementById('ifleft').getBoundingClientRect();
} else {
xtdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
}
iois.style.top='' + xtdcrect.top + 'px';
iois.style.left='' + xtdcrect.left + 'px';
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
arecto=elesa[ivb].getBoundingClientRect();
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//aconto.getElementById('mycontainer').style.width='' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
for (var iozp=0; iozp<15; iozp++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sup>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sup>');
}
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' x: ' + arecto.x + ' ' + brecto.x + ' ' + crecto.x + ' ' + String.fromCharCode(10);
huh+=' y: ' + arecto.y + ' ' + brecto.y + ' ' + crecto.y + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
//prompt(huh,'tWo;' + iois.id);
aconto.getElementById('xbr').style.position='absolute';
aconto.getElementById('xbr').style.left='33px';
aconto.getElementById('xbr').style.top='40px';
aconto.getElementById('xbr').style.width='276px';
aconto.getElementById('xbr').style.height='276px';
aconto.getElementById('xbr').style.backgroundColor='orange';
aconto.getElementById('xbr').title='Square 276 x 276';
rconto=aconto;
rconto.querySelectorAll('sup').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
//subsups[eval(-1 + subsups.length)].title='Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long';
//setTimeout(function(){ document.getElementById('precon').style.display='table-cell'; }, 3000);
enableScroll();
}
}
}
}
}
}
if (iois.id == 'ifright' && 5 == 7) {
var xtdcrect=parent.document.getElementById('ifleft').getBoundingClientRect();
iois.style.top='' + xrectcrect.top + 'px';
iois.style.left='' + xrectcrect.left + 'px';
}
}
function jccheck() {
if (document.URL.indexOf('justclock=') != -1) {
setTimeout(function() { document.getElementById('fibothone').scrollIntoView(); }, 15000);
}
if (document.URL.indexOf('justsquare=') != -1) {
setTimeout(function() { document.getElementById('prerrow').scrollIntoView(); }, 15000);
}
setTimeout(function(){
if (document.getElementById('taecll0001') && document.getElementById('taecll0002')) {
//alert(document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;'));
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="');
var rectbr=document.getElementById('br').getBoundingClientRect();
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';
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';
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 ');
sd=sd +'</div>' + 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;');
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 ');
sdtwo=sdtwo + '</div>' + 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
setTimeout(function(){
var tdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
document.getElementById('tdcontainer').innerHTML='<iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<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="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe>';
//document.getElementById('rrow0001').innerHTML='<td id=tdcontainer colspan=2 style=text-align:center;><iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<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="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe></td>';
}, 2000);
}
}, 2000);
}
Yet again, feel free to try out the changed third draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below.
Previous relevant Diagonal Element Nesting Tutorial is shown below.
Diagonal Element Nesting Tutorial
A variation on yesterday’s Nesting Primer Tutorial, as well as being inspired by that work is today’s …
- diagonal element … via …
- nested …
- display: inline;
- display: inline-block;
…
- sub topleft to bottomright diagonal componentry element look
- sup bottomleft to topright diagonal componentry element look
… we noticed working (ie. achieving nested “diagonality“) yesterday
… functionality. Yes, this might be thought of as “overkill” compared to …
- hr element rotations … and/or …
- SVG
… arguably easier means to achieve a “diagonal element” look. Nevertheless, the more ways to achieve an objective up your sleeve, the better, we reckon!
Again, feel free to try out this proof of concept Nested Diagonal Elements web application below …
Previous relevant Nesting Primer Tutorial is shown below.
Nesting Primer Tutorial
The text (which can include emojis) …
- display: inline;
- display: inline-block;
… HTML elements are endlessly fascinating in our eyes, regarding the “nesting” of elements.
You can read all you like about this at a website like W3schools but we find endless surprises, so we decided to code for a web application with scope within a table cell “parent” element …
- 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
- 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’s content within the table cell content, or a clicked element flagged with a pink background
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 (and in this way, you can pick an element type not listed above, if you like), as are changes to second and on table cell content’s on the top row.
Feel free to try out this proof of concept Nesting web application below …
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
