Tag Archives: viewport

We always find it happening to us, that being that we start graphically representing something, but find out that we need more room on the paper (or whatever) we’re using. That combined with our deep and abiding penchant to try to contain all the ideas on the one piece of paper, we find ourselves wishing we could “make more room”, just like with those occasions Christmas wrapping you have cut out a piece of wrapping paper that ends up too small (and the ol’ “diagonal wrapping plan trick” cannot help enough). To the human eye, this is not a difficult conceptual job, but to the computer (with its programming … and amended teste.htm … “proof of concept” code) we need to consider (on top of our work up to Mind Map and Flowchart and Venn Diagram Tutorial‘s) all of … narrow the scope of relevant HTML elements that need to move to … div position: absolute work out if they are “link lines” (via there ID attribute starting with “ld”, because of CSS “transform rotate” styling) or Flowchart (class diamond) question elements (because of using CSS ::after selectors) cater for 8 scenarios (attended to by one dropdown and four buttons … <table id=mytable style=’display:inline-block;’><tr><td>Make <select ontouchdown=’event.stopPropagation();’ onmousedown=’event.stopPropagation();’ id=’selroom’><option value=”>Room</option><option value=’-‘>Less Room</option></select> at the …</td><td><input ontouchdown=’event.stopPropagation(); makeroom(0);’ onmousedown=’event.stopPropagation(); makeroom(0);’ type=button value=’Left’></input></td><td><input ontouchdown=’event.stopPropagation(); makeroom(1);’ onmousedown=’event.stopPropagation(); makeroom(1);’ type=button value=’Top’></input></td><td><input ontouchdown=’event.stopPropagation(); makeroom(2);’ onmousedown=’event.stopPropagation(); makeroom(2);’ type=button value=’Right’></input></td><td><input ontouchdown=’event.stopPropagation(); makeroom(3);’ onmousedown=’event.stopPropagation(); makeroom(3);’ type=button value=’Bottom’></input></td></tr></table> ) as per … function makeroom(what) { var ourrect=[], idivs; var sbits=[]; var spref=document.getElementById(‘selroom’).value; if (what == 3) { ourrect.push(document.body.getBoundingClientRect()); document.body.style.height=” + eval(eval(spref + ‘100’) + ourrect[0].height) + ‘px’; } else if (what == 2) { ourrect.push(document.body.getBoundingClientRect()); document.body.style.width=” + eval(eval(spref + ‘100’) + ourrect[0].width) + ‘px’; } else { var divs=document.getElementsByTagName(‘div’); for (idivs=0; idivs<divs.length; idivs++) { if ((” + divs[idivs].style.position).toLowerCase() == ‘absolute’) { ourrect.push(divs[idivs].getBoundingClientRect()); } else { ourrect.push(null); } } for (idivs=0; idivs<divs.length; idivs++) { if (ourrect[idivs]) { if (what == 1) { divs[idivs].style.position=’absolute’; if ((” + divs[idivs].id).indexOf(‘ld’) == 0 || (” + divs[idivs].className).toLowerCase().indexOf(‘diamond’) != -1) { divs[idivs].style.top=” + eval(eval(spref + ‘100’) + eval((” + divs[idivs].style.top).replace(‘px’,”))) + ‘px’; } else { divs[idivs].style.top=” + eval(eval(spref + ‘100’) + ourrect[idivs].top) + ‘px’; divs[idivs].style.left=” + eval(0 + ourrect[idivs].left) + ‘px’; divs[idivs].style.width=” + eval(0 + ourrect[idivs].width) + ‘px’; divs[idivs].style.height=” + eval(0 + ourrect[idivs].height) + ‘px’; } } else if (what == 0) { divs[idivs].style.position=’absolute’; if ((” + divs[idivs].id).indexOf(‘ld’) == 0 || (” + divs[idivs].className).toLowerCase().indexOf(‘diamond’) != -1)